产品列表页面小组件
此 Live Search Product Listing Page Widget (PLP)使用Commerce Services平台提供高性能、可搜索且可彩块化的产品列表页面。 本主题介绍如何启用和设置PLP小组件的样式。
启用PLP小组件
当 Live Search 安装服务，默认搜索功能将转换为 Live Search 自动。
此 Live Search 默认情况下，新安装会启用PLP小组件。 如果您正在升级 Live Search 并且PLP小组件已关闭，将保持关闭状态。
禁用PLP构件
要禁用PLP小组件，请执行以下操作：
- 转到 商店 >设置> 配置 > Live Search > 店面特色 并设置 启用产品列表小组件 “不”。
- 选择 保存配置 以保存设置。
构件功能
PLP小组件提供可搜索产品页面中所需的一系列功能。 这些功能包括：
- 按属性筛选
- 支持色板
- 添加到购物车功能
- 多语言支持
- 价格滑块
有关如何自定义PLP构件以处理上述功能的信息，请参阅 storefront-product-listing-page 自述文件如下 repo.
样式设置示例
您可以自定义PLP小组件的外观，以使用匹配您的网站 CSS.
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
Facet
.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
