javascript - Algolia Magento 扩展 : Rendering Twice Due to Off-Canvas Menu, 未使用 Algolia 结果页面

Question

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

我按照说明在客户端网站的本地开发实例上安装了 Algolia。禁用 Elasticsearch 后，我可以检查 element 并看到 algolia-searchbox div 正确显示。然而，它并没有像预期的那样工作。它似乎正在使用 magento 搜索功能，即使该搜索位于 algolia 搜索框中。

我挖得更深一些。我发现由于 Canvas 外菜单，顶部搜索在页面上渲染了两次。当我将窗口缩小到仅显示小尺寸以进行渲染时，搜索也在该部分中，但实际上它的工作方式与 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>

所以第一个问题是:让它与利用 Canvas 外菜单功能的响应式设计一起使用的最佳方法是什么？第二次渲染的 Canvas 外菜单最终会覆盖对正常顶部搜索区域所做的操作，因为它渲染了两次，这是一个巨大的问题

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

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

我面临的第二个问题是，即使我使用实际显示的搜索栏(通过上面的标题 xml 片段或使用较小的浏览器大小来呈现 Canvas 外菜单搜索)，结果页面我最终出现的是正常的 Magento 结果页面。当我在搜索栏中输入内容时，我可以在“网络”面板中看到事件，但是一旦我提交，它就会全部消失并保持空白。

感谢您提供的任何帮助。

Answer 1

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

1. 在第 546 行左右，我将“search”替换为 [id="search"]。这会绑定(bind)到两个输入，而不是仅绑定(bind)到最近渲染的输入。

2. 添加了以下内容(基本上，在 algoliaBundle.$(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

3. 第 1284 行:更改:if ($(algoliaConfig.instant.selector).length !== 1) 为if ($(algoliaConfig.instant.selector).length < 1)

4. 将即时选择器从 .main 更改为 .main-container