Smart Search & Filter + Flair

2 min read
updated Jan 27 2022
Smart Search & Filter logo
Smart Search & Filter
by Searchanise

Create a Flair custom snippet

Add a snippets/flair-custom.liquid snippet to your theme with the following content:

<script>
document.addEventListener('Searchanise.Loaded', function() {
(function($) {
function addFlairBadges() {
try {
var targetSelector = ".snize-title";
var els = document.querySelectorAll('#snize_results .snize-product');
for (var i=0; i<els.length; i++) {
var el = els[i];
if (/\d+$/.test(el.id)) {
var pid = RegExp.lastMatch;
var badgeEl = document.createElement('div');
badgeEl.innerHTML = '<div data-flair-product-badge data-product-id="' + pid.toString() + '"></div>';
var flairEl = el.querySelector("[data-flair-product-badge]");
if (flairEl) {
flairEl.parentNode.replaceChild(badgeEl.firstChild, flairEl);
} else {
var targetEl = el.querySelector(targetSelector);
if (targetEl) {
targetEl.after(badgeEl.firstChild);
}
}
}
}
FlairApp.refreshProductBadges();
} catch(e) { console.log("[Flair] Error adding Flair badges", e); }
}

$(document).on('Searchanise.ResultsUpdated', function(event, container) {
if (window.FlairApp) {
addFlairBadges();
}
});
})(window.Searchanise.$);
});
</script>

Modify theme.liquid

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

{% render 'flair-custom' %}

Customizations

On top of the product image

To place the Flair badges on top of the product images:

  • Replace line 6 above with the following:
var targetSelector = ".snize-thumbnail";
  • Then configure a Flair badge layout with position set to absolute.

Spacing, alignment, number of badges

You can customize the spacing, alignment and number of badges by creating a Flair badge layout. The layout should be set to show on Search pages or Use as default.