Storefront Popover

Live Searchが​ インストールされている場合、買い物客が検索 ボックスに入力すると、popoverがストアフロントに表示されます。 文字を入力するたびに、popoverが更新され、上位の検索結果の推奨商品とサムネイル画像が表示されます。

Live Searchは、2文字以上のクエリの結果を返します。 部分一致の場合、1語あたりの最大文字数は20文字です。 「入力中に検索」クエリの文字数は設定できません。

Popover ページサイズ

popoverのページサイズにより、自動完了製品を返すことができる行数が決まります。 ライブ検索のインストール中に、page_sizeの値が​ カタログ検索 - Autocomplete Limit設定の現在の値に変更されます。

デフォルトでは、カタログ検索 – 自動完了制限値は8行（または行）に設定されています。 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 */

ストアフロント要素のスタイル設定について詳しくは、​ フロントエンド開発者ガイド ​の​ カスケーディングスタイルシート（CSS） ​を参照してください。

クラスセレクター

次のクラスセレクターを使用して、popover内のコンテナと製品の要素にスタイルを設定できます。

コンテナクラスセレクター

.livesearch.popover-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

ヘッドレス実装

ヘッドレス実装を使用している場合は、npm パッケージ ​を使用してLive Search popoverをインストールできます。