Automated Integration
We are pleased to announce that the Klevu Smart Recommendations can be enabled directly from within the BigCommerce App. Simply navigate to the “Integrate Klevu” area of your Klevu App, where you would normally find the options to integrate search into your theme, and you will find two options:
- Automated Template Integration
- Manual Template Integration
For Automated Integration, clicking on Integrate will present you with some more options:
Check the “Smart Recommendations” checkbox and click on Start Integration to begin the process. Klevu will then download your theme and create a copy, and apply the prerequisite scripts to your theme. After which point, you only need to add the Klevu DIV wherever you would like a Recommendation banner to appear. If you prefer to perform these steps manually, you can refer to the guide below.
Manual Integration
This document will guide you through the platform-specific aspects of integrating Klevu Recommendations with your BigCommerce store. Once you are finished with this guide, please refer to the generic instructions for other aspects like creating a banner and adding it to your store, editing a banner, etc.
In order to follow these instructions, you will need to modify a few BigCommerce files based on the different sections as described below:
Step 1: Adding page meta snippet
Open theme -> templates -> layout -> base.html or templates/components/klevu/klevu-metadata.html depending on the integration guide you have followed.
Add the following javascript code to the end of the template's <head/> section.
<script type="text/javascript">
{{#if page_type '===' 'category'}}
var klevu_page_meta = {
'pageType': "category",
'categoryName':'{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}',
'categoryUrl': '{{category.url}}',
};
{{/if}}
{{#if page_type '===' 'product'}}
var klevu_page_meta = {
"pageType": "pdp",
"itemName": "{{product.title}}",
"itemUrl": "{{product.url}}",
"itemId": "",
"itemGroupId": "{{product.id}}",
"itemSalePrice": "{{#if product.price.with_tax}}{{product.price.with_tax.value}}{{else}}{{product.price.without_tax.value}}{{/if}}",
"itemCurrency": "{{currency_selector.active_currency_code}}"
};
{{#if gql.data.site.product}}
{{#if gql.data.site.product.variants.edges.length '>' 0}}
klevu_page_meta.itemId = "{{gql.data.site.product.entityId}}";
{{/if}}
{{#if gql.data.site.product.productOptions.edges}}
{{#each gql.data.site.product.variants.edges}}
{{#if @index '==' 0}}
{{#if node.entityId}}
{{#if node.isPurchasable}}
klevu_page_meta.itemId += "-variantid_{{node.entityId}}";
{{/if}}
{{/if}}
{{/if}}
{{/each}}
{{/if}}
{{/if}}
{{/if}}
{{#if page_type '===' 'cart'}}
let klbCartRecords = [];
fetch('/api/storefront/carts/{{cart_id}}?include=lineItems.physicalItems.options,lineItems.digitalItems.options',
{credentials: 'include'}
).then(function (response) {
return response.json();
})
.then(function (cartData) {
if (!cartData || !cartData.lineItems) {
return;
}
let klbCartLineItems = cartData.lineItems;
for (let klbIndex in klbCartLineItems) {
let klbItemTypeRows = klbCartLineItems[klbIndex];
if (!klbItemTypeRows.length) {
return;
}
for (let klbItemRow in klbItemTypeRows) {
klbCartRecords.push({
'itemId': klbItemTypeRows[klbItemRow]['options'].length
? klbItemTypeRows[klbItemRow]['productId'] + '-variantid_' + klbItemTypeRows[klbItemRow]['variantId']
: klbItemTypeRows[klbItemRow]['productId'],
'itemGroupId': klbItemTypeRows[klbItemRow]['productId'],
});
}
}
});
var klevu_page_meta = {
'pageType': "cart",
'cartRecords': klbCartRecords
};
{{/if}}
</script>Note: According to the code added above,
"itemSalePrice": "{{#if product.price.with_tax}}
{{product.price.with_tax.value}}
{{else}}
{{product.price.without_tax.value}}
{{/if}}"it will render price.with_tax.value if present else will render price.without_tax.value.
Step 2: Adding product-page-specific changes
Open templates/pages/product.html
Find the below statement
---
product:
videos:
limit: {{theme_settings.productpage_videos_count}}
reviews:
limit: {{theme_settings.productpage_reviews_count}}
related_products:
limit: {{theme_settings.productpage_related_products_count}}
similar_by_views:
limit: {{theme_settings.productpage_similar_by_views_count}}Inject the following code just after the last line of the above statement. But before the closing “---” line.
gql: "query GenerateProductQuery($productId: Int!) {
site {
product(entityId: $productId) {
entityId
variants(first:2) {
edges {
node {
sku
entityId
isPurchasable
}
}
}
productOptions(first: 1) {
edges {
node {
entityId
}
}
}
}
}
}"so it would show after changes as below:
---
product:
videos:
limit: {{theme_settings.productpage_videos_count}}
reviews:
limit: {{theme_settings.productpage_reviews_count}}
related_products:
limit: {{theme_settings.productpage_related_products_count}}
similar_by_views:
limit: {{theme_settings.productpage_similar_by_views_count}}
gql: "query GenerateProductQuery($productId: Int!) {
site {
product(entityId: $productId) {
entityId
variants(first:2) {
edges {
node {
sku
entityId
isPurchasable
}
}
}
productOptions(first: 1) {
edges {
node {
entityId
}
}
}
}
}
}"
---Step 3: Adding core Klevu JS Libraries
Once all the above changes are made, You need to add the below code to include Klevu JS library files. To perform this action, edit your theme -> templates -> layout -> base.html and add the following to the end of your template's <head/> section. This should be placed after all the code described in all the above sections.
<script src="https://js.klevu.com/core/v2/klevu.js"></script>
<script src="https://js.klevu.com/recs/v2/klevu-recs.js"></script>
<script type="text/javascript">
klevu.interactive(function () {
var options = {
powerUp: {
recsModule: true
},
recs: {
apiKey: 'klevu-12345'
},
analytics: {
apiKey: 'klevu-12345'
}
};
klevu(options);
});
</script>Please replace klevu-12345 with your own Klevu JS API Key.
The minimum version of Klevu JS Library for Klevu Recommendations to work correctly is 2.3.5+. The template JS version information can be found here.