Add Live Search Widgets (EDS Delivery) (#18)

* Add PLP and search widget

* Add autocomplete widget

* Use EDS delivered widgets

* Fix linting

* Fix linting

* Add urlKey to route function

* Update widget version

* Fix PLP widget config

* Fix CLS

* Fix CLS

* Fix SaaS environment for LS autocomplete

* search.js latest from elsie-base-design branch

* add to cart

* Optimize add to cart and enable list view

* latest widgets update from elsie-base-design

* Style fixes

---------

Co-authored-by: Kathleen Tynan <[email protected]>

.eslintignore

@@ -1,4 +1,5 @@
 helix-importer-ui
 scripts/preact.js
 scripts/htm.js
-tools/picker
+tools/picker
+scripts/widgets

blocks/header/header.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 /* header and nav layout */
 header .nav-wrapper {
   background-color: var(--background-color);
@@ -314,6 +316,10 @@ header .nav-search-input input {
   padding: 5px;
 }
 
+header .nav-search-input .search_autocomplete .popover-container {
+  width: 100%;
+}
+
 @media (width >= 1024px) {
   header .nav-search-input {
     left: unset;
@@ -323,4 +329,4 @@ header .nav-search-input input {
   header .nav-search-input input {
     min-width: 400px;
   }
-}
+}

blocks/header/header.js

@@ -145,12 +145,18 @@ export default async function decorate(block) {
   });
 
   // Search
-  const searchInput = document.createRange().createContextualFragment('<div class="nav-search-input hidden"><form action="/search" method="GET"><input type="search" name="q" placeholder="Search" /></form></div>');
+  const searchInput = document.createRange().createContextualFragment(`<div class="nav-search-input hidden">
+      <form id="search_mini_form" action="/search" method="GET">
+        <input id="search" type="search" name="q" placeholder="Search" />
+        <div id="search_autocomplete" class="search-autocomplete"></div>
+      </form>
+    </div>`);
   document.body.querySelector('header').append(searchInput);
 
   const searchButton = document.createRange().createContextualFragment('<button type="button" class="nav-search-button">Search</button>');
   navTools.append(searchButton);
-  navTools.querySelector('.nav-search-button').addEventListener('click', () => {
+  navTools.querySelector('.nav-search-button').addEventListener('click', async () => {
+    await import('./searchbar.js');
     document.querySelector('header .nav-search-input').classList.toggle('hidden');
   });
 

blocks/header/searchbar.js

@@ -0,0 +1,48 @@
+import { loadScript } from '../../scripts/aem.js';
+import { getConfigValue } from '../../scripts/configs.js';
+
+(async () => {
+  const widgetProd = '/scripts/widgets/LiveSearchAutocomplete.js';
+  await loadScript(widgetProd);
+
+  const storeDetails = {
+    environmentId: await getConfigValue('commerce-environment-id'),
+    environmentType: (await getConfigValue('commerce-environment-id')).includes('sandbox') ? 'testing' : '',
+    apiKey: await getConfigValue('commerce-x-api-key'),
+    websiteCode: await getConfigValue('commerce-website-code'),
+    storeCode: await getConfigValue('commerce-store-code'),
+    storeViewCode: await getConfigValue('commerce-store-view-code'),
+    config: {
+      pageSize: 8,
+      perPageConfig: {
+        pageSizeOptions: '12,24,36',
+        defaultPageSizeOption: '24',
+      },
+      minQueryLength: '2',
+      currencySymbol: '$',
+      currencyRate: '1',
+      displayOutOfStock: true,
+      allowAllProducts: false,
+    },
+    context: {
+      customerGroup: await getConfigValue('commerce-customer-group'),
+    },
+    route: ({ sku }) => `/products/missing-url-key/${sku}`, // TODO: We need urlKey as parameter as well!
+    searchRoute: {
+      route: '/search',
+      query: 'q',
+    },
+  };
+
+  await new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (window.LiveSearchAutocomplete) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 200);
+  });
+
+  // eslint-disable-next-line no-new
+  new window.LiveSearchAutocomplete(storeDetails);
+})();