文件CommerceLive Search 指南

產品清單頁面Widget

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

建立對象：

  • 管理員

Live Search Product Listing Page Widget (PLP)使用Commerce Services平台來提供高效能、可搜尋且可多面向的產品清單頁面。 本主題說明如何啟用和設定PLP Widget的樣式。

啟用PLP Widget

安裝Live Search服務時，預設搜尋功能會自動轉換為Live Search。

預設會為新安裝啟用Live Search PLP Widget。

如果您正在升級Live Search，而且PLP Widget已關閉，則會維持關閉。 若要開啟：

  1. 在Adobe Commerce管理員中，前往儲存→設定→設定。
  2. 在左側導覽中，按一下​Live Search > Storefront Features。
  3. 按一下Storefront Features區段。
  4. 設定Enable Product Listing Widget =是
  5. 儲存設定
  6. 如果出現提示，請排清快取（前往「系統>工具>快取管理> Flush Magento Cache」）。
IMPORTANT
啟用Live Search Product Listing Page Widget時，無法變更產品清單頁面上的排序順序方向。

Widget功能

PLP Widget提供下列現成可用的功能：

  • 加入購物車按鈕 — 僅適用於簡單產品。
  • 每個產品有多個影像 — 為可設定產品選擇不同顏色時，影像可能會變更。
  • 支援色票 — 請注意，必須將color屬性拼成color，程式碼才能正確驗證。

自訂Widget

除了PLP Widget的現成功能以外，您也可以進一步自訂Widget以包含下列功能：

  • 依屬性篩選
  • 多語言支援
  • 價格滑桿

如需有關如何自訂PLP Widget以處理上述功能的資訊，請參閱下列storefront-product-listing-page存放庫中的 Readme。 此存放庫中的Readme提供範例，說明如何自訂PLP Widget，並將這些自訂內容部署至您的網站。

WARNING
如果您使用存放庫中的可用程式碼自訂PLP Widget，則需自行負責維護及任何必要的更新。 Adobe發行的任何新PLP Widget功能可能與您的自訂實施不相容。

樣式範例

您可以使用CSS自訂PLP Widget的外觀與風格，以符合您的網站。

NOTE
Adobe Commerce主題中自訂類別的元素不會繼承。 這些元素必須以其特定類別為目標，以符合自訂類別；主要動作類別在Widget按鈕上無法運作。 CSS內的一般目標元素是繼承的；button套用至Widget按鈕。

反白顯示的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

分頁目前專案

Widget

  • .ds-widgets：外部div
  • .ds-widgets__actions：左側內部div
  • .ds-widgets__results：右側內部div

Widget結果

排序下拉式清單

  • .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

下拉式清單作用中選取專案

Facet

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

Facet標頭標題 {width="350"}

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

Facet藥丸 {width="350"}

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

Facet標籤 {width="350"}

  • .ds-plp-facets__list

Facet清單 {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 Widget

若要停用PLP Widget：

  1. 移至​商店 >設定> 組態 > Live Search > 店面功能​並將​ 啟用產品清單Widget ​設定為[否]。
  2. 選取​ 儲存設定 ​以儲存設定。
recommendation-more-help
8eedb3c4-09d2-4e4f-917b-524833fc6b4f