AI Search, Filter & Recommend + Flair
1 min read
updated Apr 25 2023

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.