Widget pagina elenco prodotti

Ultimo aggiornamento: 21 febbraio 2025

Argomenti:
Ricerca

Creato per:

Amministratore

Live Search Product Listing Page Widget (PLP) utilizza la piattaforma Commerce Services per fornire una pagina di elenco di prodotti performante, ricercabile e facet-able. In questo argomento viene descritto come abilitare e assegnare uno stile al widget PLP.

Quando il servizio Live Search è installato, la funzionalità di ricerca predefinita viene convertita automaticamente in Live Search.

Il widget PLP Live Search è abilitato per impostazione predefinita per le nuove installazioni. Se si sta aggiornando Live Search e il widget PLP è già stato disattivato, rimarrà tale.

IMPORTANT

Quando Live Search Product Listing Page Widget è abilitato, non è possibile modificare la direzione dell'ordinamento in una pagina dell'elenco prodotti.

Il widget PLP fornisce le seguenti funzioni predefinite:

Pulsanti Aggiungi al carrello - Disponibile solo per prodotti semplici.
Più immagini per prodotto: l’immagine può cambiare quando si sceglie un colore diverso per un prodotto configurabile.
Supporto per i campioni di colore: tieni presente che l'attributo di colore deve essere digitato color affinché il codice possa essere convalidato correttamente.

Oltre alle funzioni predefinite del widget PLP, potete personalizzare ulteriormente il widget per includere le seguenti funzioni:

Filtraggio per attributi
Supporto di più lingue
Cursori prezzo

Per informazioni su come personalizzare il widget PLP per gestire le funzionalità di cui sopra, vedere il file readme storefront-product-listing-page nel seguente repository. Il file readme in questo archivio fornisce un esempio per personalizzare il widget PLP e distribuire tali personalizzazioni nel sito.

WARNING

Se personalizzi il widget PLP utilizzando il codice disponibile nell’archivio, sei responsabile della manutenzione e di tutti gli aggiornamenti necessari. Eventuali nuove funzioni del widget PLP rilasciate da Adobe potrebbero essere incompatibili con l’implementazione personalizzata.

Esempio di stile

Puoi personalizzare l'aspetto del widget PLP in modo che corrisponda al tuo sito utilizzando CSS.

NOTE

Gli elementi con classi personalizzate all’interno di un tema Adobe Commerce non vengono ereditati. Questi elementi devono essere oggetto di targeting da parte della classe specifica per corrispondere alle classi personalizzate; le classi di azione primarie non funzioneranno su un pulsante widget. Gli elementi di destinazione generici all'interno del CSS vengono ereditati; button si applica ai pulsanti widget.

Gli elementi div evidenziati contengono la classe di destinazione ds-sdk-product-item__product-name.

Paginazione

Personalizza il nome del prodotto aggiungendo una regola per renderli maiuscoli.

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

Paginazione

Classi CSS

Elenco prodotti

.ds-sdk-product-list: div esterno
.ds-sdk-product-list__grid: div interno

Paginazione

Paginazione elenco prodotti

.ds-plp-pagination

.ds-plp-pagination_item

.ds-plp-pagination_item--current

.ds-widgets: div esterno
.ds-widgets__actions: div interno lato sinistro
.ds-widgets__results: div interno lato destro

Risultati widget

.ds-sdk-sort-dropdown

Elenco a discesa degli ordini

.ds-sdk-sort-dropdown__button

Pulsante a discesa

.ds-sdk-sort-dropdown__items

Elementi a discesa

.ds-sdk-sort-dropdown__items--item

Elemento a discesa

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

Elemento selezionato a discesa

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

Selezione attiva a discesa

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

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

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

.ds-plp-facets__list

.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

Input

.ds-sdk-labelled-input

Input con etichetta

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

Etichetta input

Elemento prodotto

.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

Prodotto

Caricamento

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

Indicatore di caricamento

Per disattivare il widget PLP:

Vai a Archivi > Impostazioni > Configurazione > Live Search > Funzioni vetrina e imposta Abilita widget elenco prodotti su "No".
Seleziona Salva configurazione per salvare l'impostazione.

recommendation-more-help

Personalizzazione del widget

Esempio di stile