Storefront Popover

時間 Live Search 是 已安裝， a popover 出現在店面，當購物者輸入 搜尋 方塊。 輸入每個字元後， popover 已更新為熱門搜尋結果的建議產品和縮圖影像。

Live Search 傳回兩個或更多字元的查詢結果。 若為部分相符，則每個字的字元數上限為20。 「鍵入時搜尋」查詢中的字元數無法設定。

根據預設， Live Search 支援 搜尋字詞重新導向.

Popover 頁面大小

的頁面大小 popover 決定可以傳回多少行自動完成產品。 在Live Search安裝期間， page_size 值會變更為的目前值 目錄搜尋 - Autocomplete Limit 設定。

依預設，「目錄搜尋 — 自動完成限制」值會設定為八行（或數列）。 若要變更的頁面大小 popover，請執行下列動作：

樣式 Popover 範例

您可以自訂外觀與風格 Popover 符合貴公司風格與品牌指導方針的Widget。

此 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 類別指示容器的可見性。 此 .active 類別是有條件地新增當 popover 是開啟的。

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

如需有關樣式化店面元素的詳細資訊，請參閱 階層式樣式表(CSS) 在 前端開發人員指南.

類別選取器

您可以使用下列類別選取器，來設定容器和產品元素在 popover.

容器類別選取器

.livesearch.pover-container

.livesearch.view-all-footer

產品類別選擇器

.livesearch.products-container

.livesearch.product-result

.livesearch.product-name

.livesearch.product-price

.livesearch product-link

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

您可以使用 storefront popover 透過自訂 主題 會繼承下列專案的必要檔案： Luma. 此 top.search 中的區塊 header-wrapper 的 Magento_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實作的客戶，您可以安裝 Live Search popover 使用 npm套件.