製品一覧ページウィジェット
この Live Search Product Listing Page Widget （PLP）は、Commerce Services Platform を使用して、パフォーマンスが高く、検索やファセットが可能な商品リストページを提供します。 このトピックでは、PLP ウィジェットを有効にしてスタイルを設定する方法について説明します。
PLP ウィジェットの有効化
いつ Live Search サービスがインストールされると、デフォルトの検索機能はに変換されます。 Live Search 自動。
この Live Search 新規インストールの場合、PLP ウィジェットはデフォルトで有効になっています。 アップグレードする場合 Live Search そして PLP ウィジェットはすでにオフになっています、それはそのまま残ります。
ウィジェットの機能
PLP ウィジェットには、次の標準機能が用意されています。
- 「買い物かごに追加」ボタン – シンプルな製品でのみ使用できます。
- 製品ごとに複数の画像 – 設定可能な製品に対して別の色を選択すると、画像が変化する場合があります。
- カラースウォッチのサポート - color 属性はつづりが必要です
colorコードが適切に検証されるかどうか。
ウィジェットのカスタマイズ
PLP ウィジェットの標準機能に加え、ウィジェットをさらにカスタマイズして次の機能を含めることができます。
- 属性によるフィルタリング
- 複数言語のサポート
- 価格スライダー
上記の機能を処理するための PLP ウィジェットのカスタマイズ方法については、を参照してください。 storefront-product-listing-page の README を参照してください リポジトリ.
スタイル設定の例
PLP ウィジェットのルックアンドフィールは、を使用してサイトに合わせてカスタマイズできます 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
.ds-plp-facets__pills.ds-sdk-pill
.ds-sdk-pill__label.ds-sdk-pill__cta
.ds-plp-facets__list
.ds-sdk-input.ds-sdk-input__label.ds-sdk-product-item__product-swatch-groupds-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
PLP ウィジェットの無効化
PLP ウィジェットを無効にするには：
- に移動 ストア > 設定 > 設定 > Live Search > ストアフロントの機能 およびを設定 製品リストウィジェットの有効化 「いいえ」に設定します。
- を選択 設定を保存 設定を保存します。