AI Search, Filter & Recommend + Flair

1 min read
updated Apr 25 2023
AI Search, Filter & Recommend logo
AI Search, Filter & Recommend
by Boost Commerce

Setup Instructions

Before you continue...

Verify you are using the Boost App Lib V2

Edit assets/boost-pfs-filter.js:

ProductGridItem.prototype.compileTemplate = function (data) {
// The beginning of this function was removed for brevity
// You should only add the next line
itemHtml = itemHtml.replace(/{{itemFlairHtml}}/g, '<div data-flair-product-badge data-product-id="' + data.id.toString() + '"></div>');
return itemHtml;
};

And add line 4.

Edit assets/boost-pfs-filter.js:

ProductList.prototype.afterRender = function(data) {
if (!data) data = this.data;
if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
};

And add line 3.

Adding Flair badges under the product title

Edit snippets/boost-pfs-filter-html.liquid:

<h3 class="card__heading {{cardIsHeadingFive}}">
<a href="{{itemUrl}}" class="full-unstyled-link">
{{itemTitle}}
</a>
</h3>
{{itemFlairHtml}}

And add line 6.

Adding Flair badges on top of the product image

Edit snippets/boost-pfs-filter-html.liquid:

<div class="card__inner {{cardInnerProductClass}}" style="--ratio-percent: {{imageAspectRatio}}%">
{{itemImages}}
<div class="card__content">
{{itemFlairHtml}}

And add line 4.