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.
Esempio di stile
Puoi personalizzare l'aspetto del widget PLP in modo che corrisponda al tuo sito utilizzando CSS.
button
si applica ai pulsanti widget.Gli elementi div evidenziati contengono la classe di destinazione ds-sdk-product-item__product-name
.
Personalizza il nome del prodotto aggiungendo una regola per renderli maiuscoli.
.ds-sdk-product-item__product-name {
text-transform: uppercase;
}
Classi CSS
Elenco prodotti
.ds-sdk-product-list
: div esterno.ds-sdk-product-list__grid
: div interno
Paginazione elenco prodotti
.ds-plp-pagination
.ds-plp-pagination_item
.ds-plp-pagination_item--current
Widget
.ds-widgets
: div esterno.ds-widgets__actions
: div interno lato sinistro.ds-widgets__results
: div interno lato destro
Menu a discesa Ordina
.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
Facet
.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
.ds-sdk-labelled-input
.ds-sdk-labelled-input__input
.ds-sdk-labelled-input__label