DocumentaciónCommerce“Guía de Live Search”

Widget de página de lista de productos

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Administrador

Live Search Product Listing Page Widget (PLP) utiliza la plataforma de servicios de Commerce 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

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

El widget PLP Live Search está habilitado de manera predeterminada para las nuevas instalaciones. Si está actualizando Live Search y el widget PLP ya se ha desactivado, seguirá siéndolo.

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

Funciones de widget

El widget PLP proporciona las siguientes funciones integradas:

  • Botones Añadir al carrito: disponible solo para productos simples.
  • Varias imágenes por producto: la imagen puede cambiar cuando se elige un color diferente para un producto configurable.
  • Compatibilidad con muestras de color: tenga en cuenta que el atributo de color debe escribirse color para que el código se valide correctamente.

Personalización del widget

Además de las funciones integradas del widget PLP, puede personalizarlo aún más para incluir las siguientes funciones:

  • Filtrado por atributos
  • Compatibilidad con varios idiomas
  • Reguladores de precios

Para obtener información sobre cómo personalizar el widget PLP para que administre las funciones anteriores, consulte el archivo léame storefront-product-listing-page en el siguiente repositorio. El archivo léame de este repositorio proporciona un ejemplo de cómo personalizar el widget PLP e implementar esas personalizaciones en el sitio.

WARNING
Si personaliza el widget PLP mediante el código disponible en el repositorio, usted es responsable del mantenimiento y de las actualizaciones necesarias. Cualquier nueva función del widget PLP que las versiones de Adobe puedan ser incompatibles con la implementación personalizada.

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 de orden

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

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

Pastillas Facet

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

Etiqueta de facetas

  • .ds-plp-facets__list

Lista de facetas

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

Producto

Cargando

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

Indicador de carga

Desactivación del widget PLP

Para desactivar el widget PLP:

  1. Vaya a Tiendas > Configuración > Configuración > Live Search > Características de la tienda y establezca Habilitar widgets de lista de productos en "No".
  2. Seleccione Guardar configuración para guardar la configuración.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055