Widget de página de lista de productos

El Live Search Product Listing Page Widget (PLP) utiliza la plataforma de Commerce Services para proporcionar una página de lista de productos con rendimiento, en la que se pueden realizar búsquedas y facetas. En este tema se describe cómo habilitar y aplicar estilo al widget PLP.

Activación del widget PLP

Si la variable Live Search Cuando el servicio de está instalado, la funcionalidad de búsqueda predeterminada se convierte en Live Search automáticamente.

El Live Search El widget PLP está habilitado de forma predeterminada para las nuevas instalaciones. Si va a realizar la actualización Live Search y el widget PLP ya se ha desactivado, seguirá siéndolo.

IMPORTANT
Si la variable Live Search Product Listing Page Widget está activada, no se puede cambiar la dirección del criterio de ordenación en una página de la lista de productos.

Desactivación del widget PLP

Para desactivar el widget PLP:

  1. Ir a Tiendas > Configuración > Configuración > Live Search > Características de tienda y establecer Activar widgets de lista de productos a "No".
  2. Seleccionar Guardar configuración para guardar la configuración.

Funciones de widget

El widget PLP proporciona una serie de funciones que se esperan en una página de producto en la que se puede buscar. Estos incluyen:

  • Filtrado por atributos
  • Compatibilidad con muestras de color
  • Funcionalidad Añadir al carro
  • Compatibilidad con varios idiomas
  • Reguladores de precios

Para obtener información sobre cómo personalizar el widget PLP para gestionar las funciones anteriores, consulte la storefront-product-listing-page léame en lo siguiente repo.

Ejemplo de estilo

Puede personalizar el aspecto del widget PLP para que coincida con su sitio mediante CSS.

NOTE
Los elementos con clases personalizadas dentro de una temática de Adobe Commerce no se heredan. Estos elementos deben estar dirigidos por su clase específica para que coincidan con las clases personalizadas; las clases de acción principales no funcionarán en un botón de widget.
Se heredan los elementos de destino genéricos dentro de CSS; button se aplica a los botones del widget.

Los divs resaltados contienen la clase de destino ds-sdk-product-item__product-name.

Paginación

Personalice el nombre del producto añadiendo una regla para que esté en mayúsculas.

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

Paginación

Clases CSS

Lista de productos

  • .ds-sdk-product-list: div externo
  • .ds-sdk-product-list__grid: div interno

Paginación

Paginación de lista de productos

  • .ds-plp-pagination

Paginación

  • .ds-plp-pagination_item

Elemento de paginación

  • .ds-plp-pagination_item--current

Elemento actual de paginación

Widgets

  • .ds-widgets: div externo
  • .ds-widgets__actions: div interior del lado izquierdo
  • .ds-widgets__results: div interior del lado derecho

Resultados del widget

Lista desplegable Ordenar

  • .ds-sdk-sort-dropdown

Lista desplegable Ordenar

  • .ds-sdk-sort-dropdown__button

Botón desplegable

  • .ds-sdk-sort-dropdown__items

Elementos desplegables

  • .ds-sdk-sort-dropdown__items--item

Elemento desplegable

  • .ds-sdk-sort-dropdown__items--item-selected

Elemento seleccionado desplegable

  • .ds-sdk-sort-dropdown__items--item-active

Selección activa desplegable

Facetas

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

Título del encabezado Facetas {width="350"}

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

Píldoras Facet {width="350"}

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

Etiqueta de facetas {width="350"}

  • .ds-plp-facets__list

Lista de facetas {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

Entrada

  • .ds-sdk-labelled-input

Entrada etiquetada

  • .ds-sdk-labelled-input__input
  • .ds-sdk-labelled-input__label

Etiqueta de entrada

Elemento de producto

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

Product

Cargando

  • .ds-sdk-loading
  • .ds-sdk-loading__spinner
  • .ds-sdk-loading__spinner-label

Cargando indicador

recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055