DocumentaçãoCommerce“Guia do Live Search”

Widget da página de listagem de produtos

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

Criado para:

  • undefined

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.

Recursos do widget

O widget PLP fornece os seguintes recursos prontos para uso:

  • Botões Adicionar ao carrinho - Disponível somente para produtos simples.
  • Várias imagens por produto — a imagem pode mudar quando uma cor diferente é escolhida para um produto configurável.
  • Suporte para amostras de cores - Observe que o atributo de cor deve ser escrito color para que o código seja validado corretamente.

Personalização do widget

Além dos recursos prontos do widget PLP, você pode personalizar ainda mais o widget para incluir os seguintes recursos:

  • Filtrar por atributos
  • 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.

WARNING
Se você personalizar o widget PLP usando o código disponível no repositório, será responsável pela manutenção e pelas atualizações necessárias. Quaisquer novos recursos de widget PLP que o Adobe lança podem ser incompatíveis com sua implementação personalizada.

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

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

Pílulas faciais

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

Rótulo de facetas

  • .ds-plp-facets__list

Lista de aspectos

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

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