Live Search CIF Component live-search-cif-component
Live Search for Adobe Commerce delivers a fast, relevant, and intuitive search experience at no additional cost. Live Search powered by Adobe Sensei uses artificial intelligence and machine-learning algorithms to perform a deep analysis of aggregated visitor data. This data, when combined with your Adobe Commerce catalog, results in a relevant and personalized shopping experiences.
This topic describes how to use an AEM CIF component to implement the Live Search Product Listing Page (PLP) widget into your AEM site.
Prerequisites prerequisites
This topic assumes you have a local AEM environment set up.
The PLP component requires the Live Search Popover CIF component to be installed. The PLP widget requires a browser session variable generated by the popover.
Update Composer update-composer
Add eventing modules to ui.frontend/package.json
.
At line 27, change:
...
},
"devDependencies": {
"@babel/core": "^7.3.4",
...
to:
...
},
"type": "module",
"devDependencies": {
"@adobe/magento-storefront-event-collector": "^1.5.4",
"@adobe/magento-storefront-events-sdk": "^1.5.4",
"@babel/core": "^7.3.4",
...
Files Changes files-changes
Multiple files must be updated to enable Live Search functionality. Edit the following files. Line numbers may be slightly different than shown here.
-
ui.apps/src/main/content/jcr_root/apps/venia/clientlibs/clientlib-cif/.content.xml
Append
core.cif.productlist.v1
to theembed
line.code language-none 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/clientlibs/.content.xml
Create a file
.content.xml
:code language-xml <?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
Create the file
css.txt
:code language-text #base=css productlist.css
-
ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/css/productlist.css
Create the file
productlist.css
code language-css /* #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
Create the file
js.txt
:code language-text js/productlist.js
-
ui.apps/src/main/content/jcr_root/apps/venia/components/commerce/productlist/clientlibs/js/productlist.js
Create the file
productlist.js
:code language-javascript /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~ 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(() => { console.log("init PLP"); window.LiveSearchPLP({ storeDetails, root }); }, 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
Create file
productlist.html
:code language-html <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/searchresults/.content.xml
Edit
.content.xml
at Line 6:code language-xml sling:resourceSuperType="venia/components/commerce/productlist"
-
ui.content/src/main/content/jcr_root/content/venia/language-masters/en/search/.content.xml
Edit
.content.xml
at Line 21-22:code language-xml sling:resourceType="venia/components/commerce/productlist"
-
ui.content/src/main/content/jcr_root/content/venia/us/en/search/.content.xml
Edit
.content.xml
at Line 26:code language-xml sling:resourceType="venia/components/commerce/productlist"
-
ui.frontend/src/main/components/App/App.js
Edit
App.js
at Line 47, just above the../../site/main.scss
:code language-javascript import '@adobe/magento-storefront-event-collector';
-
ui.tests/test-module/specs/venia/productlist-dialog.js
Edit
productlist-dialog.js
and changedescribe
todescribe.skip
at Line 20:code language-javascript describe.skip('Product List Component Dialog', function () {
Non-PLP Pages non-plp-pages
There may be some categories where the default category or catalog page is desired, rather than using the PLP widget. In AEM, these category pages must be configured manually.
- From the Author page, select a category page template. Venia Store - Home > Catalog Page > Venia Store - Category Page and select “Shop the look” or create a new page template.
- Click the Properties section and select the Commerce tab.
- Chose the category that you wish to display with the selected category page template.