Flair JavaScript API
You can use the Flair JavaScript API for custom integrations. The JavaScript API allows you to fetch Flair product badges and banners dynamically using JavaScript.
FlairApp.getProductBadges
The FlairApp.getProductBadges
function can be used to fetch badges for one or more products.
Options
This function supports the following options:
ids
- (optional) An array of Shopify product ids; defaults to the current product IDlayout
- (optional) The Flair badge layout name
Example request
FlairApp.getProductBadges({
"ids" : [ 123, 456 ],
"layout" : "my layout"
}).then(function(result) {
console.log(result);
})
Example response
<div id="shopify-section-flair-product-badges" class="shopify-section">
<div data-flair-product-badge data-product-id="123" data-layout="my layout">
*** PRODUCT 123 BADGE HTML ***
</div>
<div data-flair-product-badge data-product-id="456" data-layout="my layout">
*** PRODUCT 456 BADGE HTML ***
</div>
</div>
The response is returned as an HTML String, and each set of Flair product badges will be wrapped in a DIV with the following attributes:
data-flair-product-badge
- indicates the DIV contains Flair product badgesdata-product-id
- the Shopify product IDdata-layout
- (optional) The Flair badge layout name, if specified
FlairApp.getBanners
The FlairApp.getBanners
function can be used to fetch a Flair banner.
Options
This function supports the following option:
layout
- (optional) The Flair banner layout name
Example request
FlairApp.getBanners({
"layout" : "my layout"
}).then(function(result) {
console.log(result);
})
Example response
<div id="shopify-section-flair-banners" class="shopify-section">
<div data-flair-banner data-layout="my layout">
*** BANNER HTML ***
</div>
</div>
The response is returned as an HTML String, and the the Flair banner will be wrapped in a DIV with the following attributes:
data-flair-banner
- indicates the DIV contains a Flair bannerdata-layout
- (optional) The Flair banner layout name, if specified
FlairApp.refreshProductBadges
The FlairApp.refreshProductBadges
function can be used to load Flair product badges on the page.
You can use this to load Flair badges within dynamic content such as:
- product recommendations
- quick shop views
- custom integrations
Flair badge HTML
You can add Flair product badges anywhere on the page by adding the following HTML:
<div data-flair-product-badge data-product-id="12345"
data-layout="my layout"></div>
Here's a breakdown of the data attributes:
data-flair-product-badge
- indicates the DIV contains Flair product badgesdata-product-id
- the Shopify product IDdata-layout
- (optional) The Flair badge layout name, if specified
Example
To refresh all Flair badges:
FlairApp.refreshProductBadges()
FlairApp.refreshBanners
The FlairApp.refreshBanners
function can be used to load all Flair banners on the page.
You can use this to load Flair banners for:
- dynamic content sections
- custom integrations
Flair banner HTML
You can add Flair banners anywhere on the page by adding the following HTML:
<div data-flair-banner data-layout="my layout"></div>
Here's a breakdown of the data attributes:
data-flair-banner
- indicates the DIV contains a Flair bannerdata-layout
- (optional) The Flair banner layout name, if specified
Example
To refresh all Flair banners:
FlairApp.refreshBanners()
Need any help?
If you have any questions about using the Flair JavaScript API, feel free to contact us.