DIRECTORY
Smart Product Filter & Search + Flair
Updated: January 8, 2021
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>