Storefront Popover

条件 Live Search 等しい installed, a popover 買い物客がを入力すると、ストアフロントに表示されます 検索 ボックス。 各文字を入力すると、 popover に、上位の検索結果の推奨製品とサムネール画像を更新しました。

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

デフォルトでは Live Search のサポート 検索語句のリダイレクト.

Popover ページサイズ

のページサイズ popover オートコンプリートされた製品のライン数を指定します。 Live Search のインストール中、 page_size の値が現在のの値に変更されます。 カタログ検索 - Autocomplete Limit の設定値。

デフォルトでは、「カタログ検索 – オートコンプリートの制限」の値は 8 行（1 行）に設定されています。 のページサイズを変更するには 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 クラスは、コンテナの表示/非表示を示します。 この .active クラスが条件付きで追加されるのは、 popover が開いています。

.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. この 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

ヘッドレス実装

ヘッドレス実装を使用する場合は、 Live Search popover の使用 npm パッケージ.