Widget pagina elenco prodotti

Ultimo aggiornamento: 21 febbraio 2025

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.

Abilitazione del 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.

Funzioni widget

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.

Personalizzazione del widget

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

Paginazione

  • .ds-plp-pagination_item

Elemento di paginazione

  • .ds-plp-pagination_item--current

Elemento corrente di paginazione

Widget

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

Facet

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

Titolo intestazione facet

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

Pillole sfaccettate

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

Etichetta facet

  • .ds-plp-facets__list

Elenco facet

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