Storefront Popover

当Live Search为已安装时，购物者在搜索框中键入内容时，店面中会出现popover。 键入每个字符后，popover将更新为排名最前的搜索结果的建议产品和缩略图图像。

Live Search返回两个或更多字符的查询结果。 对于部分匹配，每个单词的最大字符数为20。 “键入时搜索”查询中的字符数无法配置。

默认情况下，Live Search支持搜索词重定向。

Popover页面大小

popover的页面大小决定了可以返回多少行自动完成产品。 在Live Search安装过程中，page_size值更改为目录搜索 - Autocomplete Limit设置的当前值。

默认情况下，“目录搜索 — 自动完成限制”值设置为八行。 要更改popover的页面大小，请执行以下操作：

样式Popover示例

您可以自定义Popover小部件的外观，以符合贵公司的风格和品牌指南。

storefront popover始终显示产品name和price，并且选择的字段不可配置。 但是，popover元素可以使用CSS类设置样式。 例如，以下声明更改了popover容器和页脚的背景颜色。

.livesearch.popover-container {
    background-color: lavender;
}

.livesearch.view-all-footer {
    background-color: magenta;
}

容器可见性

.livesearch.popover-container的父组件是.search-autocomplete。 .active类指示容器的可见性。 在popover打开时有条件地添加.active类。

.search-autocomplete.active   /* visible */
.search-autocomplete          /* not visible */

有关设置店面元素样式的详细信息，请参阅Frontend Developer Guide中的层叠样式表(CSS)。

类选择器

您可以使用以下类选择器来设置popover中的容器和产品元素的样式。

容器类选择器

.livesearch.pover-container

.livesearch.view-all-footer

产品类选择器

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.livesearch产品链接

使用修改的主题 working-with-modified-theme

您可以将storefront popover与自定义主题一起使用，该主题会继承来自​ Luma ​的必需文件。 不得修改Magento_Search模块的header-wrapper中的top.search块。

<referenceContainer name="header-wrapper">
   <block class="Magento\Framework\View\Element\Template" name="top.search" as="topSearch" template="Magento_Search::form.mini.phtml">
      <arguments>
         <argument name="configProvider" xsi:type="object">Magento\Search\ViewModel\ConfigProvider</argument>
      </arguments>
   </block>
</referenceContainer>

正在禁用popover

要禁用popover并恢复标准快速搜索功能，请输入以下命令：

bin/magento module:disable Magento_LiveSearchStorefrontPopover

Headless实施

对于具有Headless实施的客户，您可以使用npm包安装Live Search popover。