DocumentaçãoCommerce“Guia do Live Search”

Widget da página de listagem de produtos

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

Criado para:

  • undefined

O Live Search Product Listing Page Widget (PLP) usa a plataforma Commerce Services 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 o serviço Live Search é instalado, a funcionalidade de pesquisa padrão é convertida para Live Search automaticamente.

O widget PLP Live Search é habilitado por padrão para novas instalações. Se você estiver atualizando o Live Search e o widget PLP já tiver sido desativado, ele permanecerá assim.

IMPORTANT
Quando o Live Search Product Listing Page Widget está habilitado, a direção da ordem de classificação em uma página de listagem de produtos não pode 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 arquivo readme do storefront-product-listing-page no seguinte repositório. O arquivo readme neste repositório fornece um exemplo de como personalizar o dispositivo PLP e implantar essas personalizações no seu site.

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 o 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 genéricos de destino dentro do CSS são herdados; button aplica-se aos botões do widget.

Os divs realçados 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

Item atual de paginação

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

Classificar lista suspensa

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

Item selecionado na lista suspensa

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

  • .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. Vá para Lojas > Configurações > Configuração > Live Search > Recursos de Vitrine e defina Habilitar Widgets de Listagem de Produtos como "Não".
  2. Selecione Salvar configuração para salvar a configuração.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055