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

Last update: Sat Nov 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
検索

作成対象：

管理者

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

PLP ウィジェットの有効化

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

新規インストールの場合、Live Search PLP ウィジェットはデフォルトで有効になっています。

Live Search をアップグレードしていて、PLP ウィジェットが既にオフになっている場合は、そのままになります。有効にするには：

Adobe Commerce管理者で、Stores → Settings → Configuration に移動します。
左側のナビゲーションで、Live Search/Storefront Features をクリックします。
「Storefront Features」セクションをクリックします。
Set Enable Product Listing Widget = Yes
設定を保存
プロンプトが表示されたら、キャッシュをフラッシュします（システム / ツール / キャッシュ管理/ Flush Magento Cache に移動）。

IMPORTANT

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

ウィジェットの機能

PLP ウィジェットには、次の標準機能が用意されています。

「買い物かごに追加」ボタン – シンプルな製品でのみ使用できます。
製品ごとに複数の画像 – 設定可能な製品に対して別の色を選択すると、画像が変化する場合があります。
カラースウォッチのサポート – コードを正しく検証するには、color 属性を color のように入力する必要があります。

ウィジェットのカスタマイズ

PLP ウィジェットの標準機能に加え、ウィジェットをさらにカスタマイズして次の機能を含めることができます。

属性によるフィルタリング
複数言語のサポート
価格スライダー

上記の機能を処理するための PLP ウィジェットのカスタマイズ方法については、次の storefront-product-listing-page リポジトリの Readme を参照してください。このリポジトリの Readme には、PLP ウィジェットをカスタマイズし、そのカスタマイズをサイトにデプロイする方法の例が記載されています。

WARNING

リポジトリ内のコードを使用して PLP ウィジェットをカスタマイズした場合、メンテナンスと必要な更新はユーザーが行う必要があります。 Adobeでリリースされる新しい PLP ウィジェット機能は、カスタマイズされた実装と互換性がない可能性があります。

スタイル設定の例

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

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

読み込みインジケーター

PLP ウィジェットの無効化

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

ストア/設定/設定/Live Search/ストアフロント機能 に移動して、製品リストウィジェットを有効にする を「いいえ」に設定します。
設定を保存 を選択して、設定を保存します。

recommendation-more-help

8eedb3c4-09d2-4e4f-917b-524833fc6b4f