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.
You must enable the Flair JavaScript API by visiting the Flair Settings > JavaScript API and clicking the Enable API button.
The FlairApp.getProductBadges
function can be used to fetch badges for one product.
This function supports the following options:
url
- the Shopify product urlvariant
- (optional) the selected variant ID; defaults to showing badges for the entire productsection
- (optional) the section name to use to render the Flair product badges; defaults to flair-product-badges
1
2
3
4
5
FlairApp.getProductBadges(
{ "url" : "https://example.myshopify.com/products/example-product" }
).then(function(badges) {
console.log(badges);
})
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.
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:
url
on line 3 to specify your product url.flair-badge-layout
elements from the response. There will be only one of these for the specified product.data-product-id
attribute.The FlairApp.getProductBadgesMulti
function can be used to fetch badges for multiple products at the same time.
This function supports the following options:
ids
- an Array of Shopify product IDssection
- (optional) the section name to use to render the Flair product badges; defaults to flair-product-badges
1
2
3
4
5
FlairApp.getProductBadgesMulti(
{ "ids" : [123, 456] }
).then(function(badges) {
console.log(badges);
})
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.
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:
ids
on line 3 to specify your product IDs.flair-badge-layout
elements from the response. There shouild be one of these for each specified product.data-product-id
attribute.If you have any questions about using the Flair JavaScript API, feel free to contact us.