我正在尝试在 Big Commerce 商店上实现 Klevu Template JS，并且按照步骤操作，但我在搜索中没有看到任何差异。我想我可能输入了错误的搜索结果页面 URL 或搜索输入选择器。我基本上检查了主页搜索来找到它们，这就是为什么我不确定这是否是正确的方法，如果不是，请提供如何找到它们的步骤。我正在为我的商店/网站使用 Big Commerce。
这些是我需要包含在我的文件中的脚本，或者特别是在 base.html 文件中。
<!-- 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>
这是来自 Klevu 的 Tejas。我可以看到两个 Klevu JS 脚本，这是在 html 标签外部，也在 head 标签内部，而在关闭之前它应该只在 body 标签内部。这是 Bigcommerce 的示例演示商店https://bigcommerce-demo.ksearchmisc.com/ 如果您看到页面源代码，您将能够在页脚中看到脚本。所以请仅使用base.html，但将脚本放在body标签结束之前。
另外，请删除 html 标签之前的代码。如果您仍然遇到该问题，请使用以下链接联系支持人员并提供站点 URL： https://help.klevu.com/support/tickets/new