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