APEX-689: Migrated Algolia libraries to the cartridge

.circleci/config.yml

@@ -12,15 +12,15 @@ aliases:
     at: .
   - &node_executor
     name: node/default
-    tag: '14.21'
+    tag: '18.15'
 
 jobs:
   checkout:
     executor: *node_executor
     steps:
       - checkout
       - node/install-packages
-      - run: npm run lint
+      - run: npm run lint:js
       - persist_to_workspace: *persist_work_dir
 
   test:

.eslintignore

@@ -2,14 +2,7 @@ doc/
 ./*.js
 bin/
 workspace/
-cartridges/app_storefront_core/cartridge/static/
-cartridges/app_storefront_core/cartridge/js/
-cartridges/app_storefront_core/cartridge/scripts/
-cartridges/app_storefront_controllers/cartridge/scripts/
-cartridges/app_storefront_controllers/cartridge/controllers/
-cartridges/bm_app_storefront_base/cartridge/
-cartridges/app_storefront_base/cartridge/
 cartridges/modules
-cartridges/int_algolia_sfra/cartridge/static/
-cartridges/int_algolia_controllers/cartridge/static/
-cartridges/algolia_sg_changes/cartridge/
+cartridges/algolia_sg_changes
+cartridges/int_algolia_controllers/cartridge/static/default/js/algolia
+cartridges/int_algolia_sfra/cartridge/static/default/js/lib

.eslintrc.json

@@ -1,9 +1,9 @@
 {
     "root": true,
-    "extends": "airbnb-base/legacy",
     "parserOptions": {
         "ecmaVersion": 2015
     },
+    "plugins": ["jquery"],
     "rules": {
         "import/no-unresolved": "off",
         "indent": ["error", 4, { "SwitchCase": 1, "VariableDeclarator": 1 }],
@@ -19,6 +19,7 @@
         "empty": true,
         "request": true,
         "dw": true,
-        "XML": true
+        "XML": true,
+        "$": true
     }
 }

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"printWidth": 100,
+	"semi": true,
+	"singleQuote": true,
+	"tabWidth": 4,
+	"trailingComma": "es5"
+}

cartridges/int_algolia/cartridge/templates/default/algolia/headerScripts.isml

@@ -46,37 +46,37 @@
 
     <!-- Algolia Insights (Click Analytics & Personalization) -->
     <script>
-      var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.3.1";
+      var ALGOLIA_INSIGHTS_SRC = "${URLUtils.staticURL('js/lib/algolia/search-insights.min.js')}";
 
       !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e[s]=e[s]||function(){
       (e[s].queue=e[s].queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
       i.async=1,i.src=n,c.parentNode.insertBefore(i,c)
       }(window,document,"script",ALGOLIA_INSIGHTS_SRC,"aa");
     </script>
-    <script src="${URLUtils.staticURL('/js/algolia/insights-config.js')}"></script>
+    <script src="${URLUtils.staticURL('js/algolia/insights-config.js')}"></script>
 
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>
-    <script src="https://cdn.jsdelivr.net/npm/algoliasearch@3/dist/algoliasearchLite.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/hogan.js@1.0.2"></script>
+    <script src="${URLUtils.staticURL('js/lib/algolia/algoliasearchLite.min.js')}"></script>
+    <script src="${URLUtils.staticURL('js/lib/hogan.js')}"></script>
 
     <!-- Algolia Autocomplete.js -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1" />
+    <link rel="stylesheet" href="${URLUtils.staticURL('css/algolia/autocomplete-theme.min.css')}" />
+
     <script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js@1"></script>
     <script>
       const { autocomplete, getAlgoliaResults } = window['@algolia/autocomplete-js'];
     </script>
     <script type="module">
-        import { html } from 'https://unpkg.com/htm/preact/standalone.module.js'
+        import { html } from '${URLUtils.staticURL("js/lib/preact-standalone.module.js")}'
         window.html = html;
     </script>
-    <script src="${URLUtils.staticURL('/js/algolia/autocomplete-config.js')}"></script>
+    <script src="${URLUtils.staticURL('js/algolia/autocomplete-config.js')}"></script>
 
     <!-- Algolia InstantSearch.js -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/reset-min.css" />
-    <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script>
-    <script src="${URLUtils.staticURL('/js/algolia/instantsearch-config.js')}"></script>
+    <link rel="stylesheet" href="${URLUtils.staticURL('css/algolia/instantsearch-reset-min.css')}" />
+    <script src="${URLUtils.staticURL('js/lib/algolia/instantsearch.production.min.js')}"></script>
+    <script src="${URLUtils.staticURL('js/algolia/instantsearch-config.js')}"></script>
 
     <link rel="stylesheet" href="${URLUtils.staticURL('/css/algolia/index.css')}" />
-    <script src="${URLUtils.staticURL('/js/algolia/index.js')}"></script>
+    <script src="${URLUtils.staticURL('js/algolia/index.js')}"></script>
 </isif>
 <!-- End of Algolia dependencies -->

cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/autocomplete-config.js

@@ -1,5 +1,9 @@
 /* global autocomplete, getAlgoliaResults, html, algoliaData  */
 
