DocumentatieCommerceLive Search

Widget pagina met productaanbiedingen

Laatst bijgewerkt: 11 mei 2026

Gemaakt voor:

  • Admin

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.

NOTE
Als u van de afgekeurde Adapter van het Onderzoek migreert, zie de ​ migratiegids ​ voor gedetailleerde begeleiding op scenario's, eerste vereisten, en geleidelijke instructies.

De PLP-widget inschakelen:

  1. Ga in Adobe Commerce Admin naar Opslagruimten → Settings → Configuration.
  2. Klik in de linkernavigatie op Live Search > Storefront Features .
  3. Klik op de sectie Storefront Features .
  4. Set Enable Product Listing Widget = Ja
  5. Config opslaan
  6. Maak desgevraagd de cache leeg (ga naar Systeem > Gereedschappen > Cachebeheer > Flush Magento Cache ).
IMPORTANT
Wanneer Live Search Product Listing Page Widget is ingeschakeld, kan de richting van de sorteervolgorde op een pagina met productlijsten niet worden gewijzigd.

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.

WARNING
Als u de PLP-widget aanpast met behulp van de code in het antwoord, bent u verantwoordelijk voor het onderhoud en eventuele benodigde updates. Eventuele nieuwe PLP-widgetfuncties die door Adobe worden vrijgegeven, zijn mogelijk niet compatibel met uw aangepaste implementatie.

Voorbeeld van stijlen

U kunt de blik en het gevoel van PLP widget aanpassen om uw plaats aan te passen gebruikend ​ 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; primaire actieklassen werken niet op een widgetknop. Algemene doelelementen in de CSS worden overgeërfd; button is van toepassing op widgetknoppen.

De gemarkeerde div-elementen 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 : Buitenste div
  • .ds-sdk-product-list__grid : Binnenste div

​ Paginering ​

Paginering van de productlijst

  • .ds-plp-pagination

​ Paginering ​

  • .ds-plp-pagination_item

​ het punt van de Paginering ​

  • .ds-plp-pagination_item--current

​ het huidige punt van de Paginering ​

Widgets

  • .ds-widgets : Buitenste div
  • .ds-widgets__actions : Linkerzijkant, binnenste div
  • .ds-widgets__results : Div aan rechterkant binnenste div

​ Resultaten Widget ​

Vervolgkeuzelijst sorteren

  • .ds-sdk-sort-dropdown

​ dropdown van de Sortering ​

  • .ds-sdk-sort-dropdown__button

​ Knoop Dropdown ​

  • .ds-sdk-sort-dropdown__items

​ Punten Dropdown ​

  • .ds-sdk-sort-dropdown__items--item

​ Punt Dropdown ​

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

​ Dropdown geselecteerd punt ​

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

​ Dropdown actieve selectie ​

Facetten

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

​ Facets kopbaltitel ​ {width="350"}

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

🔗 {width="350"} pillen van 0} Facet

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

​ etiket van Facets ​ {width="350"}

  • .ds-plp-facets__list

​ lijst van Facetten ​ {width="350"}

  • .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

​ Input ​

  • .ds-sdk-labelled-input

​ Gelabelde input ​

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

​ etiket van de Input ​

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

​ Ladende indicator ​

De PLP-widget uitschakelen

De PLP-widget uitschakelen:

  1. Ga naar Opslag > Montages > Configuratie > Live Search > Eigenschappen Storefront en de reeks laat het Lijst van het Product toe Widgets aan “Nr”.
  2. Selecteer sparen Config om het plaatsen te bewaren.
recommendation-more-help
commerce-help-live-search