Storefront Popover

Live Search が インストール済みになると、買い物客が 検索ボックスに入力したときに popover がストアフロントに表示されます。 各文字を入力すると、検索結果の候補となる製品やサムネール画像が popover に表示されます。

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

デフォルトでは、Live Search は 検索語句のリダイレクトをサポートしています。

Live Search popover

TIP
製品属性を検索可能として設定する方法については、「Live Search の設定記事を参照してください。

Popover ページサイズ

popover ージのページサイズによって、オートコンプリートされた商品を返せるライン数が決まります。 Live Search のインストール中、page_size の値は カタログ検索- Autocomplete Limit 設定の現在の値に変更されます。

デフォルトでは、「カタログ検索 – オートコンプリートの制限」の値は 8 行(1 行)に設定されています。 popover ージのページサイズを変更するには、次の手順を実行します。

  1. 管理者 サイドバーで、ストア/設定/設定 に移動します。
  2. 左側のパネルで、「カタログ」を展開し、設定のリストから カタログ を選択します。
  3. カタログ検索」セクションを展開します。
  4. オートコンプリート制限」を、popover ージで許可する行数に設定します。
  5. 完了したら、「設定を保存」をクリックします。

スタイル設定 Popover 例

Popover ウィジェットのルックアンドフィールは、会社のスタイルやブランディングガイドラインに合わせてカスタマイズできます。

storefront popover には常に製品 nameprice が表示され、フィールドの選択は設定できません。 ただし、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

Popover コンテナ

すべてのフッターを表示

製品クラスセレクター

.livesearch.products-container

製品コンテナ

.livesearch.product-result

製品結果

.livesearch.product-name

製品名

.livesearch.product-price

製品価格

製品結果

変更したテーマの操作 :headding-anchor:working-with-modified-theme

カスタマイズした テーマで storefront popover を使用し、必要なファイルを Luma から継承することができます。 Magento_Search モジュールの header-wrappertop.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 をインストールできます。

recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055