+/**
+ * Enables autocomplete
+ * @param {Object} config configuration object
+ */
 function enableAutocomplete(config) {
     const inputElements = document.querySelectorAll('#aa-search-input');
 
@@ -15,7 +19,7 @@ function enableAutocomplete(config) {
                 return [
                     {
                         sourceId: 'products',
-                        getItems({ query }) {
+                        getItems({ query }) { // eslint-disable-line no-shadow
                             return getAlgoliaResults({
                                 searchClient: config.searchClient,
                                 queries: [
@@ -51,21 +55,16 @@ function enableAutocomplete(config) {
                                     item.firstImage = smallImageGroup.images[0];
                                 }
                                 return html`
-                                  <div class="text-truncate text-nowrap">
-                                    <img class="swatch-circle hidden-xs-down"
-                                         src=${item.firstImage.dis_base_link}></img>
-                                    <a href=${item.url}>${components.Highlight({
-                                      hit: item,
-                                      attribute: "name",
-                                      tagName: "em"
-                                    })}</a>
-                                  </div>`;
+                                    <div class="text-truncate text-nowrap">
+                                        <img class="swatch-circle hidden-xs-down" src=${item.firstImage.dis_base_link}></img>
+                                        <a href=${item.url}>${components.Highlight({ hit: item, attribute: "name", tagName: "em" })}</a>
+                                    </div>`;
                             },
                         },
                     },
                     {
                         sourceId: 'categories',
-                        getItems({ query }) {
+                        getItems({ query }) { // eslint-disable-line no-shadow
                             return getAlgoliaResults({
                                 searchClient: config.searchClient,
                                 queries: [
@@ -96,10 +95,10 @@ function enableAutocomplete(config) {
                                   <div class="text-truncate text-nowrap">
                                     <img class="swatch-circle hidden-xs-down" src=${item.image}></img>
                                     <a href=${item.url}>${components.Highlight({
-                                      hit: item,
-                                      attribute: "name",
-                                      tagName: "em"
-                                    })}</a>
+    hit: item,
+    attribute: "name",
+    tagName: "em"
+})}</a>
                                   </div>`;
                             },
                         },

cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/insights-config.js

@@ -1,5 +1,9 @@
 /* global aa */
-
+/**
+ * Configures Insights
+ * @param {string} appId Application ID
+ * @param {string} searchApiKey Search API Key
+ */
 function enableInsights(appId, searchApiKey) {
     window.aa('init', {
         appId: appId,
@@ -52,7 +56,12 @@ function enableInsights(appId, searchApiKey) {
         }
     });
 
-
+    /**
+     * Finds Insights target
+     * @param {Object} startElement Element to start from
+     * @param {Object} endElement Element to stop searching at
+     * @returns {Object} Element found or null if not found
+     */
     function findInsightsTarget(startElement, endElement) {
         var element = startElement;
         while (element && !element.hasAttribute('data-query-id')) {
@@ -64,6 +73,11 @@ function enableInsights(appId, searchApiKey) {
         return element;
     };
 
+    /**
+     * Returns the value of an URL parameter
+     * @param {string} parameterName The parameter name whose value should be returned
+     * @returns {string} The value of the parameter
+     */
     function getUrlParameter(parameterName) {
         var queryString = window.location.search.substring(1);
         var sURLVariables = queryString.split('&');

cartridges/int_algolia_sfra/cartridge/static/default/js/algolia/instantsearch-config.js

@@ -1,5 +1,8 @@
 /* global instantsearch */
-
+/**
+ * Initializes InstantSearch
+ * @param {Object} config Configuration object
+ */
 function enableInstantSearch(config) {
     var initialUiState = {};
     var hierarchicalMenuValue = {};
@@ -123,7 +126,7 @@ function enableInstantSearch(config) {
                 },
                 panelTitle: algoliaData.strings.brandPanelTitle
             }),
-    
+
             rangeInputWithPanel({
                 container: '#algolia-price-filter-placeholder',
                 attribute: 'price.' + config.userCurrency,
@@ -156,7 +159,7 @@ function enableInstantSearch(config) {
                         + '</a>',
                 },
                 panelTitle: algoliaData.strings.sizePanelTitle
-            }),        
+            }),
 
             refinementListWithPanel({
                 container: '#algolia-color-list-placeholder',
@@ -174,7 +177,7 @@ function enableInstantSearch(config) {
                         + '</a>',
                 },
                 panelTitle: algoliaData.strings.colorPanelTitle
-            }),    
+            }),
 
             instantsearch.widgets.infiniteHits({
                 container: '#algolia-hits-placeholder',
@@ -250,33 +253,33 @@ function enableInstantSearch(config) {
                                 item.image = firstImageInGroup
                             }
                         }
-    
+
                         // adjusted price in user currency
                         if (item.promotionalPrice && item.promotionalPrice[config.userCurrency] !== null) {
                             item.promotionalPrice = item.promotionalPrice[config.userCurrency]
                         }
-    
+
                         // price in user currency
                         if (item.price && item.price[config.userCurrency] !== null) {
                             item.price = item.price[config.userCurrency]
                         }
-    
+
                         // currency symbol
                         item.currencySymbol = config.userCurrencySymbol;
-    
-    
+
+
                         item.quickShowUrl = algoliaData.quickViewUrlBase + '?pid=' + item.id;
-    
+
                         // originating index
                         item.__indexName = config.productsIndex;
-    
+
                         // url with queryID (used for analytics)
                         var url = new URL(item.url);
                         url.searchParams.append('queryID', item.__queryID);
                         url.searchParams.append('objectID', item.objectID);
                         url.searchParams.append('indexName', item.__indexName);
                         item.url = url.href;
-    
+
                         return item;
                     });
                 }
@@ -306,18 +309,39 @@ function enableInstantSearch(config) {
 
     search.start();
 
+    /**
+     * Generates a menu with the Panel widget
+     * @param {Object} options Options object
+     * @returns {Object} The Panel widget
+     */
     function hierarchicalMenuWithPanel(options) {
         return withPanel(options.attributes[0], options.panelTitle)(instantsearch.widgets.hierarchicalMenu)(options)
     }
 
+    /**
+     * Builds a refinement list with the Panel widget
+     * @param {Object} options Options object
+     * @returns {Object} The Panel widget
+     */
     function refinementListWithPanel(options) {
         return withPanel(options.attribute, options.panelTitle)(instantsearch.widgets.refinementList)(options)
     }
 
+    /**
+     * Builds a range input with the Panel widget
+     * @param {Object} options Options object
+     * @returns {Object} The Panel widget
+     */
     function rangeInputWithPanel(options) {
         return withPanel(options.attribute, options.panelTitle)(instantsearch.widgets.rangeInput)(options)
     }
 
+    /**
+     * Builds an InstantSearch Panel widget with the supplied parameters
+     * @param {string} attribute Attribute
+     * @param {string} panelTitle Title of the Panel
+     * @returns {Object} A new InstantSearh Panel
+     */
     function withPanel(attribute, panelTitle) {
         var headerTemplate = Hogan.compile(''
             + '<button class="title btn text-left btn-block d-md-none" aria-controls="refinement-{{attribute}}" aria-expanded="false">'
@@ -328,10 +352,10 @@ function enableInstantSearch(config) {
         return instantsearch.widgets.panel({
             hidden: function(options) {
                 var facets = [].concat(options.results.disjunctiveFacets, options.results.hierarchicalFacets)
-                var facet = facets.find(function(facet) { return facet.name === attribute });
+                var facet = facets.find(function(facet) { return facet.name === attribute }); // eslint-disable-line no-shadow
                 var facetExists = !!facet;
                 return !facetExists; // hides panel if not facets selectable
-              },
+            },
             templates: {
                 header: headerTemplate.render({ panelTitle: panelTitle, attribute: attribute })
             },
@@ -340,7 +364,7 @@ function enableInstantSearch(config) {
                 header: 'card-header col-sm-12',
                 body: 'card-body content value',
                 footer: 'card-footer',
-              }
+            }
 
         })
     }