Widget da página de listagem de produtos
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.
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.
Exemplo de estilo
Você pode personalizar a aparência do widget PLP para corresponder ao seu site usando o CSS.
button
aplica-se aos botões do widget.Os divs realçados contêm a classe de destino ds-sdk-product-item__product-name
.
Personalize o nome do produto adicionando uma regra para torná-lo em letras maiúsculas.
.ds-sdk-product-item__product-name {
text-transform: uppercase;
}
Classes CSS
Lista de produtos
.ds-sdk-product-list
: div externa.ds-sdk-product-list__grid
: div interna
Paginação de lista de produtos
.ds-plp-pagination
.ds-plp-pagination_item
.ds-plp-pagination_item--current
Widgets
.ds-widgets
: div externa.ds-widgets__actions
: div interna do lado esquerdo.ds-widgets__results
: div interna do lado direito
Lista suspensa Classificar
.ds-sdk-sort-dropdown
.ds-sdk-sort-dropdown__button
.ds-sdk-sort-dropdown__items
.ds-sdk-sort-dropdown__items--item
.ds-sdk-sort-dropdown__items--item-selected
.ds-sdk-sort-dropdown__items--item-active
Facetas
.ds-plp-facets
.ds-plp-facets__header
.ds-plp-facets__header_title
.ds-plp-facets__header__clear-all
{width="350"}
.ds-plp-facets__pills
.ds-sdk-pill
{width="350"}
.ds-sdk-pill__label
.ds-sdk-pill__cta
{width="350"}
.ds-plp-facets__list
{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
.ds-sdk-labelled-input
.ds-sdk-labelled-input__input
.ds-sdk-labelled-input__label
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
Carregando
.ds-sdk-loading
.ds-sdk-loading__spinner
.ds-sdk-loading__spinner-label
Desabilitar o dispositivo PLP
Para desativar o dispositivo PLP:
- Vá para Lojas > Configurações > Configuração > Live Search > Recursos de Vitrine e defina Habilitar Widgets de Listagem de Produtos como "Não".
- Selecione Salvar configuração para salvar a configuração.