Widget pagina met productaanbiedingen

De Live Search Product Listing Page Widget (PLP) gebruikt het platform van de Diensten van de Handel om een presterende, doorzoekbare, en facet-able pagina van de productlijst te verstrekken. In dit onderwerp wordt beschreven hoe u de PLP-widget kunt inschakelen en opmaken.

De PLP-widget inschakelen

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.

De PLP-widget uitschakelen:

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

Widget-functies

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

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

Paginering

  • .ds-plp-pagination_item

Pagineringsitem

  • .ds-plp-pagination_item--current

Huidig item pagineren

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
w-350
Titel van koptekst met facetten
  • .ds-plp-facets__pills
  • .ds-sdk-pill
w-350
Vullingen met facetten
  • .ds-sdk-pill__label
  • .ds-sdk-pill__cta
w-350
Facets, label
  • .ds-plp-facets__list
w-350
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

Product

Laden

  • .ds-sdk-loading
  • .ds-sdk-loading__spinner
  • .ds-sdk-loading__spinner-label

Indicator laden

recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055