Storefront Popover

Live Search が インストール済みになると、買い物客が 検索ボックスに入力したときに 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 から継承することができます。 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 をインストールできます。