Smart Search & Filter + Flair

Smart Search & Filter

by Searchanise

Heads up! This guide is for Flair Gen 2. For assistance with Flair Gen 3 (now in early access), please contact support.

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.

Getting Started

Badges

Banners

Support