Widget pagina met productaanbiedingen
De PLP ( Live Search Product Listing Page Widget ) gebruikt het Commerce Services-platform om een pagina met producten met een uitvoerbare, doorzoekbare en facetbare lijst te maken. In dit onderwerp wordt beschreven hoe u de PLP-widget kunt inschakelen en opmaken.
De PLP-widget inschakelen
Wanneer de service Live Search is geïnstalleerd, wordt de standaardzoekfunctionaliteit automatisch omgezet in Live Search .
De Live Search PLP-widget is standaard ingeschakeld voor nieuwe installaties. Als u Live Search bijwerkt en de PLP-widget al is uitgeschakeld, blijft deze ook actief.
Widget-functies
De PLP-widget beschikt over de volgende functies die niet in de box kunnen worden gebruikt:
- Toevoegen aan winkelwagentjes - Alleen beschikbaar voor eenvoudige producten.
- Meerdere afbeeldingen per product - de afbeelding kan veranderen wanneer een andere kleur wordt gekozen voor een configureerbaar product.
- Ondersteuning voor kleurstalen - Het kleurkenmerk moet zijn gespeld
colorom de code correct te laten valideren.
De widget aanpassen
Naast de functies in de box van de PLP-widget kunt u de widget verder aanpassen en de volgende functies toevoegen:
- Filteren op kenmerken
- Ondersteuning voor meerdere talen
- Prijsschuifregelaars
Voor informatie over hoe te om de widget PLOP aan te passen om de bovengenoemde eigenschappen te behandelen, zie storefront-product-listing-page leest in de volgende bewaarplaats. Het Lees mij-bestand in deze opslagplaats biedt een voorbeeld voor het aanpassen van de PLP-widget en het implementeren van deze aanpassingen op uw site.
Voorbeeld van stijlen
U kunt de blik en het gevoel van PLP widget aanpassen om uw plaats aan te passen gebruikend CSS.
button is van toepassing op widgetknoppen.De gemarkeerde div-elementen bevatten de doelklasse ds-sdk-product-item__product-name .
Pas de productnaam aan door een regel toe te voegen die in hoofdletters wordt geschreven.
.ds-sdk-product-item__product-name {
text-transform: uppercase;
}
CSS-klassen
Productlijst
.ds-sdk-product-list: div buiten.ds-sdk-product-list__grid: div binnen
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 links.ds-widgets__results: Div aan rechterkant binnenste div
Vervolgkeuzelijst sorteren
.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
Facetten
.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-groupds-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
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
Laden
.ds-sdk-loading.ds-sdk-loading__spinner.ds-sdk-loading__spinner-label
De PLP-widget uitschakelen
De PLP-widget uitschakelen:
- Ga naar Opslag > Montages > Configuratie > Live Search > Eigenschappen Storefront en de reeks laat het Lijst van het Product toe Widgets aan "Nr".
- Selecteer sparen Config om het plaatsen te bewaren.