DocumentatieCommerceLive Search Handleiding

Widget pagina met productaanbiedingen

Last update: Sat Nov 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Gemaakt voor:

  • Beheerder

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. U schakelt deze in:

  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; 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-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: div buiten
  • .ds-sdk-product-list__grid: div binnen

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: div buiten
  • .ds-widgets__actions: binnenste div links
  • .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

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

  • .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
8eedb3c4-09d2-4e4f-917b-524833fc6b4f