Algolia Magento 扩展：由于 Off-Canvas 菜单呈现两次，未使用 Algolia 结果页面

Question

我已尽我所能试图弄清楚这里发生了什么，但无济于事。

我按照说明在客户端网站的本地开发实例上安装了 Algolia。禁用 Elasticsearch 后，我可以检查元素并查看 algolia-searchbox div 是否正确显示。但是，它无法正常工作。它似乎在使用 magento 搜索功能，即使该搜索在 algolia 搜索框内。

我挖得更深了一点。我发现由于 off-canvas 菜单，topsearch 在页面上呈现了两次。当我将 window 缩小到适合 show-for-small-only 呈现的大小时，搜索也在该部分中，但它实际上像 Algolia 搜索一样有效。

<reference name="header">
   <remove name="top.search"/>
   <block type="algoliasearch/search_form" name="top.algoliasearch" as="topSearch"/>
   <action method="setTemplate"><template>algoliasearch/topsearch.phtml</template></action>
</reference>

所以第一个问题是：使用 off-canvas 菜单功能使其与响应式设计一起工作的最佳方法是什么？ off-canvas 菜单，第二个呈现，由于它呈现两次，最终覆盖了对正常 topsearch 区域所做的操作，这是一个大问题

到目前为止，我能够在正常 header 上看到正确搜索栏的唯一方法是将其放入 algoliasearch.xml:

这完全摆脱了我的 header，但它实际上显示了正确的搜索栏。我知道它的语法不正确，但是在进行故障排除时...

我面临的第二个问题是，即使我使用实际显示的搜索栏（通过上面的 header xml 部分或使用较小的浏览器尺寸呈现关闭 canvas 菜单搜索），我最终看到的结果页面是正常的 Magento 结果页面。当我在搜索栏中输入时，我可以在“网络”面板中看到 activity，但是一旦我提交，它就会全部消失并保持空白。

感谢您提供的任何帮助。

Answer 1

在我的特定案例中所做的所有更改都在 app\design\frontend\base\default\template\algoliasearch\topsearch.phtml 文件中进行

在第 546 行附近，我将 "search" 替换为 [id="search"]。这将绑定到两个输入，而不是仅绑定到最近呈现的输入。
添加了以下内容（基本上，在 algoliaBundle 正下方添加 $(document).ready(function () { .$(function($) { 在第 536 行并将所有内容都包装在其中： https://github.com/algolia/algoliasearch-magento/blob/master/design/frontend/template/topsearch.phtml#L536
https://github.com/algolia/algoliasearch-magento/blob/master/design/frontend/template/topsearch.phtml#L1735
第 1284 行：更改：if ($(algoliaConfig.instant.selector).length !== 1) 到 if ($(algoliaConfig.instant.selector).length < 1)
将即时选择器从 .main 更改为 .main-container

Algolia Magento 扩展：由于 Off-Canvas 菜单呈现两次，未使用 Algolia 结果页面

Algolia Magento Extension: Rendering Twice Due to Off-Canvas Menu, Not Using Algolia Results Page

javascript

canvas

magento

algolia