Boost AI Search, Filter & Recommend + Flair

Boost AI Search, Filter & Recommend

by Boost Commerce

Shopify app store page

Setup Instructions

Determine your Boost app version

Open the layouts/theme.liquid file in the Shopify theme editor.

• If you see the following:

  {% include 'boost-sd' %}

  Then follow the Boost v3 setup.

• If you see the following:

  {% include 'boost-pfs' %} or {% render 'boost-pfs' %}

  Then follow the Boost v2 setup.

• If you see the following:

  {% include 'bc-sf-filter' %}

  Then follow the Boost v1 setup.

Boost v3 setup

Edit assets/boost-sd-custom.js:

if (window.boostSDAppConfig) {  window.boostSDAppConfig.integration =  Object.assign({ labels: 'flair' }, window.boostSDAppConfig.integration || {});}

And add line 1.

Customizing the location

Boost v3 provides a customization API to modify the rendered items.

Display Option: Under the product title

Edit assets/boost-sd-custom.js and add the following code:

const customize = {
  updateProductItem: (componentRegistry) => {
    componentRegistry.useComponentPlugin('ProductItem', {
      name: 'Add Flair under the title',
      enabled: true,
      apply: () => ({
        afterRender(element){
          let productData = element.getParams().props.product;
          let productItem = document.querySelector('.boost-sd__product-item[data-product-id="'+ productData.id +'"]');
          let flairEl = productItem.querySelector('[data-flair-product-badge]');
          if (flairEl) {
            productItem.querySelector('.boost-sd__product-title').after(flairEl);
          }
        }
      }),
    });
  }
}
window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat([customize.updateProductItem]);

Display Option: On top of the product image

Edit assets/boost-sd-custom.js and add the following code:

const customize = {
  updateProductItem: (componentRegistry) => {
    componentRegistry.useComponentPlugin('ProductItem', {
      name: 'Add Flair on top of the product image',
      enabled: true,
      apply: () => ({
        afterRender(element){
          let productData = element.getParams().props.product;
          let productItem = document.querySelector('.boost-sd__product-item[data-product-id="'+ productData.id +'"]');
          let flairEl = productItem.querySelector('[data-flair-product-badge]');
          if (flairEl) {
            productItem.querySelector('.boost-sd__product-image').append(flairEl);
          }
        }
      }),
    });
  }
}
window.__BoostCustomization__ = (window.__BoostCustomization__ ?? []).concat([customize.updateProductItem]);

Boost v2 setup

Edit assets/boost-pfs-filter.js as follows:

Find the ProductGridItem.prototype.compileTemplate function

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.

Find the ProductList.prototype.afterRender function

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

And add line 3.

Display Option: Under the product title

To add 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.

Display Option: On top of the product image

To add 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.

Boost v1 setup

Open the assets/bc-sf-filter.js file in the Shopify theme editor.

Find the bcSfFilterTemplate variable.

var bcSfFilterTemplate = {
  'productGridItemHtml': // ... shortened for brevity
    '<h2 class="productitem--title">' +
    '<a href="{{itemUrl}}" tabindex="1">' + '{{itemTitle}}' + '</a>' +
    '</h2>' +
    '<div data-flair-product-badge data-product-id="{{itemId}}"></div>' +

And add the Flair badge DIV to the product grid item template as shown on line 6.

Find the BCSfFilter.prototype.buildExtrasProductList function.

BCSfFilter.prototype.buildExtrasProductList = function(data, eventType) {
if (typeof FlairApp !== 'undefined' && FlairApp) { FlairApp.refreshProductBadges(); }
};

And add line 2.