BigCommerce商店Klevu搜索部署异常及配置项查找咨询

一、正确获取Search Input选择器 #

1. 打开你的BigCommerce商店首页，定位到页面上的搜索输入框。
2. 右键点击搜索框，选择「检查」打开浏览器开发者工具。
3. 在Elements面板中找到对应的<input>标签，根据标签属性生成选择器：
   • 若标签有id属性（如id="search_query"），选择器用#search_query
   • 若标签有name属性（如name="query"），选择器用input[name="query"]
   • 若标签有class属性（如class="site-search-input"），选择器用.site-search-input
4. 验证选择器有效性：在开发者工具的Console面板输入document.querySelector('你的选择器')，回车后若返回对应的input元素，说明选择器正确。

二、正确获取Search Results Page URL #

1. 在商店首页的搜索框输入任意测试关键词（如"test"），点击搜索按钮。
2. 跳转到搜索结果页面后，复制浏览器地址栏中的路径部分：
   • 例：若地址栏为https://your-store-url.com/search.php?search_query=test，则路径为/search.php
   • 若为自定义搜索页面URL（如https://your-store-url.com/search/test），则路径为/search
3. 注意：仅需路径部分，无需包含域名及后面的查询参数（?及之后的内容）。

修正后的base.html代码示例 #

将以下代码正确放置在<head>标签内（移除重复的Klevu脚本）：

<!-- 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', // 替换为你获取的搜索结果页面路径
                search: 'https://uscs32v2.ksearchnet.com/cs/v2/search' // 你的Klevu APIv2地址
            },
            search: {
                minChars: 0,
                searchBoxSelector: 'input[name="query"]', // 替换为你验证后的搜索框选择器
                apiKey: "klevu-169824742590516585" // 你的Klevu JS API Key
            },
            analytics: {
                apiKey: 'klevu-169824742590516585' // 你的Klevu JS API Key
            }
        };
        klevu(options);
    });
</script>

内容的提问来源于stack exchange，提问作者Rany Khashan