Widget da página de listagem de produtos

A variável Live Search Product Listing Page Widget O (PLP) usa a plataforma de Serviços da Commerce para fornecer uma página de listagem de produtos com desempenho, pesquisável e compatível com facetas. Este tópico descreve como ativar e estilizar o widget PLP.

Ativar o dispositivo PLP

Quando a variável Live Search estiver instalado, a funcionalidade de pesquisa padrão será convertida em Live Search automaticamente.

A variável Live Search O widget PLP é habilitado por padrão para novas instalações. Se você estiver atualizando Live Search e o widget PLP já foi desligado, ele permanecerá assim.

IMPORTANT
Quando a variável Live Search Product Listing Page Widget estiver ativado, a direção da ordem de classificação em uma página da lista de produtos não poderá ser alterada.

Desabilitar o dispositivo PLP

Para desativar o dispositivo PLP:

  1. Ir para Lojas > Configurações > Configuração > Live Search > Recursos da loja e defina Ativar widgets de listagem de produtos para "Não".
  2. Selecionar Salvar configuração para salvar a configuração.

Recursos do widget

O widget PLP fornece uma variedade de recursos esperados em uma página de produto pesquisável. Isso inclui:

  • Filtrar por atributos
  • Suporte para amostras de cores
  • Funcionalidade Adicionar ao carrinho
  • Suporte a vários idiomas
  • Controles deslizantes de preço

Para obter informações sobre como personalizar o widget PLP para lidar com os recursos acima, consulte o storefront-product-listing-page leia-me no seguinte repo.

Exemplo de estilo

Você pode personalizar a aparência do widget PLP para corresponder ao seu site usando CSS.

NOTE
Elementos com classes personalizadas em um tema do Adobe Commerce não são herdados. Esses elementos devem ser direcionados por sua classe específica para corresponder às classes personalizadas; as classes de ação principais não funcionarão em um botão de widget.
Os elementos direcionados genéricos dentro do CSS são herdados; button aplica-se a botões de widget.

Os divs destacados contêm a classe de destino ds-sdk-product-item__product-name.

Paginação

Personalize o nome do produto adicionando uma regra para torná-lo em letras maiúsculas.

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

Paginação

Classes CSS

Lista de produtos

  • .ds-sdk-product-list: div externa
  • .ds-sdk-product-list__grid: div interna

Paginação

Paginação de lista de produtos

  • .ds-plp-pagination

Paginação

  • .ds-plp-pagination_item

Item de paginação

  • .ds-plp-pagination_item--current

Paginação do item atual

Widgets

  • .ds-widgets: div externa
  • .ds-widgets__actions: div interna do lado esquerdo
  • .ds-widgets__results: div interna do lado direito

Resultados do widget

Lista suspensa Classificar

  • .ds-sdk-sort-dropdown

Lista suspensa Classificar

  • .ds-sdk-sort-dropdown__button

Botão suspenso

  • .ds-sdk-sort-dropdown__items

Itens suspensos

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

Item suspenso

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

Lista suspensa de itens selecionados

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

Seleção ativa suspensa

Facetas

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

Título do cabeçalho do Facets {width="350"}

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

Pílulas faciais {width="350"}

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

Rótulo de facetas {width="350"}

  • .ds-plp-facets__list

Lista de aspectos {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 rotulada

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

Rótulo de entrada

Item do produto

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

Produto

Carregando

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

Carregando indicador

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