ドキュメントCommerce「Live Search ガイド」

製品一覧ページウィジェット

Last update: Wed May 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • Admin

この Live Search Product Listing Page Widget （PLP）は、Commerce Services Platform を使用して、パフォーマンスが高く、検索やファセットが可能な商品リストページを提供します。 このトピックでは、PLP ウィジェットを有効にしてスタイルを設定する方法について説明します。

PLP ウィジェットの有効化

いつ Live Search サービスがインストールされると、デフォルトの検索機能はに変換されます。 Live Search 自動。

この Live Search 新規インストールの場合、PLP ウィジェットはデフォルトで有効になっています。 アップグレードする場合 Live Search そして PLP ウィジェットはすでにオフになっています、それはそのまま残ります。

IMPORTANT
いつ Live Search Product Listing Page Widget が有効になっている場合、商品リストページの並べ替え順の方向を変更できません。

PLP ウィジェットの無効化

PLP ウィジェットを無効にするには：

  1. に移動 ストア > 設定 > 設定 > Live Search > ストアフロントの機能 およびを設定 製品リストウィジェットの有効化 「いいえ」に設定します。
  2. を選択 設定を保存 設定を保存します。

ウィジェットの機能

PLP ウィジェットは、検索可能な製品ページで期待される様々な機能を提供します。 これには以下が含まれます。

  • 属性によるフィルタリング
  • カラースウォッチのサポート
  • 買い物かごに追加機能
  • 複数言語のサポート
  • 価格スライダー

上記の機能を処理するための PLP ウィジェットのカスタマイズ方法については、を参照してください。 storefront-product-listing-page の README を参照してください リポジトリ.

スタイル設定の例

PLP ウィジェットのルックアンドフィールは、を使用してサイトに合わせてカスタマイズできます CSS.

NOTE
Adobe Commerce テーマ内にカスタムクラスを持つ要素は継承されません。 これらの要素は、カスタムクラスに一致する特定のクラスによってターゲットにする必要があります。プライマリアクションクラスは、ウィジェットボタンでは機能しません。
CSS 内の汎用のターゲット要素が継承されます。 button ウィジェットボタンに適用します。

ハイライト表示された div には、ターゲットクラスが含まれています ds-sdk-product-item__product-name.

ページネーション

製品名を大文字にするルールを追加して、製品名をカスタマイズします。

.ds-sdk-product-item__product-name {
 text-transform: uppercase;
}

ページネーション

CSS クラス

商品リスト

  • .ds-sdk-product-list：外側の div
  • .ds-sdk-product-list__grid：内部 div

ページネーション

製品リストのページネーション

  • .ds-plp-pagination

ページネーション

  • .ds-plp-pagination_item

ページネーション項目

  • .ds-plp-pagination_item--current

ページネーションの現在の項目

ウィジェット

  • .ds-widgets：外側の div
  • .ds-widgets__actions：左側内側 div
  • .ds-widgets__results：右側内側 div

ウィジェットの結果

並べ替えドロップダウン

  • .ds-sdk-sort-dropdown

並べ替えドロップダウン

  • .ds-sdk-sort-dropdown__button

ドロップダウンボタン

  • .ds-sdk-sort-dropdown__items

ドロップダウン項目

  • .ds-sdk-sort-dropdown__items--item

ドロップダウン項目

  • .ds-sdk-sort-dropdown__items--item-selected

ドロップダウンで選択された項目

  • .ds-sdk-sort-dropdown__items--item-active

ドロップダウンのアクティブな選択

ファセット

  • .ds-plp-facets
  • .ds-plp-facets__header
  • .ds-plp-facets__header_title
  • .ds-plp-facets__header__clear-all

ファセットヘッダータイトル {width="350"}

  • .ds-plp-facets__pills
  • .ds-sdk-pill

ファセット錠剤 {width="350"}

  • .ds-sdk-pill__label
  • .ds-sdk-pill__cta

ファセットラベル {width="350"}

  • .ds-plp-facets__list

ファセットリスト {width="350"}

  • .ds-sdk-input
  • .ds-sdk-input__label
  • .ds-sdk-product-item__product-swatch-group
  • ds-sdk-product-item__product-swatch-item
  • .ds-sdk-input_fieldset_show-more

入力

  • .ds-sdk-labelled-input

ラベル付き入力

  • .ds-sdk-labelled-input__input
  • .ds-sdk-labelled-input__label

入力ラベル

商品品目

  • .ds-sdk-product-item

  • .ds-sdk-product-item__image

  • .ds-sdk-product-item__product-name

  • .ds-sdk-product-item__product-options

  • .ds-sdk-product-price

    • .ds-sdk-product-price--no-discount
    • .ds-sdk-product-price--grouped
    • .ds-sdk-product-price--bundle
    • .ds-sdk-product-price--discount

製品

読み込み

  • .ds-sdk-loading
  • .ds-sdk-loading__spinner
  • .ds-sdk-loading__spinner-label

インジケーターを読み込み中

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