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
color
om 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
{width="350"} pillen van 0} Facet
.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
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.