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 例
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.popover-container
.livesearch.view-all-footer
製品クラスセレクター
.livesearch.products-container
.livesearch.product-result
.livesearch.product-name
.livesearch.product-price
.livesearch product-link
変更したテーマの操作 :headding-anchor: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 をインストールできます。