Cif livesearch widget (Reference only)

all/src/main/content/jcr_root/apps/venia/osgiconfig-cloud/config.author/com.adobe.cq.commerce.graphql.client.impl.GraphqlClientImpl~venia.cfg.json

@@ -8,7 +8,7 @@
   "maxHttpConnections": 20,
   "connectionTimeout": 5000,
   "requestPoolTimeout": 2000,
-  "socketTimeout": 5000,
+  "socketTimeout": 15000,
   "cacheConfigurations": [
     "venia/components/commerce/navigation:true:5:300",
     "com.adobe.cq.commerce.core.search.services.SearchFilterService:true:10:300",

all/src/main/content/jcr_root/apps/venia/osgiconfig-cloud/config.publish/com.adobe.cq.commerce.graphql.client.impl.GraphqlClientImpl~venia.cfg.json

@@ -7,7 +7,7 @@
   "maxHttpConnections": 20,
   "connectionTimeout": 5000,
   "requestPoolTimeout": 2000,
-  "socketTimeout": 5000,
+  "socketTimeout": 15000,
   "cacheConfigurations": [
     "venia/components/commerce/navigation:true:5:300",
     "com.adobe.cq.commerce.core.search.services.SearchFilterService:true:10:300",

pom.xml

@@ -87,7 +87,7 @@
         <vault.user>admin</vault.user>
         <vault.password>admin</vault.password>
         <core.wcm.components.version>2.18.6</core.wcm.components.version>
-        <core.cif.components.version>2.12.0</core.cif.components.version>
+        <core.cif.components.version>2.12.4</core.cif.components.version>
         <graphql.client.version>1.7.10</graphql.client.version>
         <magento.graphql.version>9.1.0-magento242ee</magento.graphql.version>
         <bnd.version>5.1.2</bnd.version>

ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-cif/.content.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" 
-    jcr:primaryType="cq:ClientLibraryFolder" 
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
     allowProxy="{Boolean}true"
     cssProcessor="[default:none,min:none]"
     jsProcessor="[default:none,min:none]"
-    categories="[venia.cif]" 
-    embed="[core.cif.components.common,core.cif.components.product.v3,core.cif.components.productcarousel.v1,core.cif.components.productcollection.v2,core.cif.components.productteaser.v1,core.cif.components.searchbar.v2,core.cif.components.header.v1,core.cif.components.carousel.v1,core.cif.components.categorycarousel.v1,core.cif.components.featuredcategorylist.v1,core.cif.components.storefront-events.v1,core.cif.components.extensions.product-recs.storefront-events-collector.v1,core.wcm.components.commons.site.link]" />
+    categories="[venia.cif]"
+    embed="[core.cif.components.common,core.cif.components.product.v3,core.cif.components.productcarousel.v1,core.cif.components.productcollection.v2,core.cif.components.productteaser.v1,core.cif.components.searchbar.v2,core.cif.components.header.v1,core.cif.components.carousel.v1,core.cif.components.categorycarousel.v1,core.cif.components.featuredcategorylist.v1,core.cif.components.storefront-events.v1,core.cif.components.extensions.product-recs.storefront-events-collector.v1,core.wcm.components.commons.site.link,core.cif.productlist.v1]" />

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/.content.xml

@@ -1,7 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
-    jcr:description="Product List Component"
-    jcr:primaryType="cq:Component"
-    jcr:title="Product List"
-    sling:resourceSuperType="core/cif/components/commerce/productlist/v2/productlist"
-    componentGroup="Venia - Commerce"/>
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+  xmlns:cq="http://www.day.com/jcr/cq/1.0"
+  xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:description="Product List Component" jcr:primaryType="cq:Component" jcr:title="Product List" componentGroup="Venia - Commerce" sling:resourceSuperType="core/cif/components/commerce/productlist/v2/productlist" />

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/.content.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[core.cif.productlist.v1]"
+    jsProcessor="[default:none,min:none]"/>

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/css.txt

@@ -0,0 +1,3 @@
+#base=css
+
+productlist.css

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/css/productlist.css

@@ -0,0 +1,22 @@
+/* #search-plp-root */
+
+html {
+  font-size: 62.5% !important;
+}
+
+body {
+  font-size: 1.6rem;
+}
+
+.root.container {
+  max-width: inherit;
+}
+
+.container {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+div.ds-sdk-sort-dropdown {
+  z-index: 9;
+}

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/js.txt

@@ -0,0 +1 @@
+js/productlist.js

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/js/productlist.js

@@ -0,0 +1,149 @@
+/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ ~ Copyright 2023 Adobe
+ ~
+ ~ Licensed under the Apache License, Version 2.0 (the "License");
+ ~ you may not use this file except in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
+"use strict";
+
+class ProductList {
+  constructor() {
+    const stateObject = {
+      categoryName: null,
+      currentCategoryUrlPath: null,
+    };
+    this._state = stateObject;
+    this._init();
+  }
+
+  _init() {
+    this._initWidgetPLP();
+  }
+
+  _injectStoreScript(src) {
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = src;
+
+    document.head.appendChild(script);
+  }
+
+  async _getStoreData() {
+    // get from session storage
+    const sessionData = sessionStorage.getItem(
+      "WIDGET_STOREFRONT_INSTANCE_CONTEXT"
+    );
+    // WIDGET_STOREFRONT_INSTANCE_CONTEXT is set from searchbar/clientlibs/js/searchbar.js
+    // if not, we will need to retrieve from graphql separately here.
+
+    if (sessionData) {
+      this._state.dataServicesSessionContext = JSON.parse(sessionData);
+      return;
+    }
+  }
+
+  getStoreConfigMetadata() {
+    const storeConfig = JSON.parse(
+      document
+        .querySelector("meta[name='store-config']")
+        .getAttribute("content")
+    );
+
+    const { storeRootUrl } = storeConfig;
+    const redirectUrl = storeRootUrl.split(".html")[0];
+    return { storeConfig, redirectUrl };
+  }
+
+  async _initWidgetPLP() {
+    if (!window.LiveSearchPLP) {
+      const liveSearchPlpSrc =
+        "https://plp-widgets-ui.magento-ds.com/v1/search.js";
+      this._injectStoreScript(liveSearchPlpSrc);
+      // wait until script is loaded
+      await new Promise((resolve) => {
+        const interval = setInterval(() => {
+          if (window.LiveSearchPLP && window.LiveSearchAutocomplete) {
+            // Widget expects LiveSearchAutocomplete already loaded to rely on data-service-graphql
+            clearInterval(interval);
+            resolve();
+          }
+        }, 200);
+      });
+    }
+    await this._getStoreData();
+    const { dataServicesSessionContext } = this._state;
+    if (!dataServicesSessionContext) {
+      console.log("no dataServicesSessionContext");
+      return;
+    }
+
+    const root = document.getElementById("search-plp-root");
+    if (!root) {
+      console.log("plp root not found.");
+      return;
+    }
+    // get dataset from root
+    const categoryUrlPath = root.getAttribute("data-plp-urlPath") || "";
+    const categoryName = root.getAttribute("data-plp-title") || "";
+    const storeDetails = {
+      environmentId: dataServicesSessionContext.environment_id,
+      environmentType: dataServicesSessionContext.environment,
+      apiKey: dataServicesSessionContext.api_key,
+      websiteCode: dataServicesSessionContext.website_code,
+      storeCode: dataServicesSessionContext.store_code,
+      storeViewCode: dataServicesSessionContext.store_view_code,
+      config: {
+        pageSize: dataServicesSessionContext.page_size,
+        perPageConfig: {
+          pageSizeOptions: dataServicesSessionContext.page_size_options,
+          defaultPageSizeOption:
+            dataServicesSessionContext.default_page_size_option,
+        },
+        minQueryLength: dataServicesSessionContext.min_query_length,
+        currencySymbol: dataServicesSessionContext.currency_symbol,
+        currencyRate: dataServicesSessionContext.currency_rate,
+        displayOutOfStock: dataServicesSessionContext.display_out_of_stock,
+        allowAllProducts: dataServicesSessionContext.allow_all_products,
+        locale: dataServicesSessionContext.locale,
+        currentCategoryUrlPath: categoryUrlPath,
+        categoryName,
+        displayMode: "", // "" for plp || "PAGE" for category/catalog
+      },
+      context: {
+        customerGroup: dataServicesSessionContext.customer_group,
+      },
+      route: ({ sku }) => {
+        return `${
+          this.getStoreConfigMetadata().redirectUrl
+        }.cifproductredirect.html/${sku}`;
+      },
+      searchQuery: "search_query",
+    };
+
+    setTimeout(() => {
+      window.LiveSearchPLP({ storeDetails, root });
+      console.log("LiveSearchPLP loaded");
+    }, 0);
+  }
+}
+
+(function () {
+  function onDocumentReady() {
+    new ProductList({});
+  }
+
+  if (document.readyState !== "loading") {
+    onDocumentReady();
+  } else {
+    document.addEventListener("DOMContentLoaded", onDocumentReady);
+  }
+})();

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/productlist.html

@@ -0,0 +1,7 @@
+<div
+  data-sly-use.productList="com.adobe.cq.commerce.core.components.models.productlist.ProductList"
+  id="search-plp-root"
+  class="productlist__root"
+  data-plp-urlPath="${productList.storefrontContext.urlPath}"
+  data-plp-title="${productList.title}"
+></div>

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/searchbar/clientlibs/js/searchbar.js

@@ -215,7 +215,6 @@ class SearchBar {
       console.log("no dataServicesStorefrontInstanceContext");
       return;
     }
-
     // initialize live-search
     new window.LiveSearchAutocomplete({
       environmentId: dataServicesStorefrontInstanceContext.environment_id,
@@ -245,6 +244,7 @@ class SearchBar {
         query: "search_query",
       },
     });
+    console.log("LiveSearch loaded");
 
     const formEle = document.getElementById("search_mini_form");
 
@@ -291,7 +291,7 @@ class SearchBar {
       website_name,
     } = dataServicesStorefrontInstanceContext;
 
-    console.log("initializing magento extension");
+    console.log("magento extension loaded");
     mse.context.setMagentoExtension({
       magentoExtensionVersion: this._state.magentoExtensionVersion,
     });

ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/searchresults/.content.xml

@@ -3,5 +3,5 @@
     jcr:description="Search Result Component"
     jcr:primaryType="cq:Component"
     jcr:title="Search Results"
-    sling:resourceSuperType="core/cif/components/commerce/searchresults/v2/searchresults"
+    sling:resourceSuperType="venia/components/commerce/productlist"
     componentGroup="Venia - Commerce"/>

ui.content/src/main/content/jcr_root/content/venia/language-masters/en/search/.content.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
-    xmlns:cq="http://www.day.com/jcr/cq/1.0" 
-    xmlns:jcr="http://www.jcp.org/jcr/1.0" 
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:cq="http://www.day.com/jcr/cq/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:Page">
     <jcr:content
         cq:allowedTemplates="[/conf/venia/settings/wcm/templates/page-content]"
@@ -10,16 +10,16 @@
         jcr:title="Venia Demo Store - Search Results"
         sling:resourceType="venia/components/page"
         hideInNav="true">
-        <root jcr:primaryType="nt:unstructured" 
-            sling:resourceType="venia/components/container" 
+        <root jcr:primaryType="nt:unstructured"
+            sling:resourceType="venia/components/container"
             layout="responsiveGrid">
-            <container jcr:primaryType="nt:unstructured" 
+            <container jcr:primaryType="nt:unstructured"
                 sling:resourceType="venia/components/container">
-                <container jcr:primaryType="nt:unstructured" 
-                    sling:resourceType="venia/components/container" 
+                <container jcr:primaryType="nt:unstructured"
+                    sling:resourceType="venia/components/container"
                     layout="responsiveGrid">
-                    <searchresults jcr:primaryType="nt:unstructured" 
-                        sling:resourceType="venia/components/commerce/searchresults"
+                    <searchresults jcr:primaryType="nt:unstructured"
+                        sling:resourceType="venia/components/commerce/productlist"
                         defaultSortField="relevance"
                         defaultSortOrder="desc"/>
                 </container>

ui.content/src/main/content/jcr_root/content/venia/us/en/search/.content.xml

@@ -1,31 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
-    xmlns:cq="http://www.day.com/jcr/cq/1.0" 
-    xmlns:jcr="http://www.jcp.org/jcr/1.0" 
+<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
+    xmlns:cq="http://www.day.com/jcr/cq/1.0"
+    xmlns:jcr="http://www.jcp.org/jcr/1.0"
     jcr:primaryType="cq:Page">
     <jcr:content
         cq:allowedTemplates="[/conf/venia/settings/wcm/templates/page-content]"
         cq:template="/conf/venia/settings/wcm/templates/page-content"
         cq:robotsTags="[noindex]"
         jcr:primaryType="cq:PageContent"
-        jcr:mixinTypes="[cq:LiveRelationship]" 
+        jcr:mixinTypes="[cq:LiveRelationship]"
         jcr:title="Venia Demo Store - Search Results"
-        sling:resourceType="venia/components/page" 
+        sling:resourceType="venia/components/page"
         hideInNav="true">
         <root jcr:primaryType="nt:unstructured"
             jcr:mixinTypes="[cq:LiveRelationship]"
-            sling:resourceType="venia/components/container" 
+            sling:resourceType="venia/components/container"
             layout="responsiveGrid">
             <container jcr:primaryType="nt:unstructured"
                 jcr:mixinTypes="[cq:LiveRelationship]"
                 sling:resourceType="venia/components/container">
                 <container jcr:primaryType="nt:unstructured"
                     jcr:mixinTypes="[cq:LiveRelationship]"
-                    sling:resourceType="venia/components/container" 
+                    sling:resourceType="venia/components/container"
                     layout="responsiveGrid">
                     <searchresults jcr:primaryType="nt:unstructured"
                         jcr:mixinTypes="[cq:LiveRelationship]"
-                        sling:resourceType="venia/components/commerce/searchresults"
+                        sling:resourceType="venia/components/commerce/productlist"
                         defaultSortField="relevance"
                         defaultSortOrder="desc"/>
                 </container>