I'm trying to implement the Klevu Template JS on Big Commerce store and I followed the steps, but I don't see any difference in my searches. I think I might have put the wrong Search Results Page URL, or Search Input selector. I basically inspected the home page search to find them, that's why Im not sure if this is the right way to do it, if not could you please provide the steps on how to find them. I'm using Big Commerce for my store/website.
these are the scripts i need to include in my file, or specifically in base.html file.
<!-- 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}}
<!-- 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>
<!DOCTYPE html>
<html class="no-js" lang="{{ locale_name }}">
<head>
<!--
Austin Light, Night, and Vogue
Theme for BigCommerce
Designed and Developed by oBundle
Visit Our Website - https://obundle.com
_ _ _
| | | || |
___ | |__ _ _ _ __ __| || | ___
/ _ \ | '_ \ | | | || '_ \ / _` || | / _ \
| (_) || |_) || |_| || | | || (_| || || __/
\___/ |_.__/ \__,_||_| |_| \__,_||_| \___|
Serving BigCommerce clients since 2014.
-->
<title>{{ head.title }}</title>
{{{ resourceHints }}}
{{{ head.meta_tags }}}
{{{ head.config }}}
{{#block "head"}} {{/block}}
<link href="{{ head.favicon }}" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
{{!-- Change document class from no-js to js so we can detect this in css --}}
document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
</script>
<!-- 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}}
<!-- Initialize Klevu for your store -->
<script type="text/javascript">
klevu.interactive(function () {
var options = {
url : {
protocol: 'https:',
queryParam: 'search_query',
landing: '/search.php', // Replace with your BigCommerce Search Results Page URL
search: 'https://uscs32v2.ksearchnet.com/cs/v2/search' // Replace with your Klevu APIv2 Search URL + endpoint path
},
search: {
minChars: 0,
searchBoxSelector: 'input[name="query"]', // Replace with your BigCommerce Search Input selector
apiKey: "klevu-169824742590516585" // Replace with your Klevu JS API Key
},
analytics: {
apiKey: 'klevu-169824742590516585' // Replace with your Klevu JS API Key
}
};
klevu(options);
});
</script>
{{> components/common/polyfill-script }}
<script>window.consentManagerTranslations = `{{{langJson 'consent_manager'}}}`;</script>
{{!-- Load Lazysizes script ASAP so images will appear --}}
<script>
{{!-- Only load visible elements until the onload event fires, after which preload nearby elements. --}}
window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
</script>
<script async src="{{cdn 'assets/dist/theme-bundle.head_async.js'}}"></script>
{{getFontsCollection font-display='swap'}}
<link rel="preload" href="{{cdn 'assets/dist/theme-bundle.font.js'}}" as="script">
<script async src="{{cdn 'assets/dist/theme-bundle.font.js'}}"></script>
{{{stylesheet '/assets/css/theme.css'}}}
{{{head.scripts}}}
{{~inject 'widgetMode' theme_settings.homepage_widget_mode}}
{{~inject 'storefrontAPIToken' settings.storefront_api.token}}
{{~inject 'zoomSize' theme_settings.zoom_size}}
{{~inject 'productSize' theme_settings.product_size}}
{{~inject 'genericError' (lang 'common.generic_error')}}
{{~inject 'urls' urls}}
{{~inject 'secureBaseUrl' settings.secure_base_url}}
{{~inject 'cartId' cart_id}}
{{~inject 'channelId' settings.channel_id}}
{{~inject 'template' template}}
{{~inject 'validationDictionaryJSON' (langJson 'validation_messages')}}
{{~inject 'validationFallbackDictionaryJSON' (langJson 'validation_fallback_messages')}}
{{~inject 'validationDefaultDictionaryJSON' (langJson 'validation_default_messages')}}
{{~inject 'carouselArrowAndDotAriaLabel' (lang 'carousel.arrow_and_dot_aria_label')}}
{{~inject 'carouselActiveDotAriaLabel' (lang 'carousel.active_dot_aria_label')}}
{{~inject 'carouselContentAnnounceMessage' (lang 'carousel.content_announce_message')}}
{{!-- Get this loading ASAP --}}
<link rel="preload" href="{{cdn 'assets/dist/theme-bundle.main.js'}}" as="script">
</head>
<body data-page-type="{{page_type}}" data-theme-variant="{{theme_settings.theme_type}}">
<svg data-src="{{cdn 'img/icon-sprite.svg'}}" class="icons-svg-sprite"></svg>
{{> components/common/header }}
{{> components/common/body }}
{{> components/common/footer }}
<script>window.__webpack_public_path__ = "{{cdn 'assets/dist/'}}";</script>
<script>
{{!-- Exported in app.js --}}
function onThemeBundleMain() {
window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
}
</script>
<script async defer src="{{cdn 'assets/dist/theme-bundle.main.js'}}" onload="onThemeBundleMain()"></script>
{{{footer.scripts}}}
</body>
</html>
This is Tejas from Klevu. I can see two Klevu JS scripts, this is outside html tag and also inside head tag while it should only be inside body tag before closing. Here is the example demo store with Bigcommerce https://bigcommerce-demo.ksearchmisc.com/ If you see the page source, you will be able to see the script in the footer. So please use base.html only, but put the script before body tag closing.
Also, please remove the code which is available before html tag. If you are still facing the issue, please contact support with site URL using the link below: https://help.klevu.com/support/tickets/new