BigCommerce

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 docid\ amga2lz3adsu1tvjxhg1k for detailed instructions on incorporating core javascript and klevu interactive include the core files according to page type \<! 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 \<! 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 docid\ el9qchgznersiaeg e lu 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 docid\ amga2lz3adsu1tvjxhg1k 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