Widget pagina met productaanbiedingen

Documentatie Commerce Live Search Handleiding

Last update: Wed May 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:
Zoeken

Gemaakt voor:

Beheerder

De Live Search Product Listing Page Widget (PLP) gebruikt het Commerce Services-platform om een pagina met producten met een presterende, doorzoekbare en facetbare aanbieding te maken. In dit onderwerp wordt beschreven hoe u de PLP-widget kunt inschakelen en opmaken.

Wanneer de Live Search de dienst wordt geïnstalleerd, wordt de standaardonderzoeksfunctionaliteit omgezet in Live Search automatisch.

De Live Search PLP-widget is standaard ingeschakeld voor nieuwe installaties. Als u een upgrade uitvoert Live Search en de PLP-widget al is uitgeschakeld, zal dit zo blijven.

IMPORTANT

Wanneer de Live Search Product Listing Page Widget is ingeschakeld, kan de richting van de sorteervolgorde op een pagina met productlijsten niet worden gewijzigd.

De PLP-widget uitschakelen:

Ga naar Winkels > Instellingen > Configuratie > Live Search > Storefront-functies en instellen Widgets productlijst inschakelen naar "Nee".
Selecteren Config opslaan om de instelling op te slaan.

De PLP-widget biedt een aantal functies die op een doorzoekbare productpagina worden verwacht. Deze omvatten:

Filteren op kenmerken
Ondersteuning voor kleurstalen
Toevoegen aan winkelwagentje
Ondersteuning voor meerdere talen
Prijsschuifregelaars

Zie voor informatie over hoe u de PLP-widget kunt aanpassen aan de bovenstaande functies storefront-product-listing-page Lees mij in het volgende repo.

Voorbeeld van stijlen

U kunt het uiterlijk van de PLP-widget aanpassen aan uw site met CSS.

NOTE

Elementen met aangepaste klassen binnen een Adobe Commerce-thema worden niet overgeërfd. Deze elementen moeten door hun specifieke klasse worden gericht om de douaneklassen aan te passen; de primaire actieklassen zullen niet aan een widgetknoop werken.
Algemene doelelementen in de CSS worden overgeërfd; button is van toepassing op widgetknoppen.

De gemarkeerde div's bevatten de doelklasse ds-sdk-product-item__product-name.

Paginering

Pas de productnaam aan door een regel toe te voegen die in hoofdletters wordt geschreven.

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

Paginering

CSS-klassen

Productlijst

.ds-sdk-product-list: Div buiten
.ds-sdk-product-list__grid: div binnen

Paginering

Paginering van de productlijst

.ds-plp-pagination

.ds-plp-pagination_item

.ds-plp-pagination_item--current

Widgets

.ds-widgets: Div buiten
.ds-widgets__actions: binnenste div aan linkerkant
.ds-widgets__results: Div aan rechterkant binnenste div

Resultaten van widget

Vervolgkeuzelijst sorteren

.ds-sdk-sort-dropdown

Vervolgkeuzelijst sorteren

.ds-sdk-sort-dropdown__button

Knop Vervolgkeuzelijst

.ds-sdk-sort-dropdown__items

Vervolgkeuzelijsten

.ds-sdk-sort-dropdown__items--item

Vervolgitem

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

Geselecteerd item neerzetten

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

Actieve selectie verslepen

Facetten

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

Titel van koptekst met facetten

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

Vullingen met facetten

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

Facets, label

.ds-plp-facets__list

Lijst met gezichten

.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

Invoer

.ds-sdk-labelled-input

Gelabelde invoer

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

Invoerlabel

Product-item

.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