DocumentaçãoCommerceLive Search

Widget da página de listagem de produtos

Última atualização: 2 de setembro de 2026

Criado para:

  • Admin

O Live Search Product Listing Page Widget (PLP) usa a Plataforma de Serviços da Commerce para fornecer uma página de listagem de produtos com desempenho, pesquisável e facetável. 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.

Novas instalações habilitam o widget PLP Live Search por padrão.

Se você atualizar Live Search enquanto o widget PLP estiver desabilitado, ele permanecerá desabilitado após a atualização.

NOTE
Se você estiver migrando do Adaptador de Pesquisa obsoleto, consulte o guia de migração para obter orientações detalhadas sobre cenários, pré-requisitos e instruções passo a passo.

Para ativar o dispositivo PLP:

  1. No Administrador do Adobe Commerce, acesse Lojas → Configurações → Configuração.
  2. Na navegação à esquerda, clique em Live Search > Storefront Features.
  3. Clique na seção Storefront Features.
  4. Definir Enable Product Listing Widget = Sim
  5. Salvar configuração
  6. Se solicitado, limpe o cache (vá para Sistema > Ferramentas > Gerenciamento de cache > Flush Magento Cache).
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 padrão:

  • 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 padrão 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 lançados pelo Adobe 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. Direcione esses elementos por sua classe específica para corresponder às classes personalizadas; as classes de ação principais não são eficazes 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 {width="350"}

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

pílulas facetadas {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

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
commerce-help-live-search