Merge pull request #1505 from algolia/bugfix/MAGE-889

Bugfix/mage 889 - Autocomplete highlight robustness

Author: cammonro

view/frontend/web/internals/template/autocomplete/categories.js

@@ -15,12 +15,24 @@ define([], function () {
                             data-position="${item.position}"
                             data-index="${item.__autocomplete_indexName}"
                             data-queryId="${item.__autocomplete_queryID}">
-                ${components.Highlight({ hit: item, attribute: 'path' })} (${item.product_count})
+                ${this.safeHighlight(components, item, "path")} (${item.product_count})
             </a>`;
         },
 
         getFooterHtml: function () {
             return "";
         },
+
+        safeHighlight: function(components, hit, attribute) {
+            const highlightResult = hit._highlightResult[attribute];
+
+            if (!highlightResult) return '';
+
+            try {
+                return components.Highlight({ hit, attribute });
+            } catch (e) {
+                return '';
+            }
+        }
     };
 });

view/frontend/web/internals/template/autocomplete/pages.js

@@ -16,9 +16,9 @@ define([], function () {
                            data-index="${item.__autocomplete_indexName}"
                            data-queryId="${item.__autocomplete_queryID}">
                 <div class="info-without-thumb">
-                    ${components.Highlight({hit: item, attribute: 'name'})}
+                    ${this.safeHighlight(components, item, "name")}
                     <div class="details">
-                        ${components.Highlight({hit: item, attribute: 'content'})}
+                        ${this.safeHighlight(components, item, "content")}
                     </div>
                 </div>
                 <div class="algolia-clearfix"></div>
@@ -27,6 +27,19 @@ define([], function () {
 
         getFooterHtml: function () {
             return "";
+        },
+
+        safeHighlight: function(components, hit, attribute) {
+            const highlightResult = hit._highlightResult[attribute];
+
+            if (!highlightResult) return '';
+
+            try {
+                return components.Highlight({ hit, attribute });
+            } catch (e) {
+                return '';
+            }
         }
+
     };
 });

view/frontend/web/internals/template/autocomplete/products.js

@@ -22,7 +22,7 @@ define([], function () {
                            data-queryId="${item.__autocomplete_queryID}">
                 <div class="thumb"><img src="${item.thumbnail_url || ''}" alt="${item.name || ''}"/></div>
                 <div class="info">
-                    ${components.Highlight({hit: item, attribute: 'name'})}
+                    ${this.safeHighlight(components, item, "name")}
                     <div class="algoliasearch-autocomplete-category">
                         ${this.getColorHtml(item, components, html)}
                         ${this.getCategoriesHtml(item, components, html)}
@@ -43,16 +43,20 @@ define([], function () {
         // Helper methods //
         ////////////////////
 
-        getColorHtml: (item, components, html) => {
-            if (item._highlightResult.color == undefined || item._highlightResult.color.value == "") return "";
-
-            return html`<span class="color">color: ${components.Highlight({ hit: item, attribute: "color" })}</span>`;
+        getColorHtml: function(item, components, html) {
+            const highlight = this.safeHighlight(components, item, "color");
+            
+            return highlight 
+                ? html`<span class="color">color: ${highlight}</span>`
+                : "";
         },
 
-        getCategoriesHtml: (item, components, html) => {
-            if (item.categories_without_path == undefined || item.categories_without_path.length == 0) return "";
+        getCategoriesHtml: function(item, components, html) {
+            const highlight = this.safeHighlight(components, item, "categories_without_path", false);
 
-            return html`<span>in ${components.Highlight({ hit: item, attribute: "categories_without_path",})}</span>`;
+            return highlight 
+                ? html`<span>in ${highlight}</span>`
+                : "";
         },
 
         getOriginalPriceHtml: (item, html, priceGroup) => {
@@ -98,6 +102,30 @@ define([], function () {
             return html`${algoliaConfig.translations.seeIn} <span><a href="${resultDetails.allDepartmentsUrl}">${algoliaConfig.translations.allDepartments}</a></span> (${resultDetails.nbHits})
                 ${this.getFooterSearchCategoryLinks(html, resultDetails)}
             `;
+        },
+
+        // TODO: Refactor to external lib
+        safeHighlight: function(components, hit, attribute, strict = true) {
+            const highlightResult = hit._highlightResult[attribute];
+
+            if (!highlightResult) return '';
+
+            if (strict
+                &&
+                (
+                    (Array.isArray(highlightResult)) && !highlightResult.find(hit => hit.matchLevel !== 'none')
+                    ||
+                    highlightResult.value === ''
+                )
+            ) {
+                return '';
+            }
+
+            try {
+                return components.Highlight({ hit, attribute });
+            } catch (e) {
+                return '';
+            }
         }
 
     };