Storefront Popover

當Live Search已安裝時，當購物者在搜尋方塊中鍵入時，店面中會出現popover。 輸入每個字元後，popover會以建議的產品和排名最前的搜尋結果的縮圖影像更新。

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

依預設，Live Search支援搜尋字詞重新導向。

Popover頁大小

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

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

樣式化Popover範例

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

storefront popover一律顯示產品name和price，且無法設定欄位選項。 不過，可以使用CSS類別來設定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 */

如需有關樣式化店面元素的詳細資訊，請參閱Frontend開發人員指南中的階層式樣式表(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 ​的所需檔案。 不得修改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。