MAGE-889: Add highlight safeguards to category / pages template

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

@@ -104,6 +104,7 @@ define([], function () {
             `;
         },
 
+        // TODO: Refactor to external lib
         safeHighlight: function(components, hit, attribute, strict = true) {
             const highlightResult = hit._highlightResult[attribute];