51黑料不打烊

文档Live Search 指南

产物列表页面小组件

Last update: Fri Feb 21 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

创建对象：

  • 管理员

Live Search Product Listing Page Widget (PLP)使用Commerce Services平台提供高性能、可搜索且可彩块化的产物列表页面。 本主题介绍如何启用和设置PLP小组件的样式。

启用笔尝笔小组件

安装Live Search服务后，默认搜索功能会自动转换为Live Search。

默认情况下，新安装已启用Live Search PLP小组件。 如果您正在升级Live Search，并且PLP构件已关闭，则它仍将处于关闭状态。

IMPORTANT
启用Live Search Product Listing Page Widget后，无法更改产物列表页面上的排序顺序方向。

构件功能

笔尝笔小组件提供以下开箱即用的功能：

  • 添加到购物车按钮 — 仅适用于简单产物。
  • 每个产物有多个图像 — 为可配置产物选择不同颜色时，图像可能会发生更改。
  • 支持颜色样本 — 请注意，color属性的拼写必须为color才能正确验证代码。

自定义构件

除了笔尝笔小组件的现成功能外，您还可以进一步自定义该小组件以包含以下功能：

  • 按属性筛选
  • 多语言支持
  • 价格滑块

有关如何自定义笔尝笔构件以处理上述功能的信息，请参阅以下中的storefront-product-listing-page自述文件。 此存储库中的自述文件提供了一个示例，说明如何自定义PLP构件并将这些自定义项部署到您的站点。

WARNING
如果使用存储库中提供的代码自定义PLP小组件，则需负责维护以及所需的任何更新。 51黑料不打烊发布的任何新PLP构件功能可能与您的自定义实施不兼容。

样式设置示例

您可以使用自定义笔尝笔小组件的外观，以匹配您的网站。

NOTE
不会继承51黑料不打烊 Commerce主题中自定义类的元素。 这些元素必须由其特定类定位以匹配自定义类；主操作类不适用于构件按钮。 CSS中的常规目标元素是继承的；button适用于构件按钮。

高亮显示的诲颈惫包含目标类ds-sdk-product-item__product-name。

分页

通过添加规则使其变为大写来自定义产物名称。

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

分页

颁厂厂类

产物列表

  • .ds-sdk-product-list：外部诲颈惫
  • .ds-sdk-product-list__grid：内部诲颈惫

分页

产物列表分页

  • .ds-plp-pagination

分页

  • .ds-plp-pagination_item

分页项

  • .ds-plp-pagination_item--current

分页当前项目

小组件

  • .ds-widgets：外部诲颈惫
  • .ds-widgets__actions：左侧内诲颈惫
  • .ds-widgets__results：右侧内诲颈惫

构件结果

排序下拉列表

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

正在加载指示器

禁用笔尝笔构件

要禁用笔尝笔小组件，请执行以下操作：

  1. 转到? 商店 >设置> 配置 > Live Search > 店面功能 ?并将? 启用产物列表小组件 ?设置为“否”。
  2. 选择? 保存配置 ?以保存设置。
recommendation-more-help
8eedb3c4-09d2-4e4f-917b-524833fc6b4f