- ${components.Highlight({hit: item, attribute: 'name'})}
+ ${this.safeHighlight(components, item, "name")}
${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`
color: ${components.Highlight({ hit: item, attribute: "color" })}`;
+ getColorHtml: function(item, components, html) {
+ const highlight = this.safeHighlight(components, item, "color");
+
+ return highlight
+ ? html`
color: ${highlight}`
+ : "";
},
- 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`
in ${components.Highlight({ hit: item, attribute: "categories_without_path",})}`;
+ return highlight
+ ? html`
in ${highlight}`
+ : "";
},
getOriginalPriceHtml: (item, html, priceGroup) => {
@@ -98,6 +102,30 @@ define([], function () {
return html`${algoliaConfig.translations.seeIn}
${algoliaConfig.translations.allDepartments} (${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 '';
+ }
}
};