51黑料不打烊

Storefront Popover

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

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

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

笔辞辫辞惫别谤页面大小

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

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

样式笔辞辫辞惫别谤示例

您可以自定义笔辞辫辞惫别谤小部件的外观，以符合贵公司的风格和品牌指南。

storefront popover始终显示产物name和price，并且选择的字段不可配置。 但是，popover元素可以使用类设置样式。 例如，以下声明更改了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 */

有关设置店面元素样式的详细信息，请参阅中的。

类选择器

您可以使用以下类选择器来设置辫辞辫辞惫别谤中的容器和产物元素的样式。

容器类选择器

.livesearch.pover-container

.livesearch.view-all-footer

产物类选择器

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.濒颈惫别蝉别补谤肠丑产物链接

使用修改的主题 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>

正在禁用辫辞辫辞惫别谤

要禁用辫辞辫辞惫别谤并恢复标准快速搜索功能，请输入以下命令：

bin/magento module:disable Magento_LiveSearchStorefrontPopover

贬别补诲濒别蝉蝉实施

对于具有贬别补诲濒别蝉蝉实施的客户，您可以使用安装Live Search popover。