Burst Commerce Logo

Smart Product Filter & Search + Flair

Updated: January 8, 2021

Smart Product Filter & Search

by Globo

Shopify app store page

Prerequisites

You must enable the Flair JavaScript API by visiting the Flair Settings > JavaScript API and clicking the Enable API button.

Customize your product filter template

Edit snippets/globo.filter.product.liquid:

1
2
{% comment %}Do not edit this file{% endcomment %}
{% raw %}

Add line 1 as the first line in this file. This will prevent the Smart Product Filter & Search app from overridding our changes.

Next we need to add a placeholder element where Flair badges should be inserted:

1
2
3
  <div class="spf-product__info">
    <div class="h4 spf-product-card__title"><a translatable href="{{root_url}}{{product.url}}">{{product.title}}</a></div>
    <div data-flair-product-id="{{ product.id }}"></div>

Add line 3. You can move this line as needed to move the Flair badges.

Modify your theme.liquid to refresh your Flair badges

Edit layout/theme.liquid and add the following just before the closing </body> tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
  function refreshFlairBadges() {
    var els = document.querySelectorAll('[data-flair-product-id]');
    var productIds = Array.from(els).map(function(el) {
      return el.dataset.flairProductId;
    });
    FlairApp.getProductBadgesMulti({"ids" : productIds}).then(function(badges) {
      var doc = new DOMParser().parseFromString(badges, 'text/html');
      var items = doc.querySelectorAll('.flair-badge-layout');
      items.forEach(function(item) {
        var pid = item.dataset.productId;
        var matches = document.querySelectorAll('[data-flair-product-id="' + pid.toString() + '"]');
        matches.forEach(function(el) {
          el.innerHTML = item.outerHTML;
        });
      });
    });
  }
  window.addEventListener('globoFilterRenderCompleted', function (e) {
    refreshFlairBadges();
  });
</script>