BigCommerce

11min
﻿
There are two options for implementing the Klevu Template JS on BigCommerce:
Automated via the Klevu BigCommerce App (available from the BigCommerce Marketplace)
Manual implementation of the files into the BigCommerce Theme
Manual install may be required for the following conditions:
Your BigCommerce Theme has been modified or is otherwise preventing the Klevu App automation
You are installing Klevu on a preview theme
Marketplace App
If you are using a version of Klevu app installed before December 2021, please contact support for information about migrating to Klevu TemplateJS.
You can find detailed installation steps on the Klevu Knowledge base article for BigCommerce Integration﻿
Once installed, the template JS resources will be available as placed automatically by the ﻿Klevu  BigCommerce App available in the BigCommerce Marketplace.
The following is a summary of automated steps as part of the Big Commerce App installation: 
Places code reference files into templates/components/klevu
head-scripts.html (main reference)
klevu-js-init.html (config/options)
klevu-add-to-cart.html (button functionality)
klevu-search-theme.html (search results)
klevu-catnav-theme.html (category results - if applicable)
klevu-recommendations.html (recommendations core - if applicable)
klevu-metadata.html (recommendations support - if applicable)
Adds core include to layout/base.html
Adds display target <div> in pages/search.html
Adds display target <div> in pages/category.html (if applicable)
Authorizes BC API for hourly Catalog Synchronization
﻿
Manual Installation
If your BigCommerce Theme has been modified or is otherwise preventing the above automation, you can manually install Klevu Template JS using the steps below, or any variation of it that fits your architecture
We recommend implementing these steps on an unpublished theme to avoid any unforeseen conflicts with the live site.
﻿
Core and Configuration
Please see Quickstart : Smart Search﻿ for detailed instructions on incorporating core JavaScript and klevu.interactive
﻿
Include the core files according to page_type
JS
<!-- Include Klevu JavaScript Library -->
<script src="https://js.klevu.com/core/v2/klevu.js"></script>

<!-- Include Quick Search Theme -->
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

{{#if page_type '===' 'search'}}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
{{/if}}

{{#if page_type '===' 'category'}}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<script type="text/javascript">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{{/if}}
<!-- Include Klevu JavaScript Library -->
<script src="https://js.klevu.com/core/v2/klevu.js"></script>

<!-- Include Quick Search Theme -->
<script src="https://js.klevu.com/theme/default/v2/quick-search.js"></script>

{{#if page_type '===' 'search'}}
<!-- Include Search Results Landing Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/search-results-page.js"></script>
{{/if}}

{{#if page_type '===' 'category'}}
<!-- Include Category Page Theme -->
<script src="https://js.klevu.com/theme/default/v2/category-page.js"></script>
<script type="text/javascript">
    var klevu_pageCategory = "{{#each breadcrumbs}}{{#unless @first}}{{name}}{{#unless @last}};{{/unless}}{{/unless}}{{/each}}";
    sessionStorage.setItem("klevu_pageCategory", klevu_pageCategory);
</script>
{{/if}}
﻿
﻿
Configure Klevu Options to fit your theme
JS
<!-- Initialise Klevu for your store -->
<script type="text/javascript">
    klevu.interactive(function () {
        var options = {
            url : {
                protocol: 'https:',
                queryParam: 'search_query',
                landing: '/search.php', // your BigCommerce Search Results Page
                search: 'https://eucsXXXv2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
            },
            search: {
                minChars: 0,
                searchBoxSelector: "#search_query", // your BigCommerce Search Input
                apiKey: "klevu-XXX" // your Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-XXX' // your Klevu JS API Key
            }
        };
        klevu(options);
    });
</script>
<!-- Initialise Klevu for your store -->
<script type="text/javascript">
    klevu.interactive(function () {
        var options = {
            url : {
                protocol: 'https:',
                queryParam: 'search_query',
                landing: '/search.php', // your BigCommerce Search Results Page
                search: 'https://eucsXXXv2.ksearchnet.com/cs/v2/search' // your Klevu APIv2 Search URL + endpoint path
            },
            search: {
                minChars: 0,
                searchBoxSelector: "#search_query", // your BigCommerce Search Input
                apiKey: "klevu-XXX" // your Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-XXX' // your Klevu JS API Key
            }
        };
        klevu(options);
    });
</script>
﻿
Note:  the klevu.interactive configurations should be set globally.
e.g. templates > layout > base.html
Here are common BigCommerce configuration values. Please adjust as needed to fit your specific theme.
Landing Page: '/search.php'
This is the URL that we will send customers to when they use your search bar to access the full search results.
queryParam: 'search_query'
This is the URL parameter used by the SRLP to fetch the search results.
Search URL: 'https://eucsXXXv2.ksearchnet.com/cs/v2/search'
This is your Klevu APIv2 Cloud Search URL + endpoint path. You can find the base domain from Shop Info within your Klevu Merchant Center.
Search Box Selector: '#search_query'
This is the class or ID to locate your BigCommerce theme’s input search box. You may need to change this depending on your theme.
Api Key: 'klevu-XXXXXXXXXXXXX'
This is your public Klevu JS API Key. You can find this from Shop Info within your Klevu Merchant Center.
See : Configuration﻿  section for more detail on these elements.
﻿
QuickSearch
Ensure the klevu.interactive : options value for searchBoxSelector matches the handle used by the HTML search <input> field(s) within your theme. 
See :  Quickstart : Smart Search﻿  for more details on incorporating quicksearch
﻿
Search Result Landing Page
Next, update the SRLP to use Klevu Template JS instead of native search results. 
Within your theme editor open templates > pages > search.html.
Option 1 : Replace the entire contents of the file with the Klevu landing grid
e.g.
{{#partial "page"}}
<section class="page">
    <div class="klevuLanding"></div>
</section>
{{/partial}}
{{> layout/base}}
Option 2 : Keep any page components you need by placing the klevuLanding target div where the search results are to be displayed.
<div class="klevuLanding"></div>
﻿
Category Landing page
This section is only applicable if you have opted for the Klevu add-on to also power your BigCommerce Category Pages.
Within your theme editor open templates > pages > category.html.
Option 1 : Replace the entire contents of the file with the Klevu landing grid
e.g.
{{#partial "page"}}
<section class="page">
    <div class="klevuLanding"></div>
</section>
{{/partial}}
{{> layout/base}}
Option 2 : Keep any page components you need by placing the klevuLanding target div where the product listing results are to be displayed.
<div class="klevuLanding"></div>
﻿
Recommendations
Klevu Smart Recommendations integration options are covered in the Kowledgebase guide: Smart Recommendations Integration Guide for BigCommerce﻿
Updated 30 Oct 2023
Did this page help you?
Shopify
Magento