Flair JavaScript API

You can use the Flair JavaScript API for custom integrations. The JavaScript API allows you to fetch Flair badges dynamically using JavaScript for one or more products.

Prerequisites

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

Getting badges for one product

The FlairApp.getProductBadges function can be used to fetch badges for one product.

Options

This function supports the following options:

• url - the Shopify product url
• variant - (optional) the selected variant ID; defaults to showing badges for the entire product
• section - (optional) the section name to use to render the Flair product badges; defaults to flair-product-badges

Example request

1
2
3
4
5

  FlairApp.getProductBadges(
    { "url" : "https://example.myshopify.com/products/example-product" }
  ).then(function(badges) {
    console.log(badges);
  })

Example response

1
2
3
4
5

<div id="shopify-section-flair-product-badges" class="shopify-section">
  <div class="flair-badge-layout flair-badge-layout-product-123" data-product-id="123">
    BADGE HTML
  </div>
</div>

The response is returned as an HTML String.

The HTML element with CSS class flair-badge-layout will contain the Flair product badges for the specified product.

You must include the entire flair-badge-layout element when adding the Flair badges into your theme page.

Example implementation

Add the following DIV to your theme where you’d like the Flair badges to be inserted:

1

  <div data-flair-product-id="{{ product.id }}"></div>

Then you can fetch the badges for one product at a time by using this JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script>
  FlairApp.getProductBadges(
    { "url" : "https://example.myshopify.com/products/example-product" }
  ).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;
      });
    });
  });
</script>

Here are some highlights of the code above:

• Change the url on line 3 to specify your product url.
• Line 5 parses the response into a HTMLDocument.
• Line 6 gets any matching flair-badge-layout elements from the response. There will be only one of these for the specified product.
• Then we grab the corresponding Shopify product ID on line 8 from the response HTML data-product-id attribute.
• Starting on line 9, we use the product ID to look for the placeholder DIV element that we added above and then insert the response badge HTML within.

Getting badges for multiple products

The FlairApp.getProductBadgesMulti function can be used to fetch badges for multiple products at the same time.

Options

This function supports the following options:

• ids - an Array of Shopify product IDs
• section - (optional) the section name to use to render the Flair product badges; defaults to flair-product-badges

Example request

1
2
3
4
5

  FlairApp.getProductBadgesMulti(
    { "ids" : [123, 456] }
  ).then(function(badges) {
    console.log(badges);
  })

Example response

1
2
3
4
5
6
7
8

<div id="shopify-section-flair-product-badges" class="shopify-section">
  <div class="flair-badge-layout flair-badge-layout-product-123" data-product-id="123">
    BADGE HTML
  </div>
  <div class="flair-badge-layout flair-badge-layout-product-456" data-product-id="456">
    BADGE HTML
  </div>
</div>

The response is returned as an HTML String.

The HTML elements with the CSS class flair-badge-layout will contain the Flair product badges for the specified products.

Each flair-badge-layout element will also contain a data-product-id attribute which specifies the corresponding Shopify product ID.

You must include the entire flair-badge-layout element when adding the Flair badges into your theme page.

Example implementation

Add the following DIV to your theme where you’d like the Flair badges to be inserted:

1

  <div data-flair-product-id="{{ product.id }}"></div>

Then you can fetch the badges for multiple products at the same time by using this JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script>
  FlairApp.getProductBadgesMulti(
    { "ids" : [123, 456] }
  ).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;
      });
    });
  });
</script>

Here are some highlights of the code above:

• Change the ids on line 3 to specify your product IDs.
• Line 5 parses the response into a HTMLDocument.
• Line 6 gets any matching flair-badge-layout elements from the response. There shouild be one of these for each specified product.
• Then we grab the corresponding Shopify product ID on line 8 from the response HTML data-product-id attribute.
• Starting on line 9, we use the product ID to look for the placeholder DIV element that we added above and then insert the response badge HTML within.

Need any help?

If you have any questions about using the Flair JavaScript API, feel free to contact us.