DocumentaciónCommerce“Guía de Live Search”

Widget de página de lista de productos

Last update: Thu Jun 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Administrador

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.

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 gestionar las funciones anteriores, consulte la storefront-product-listing-page léame en lo siguiente repo.

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

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

Píldoras 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

Product

Cargando

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

Cargando indicador

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.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055