Boost Product Filter & Search + Flair

Boost Product Filter & Search

by Boost Commerce

Shopify app store page

Setup Instructions

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.