DokumentationCommerceLive Search

Widget „Produktlistenseite“

Letzte Aktualisierung: 2. September 2026

Erstellt für:

  • Admin

Das Live Search Product Listing Page Widget (PLP) verwendet die Commerce Services-Plattform, um eine leistungsstarke, durchsuchbare und factable Produktlistenseite bereitzustellen. In diesem Thema wird beschrieben, wie Sie das PLP-Widget aktivieren und gestalten.

Aktivieren des PLP-Widgets

Wenn der Live Search-Service installiert ist, wird die Standardsuchfunktion automatisch in Live Search konvertiert.

Bei Neuinstallationen ist das Live Search PLP-Widget standardmäßig aktiviert.

Wenn Sie Live Search aktualisieren, während das PLP-Widget deaktiviert ist, bleibt es nach dem Upgrade deaktiviert.

NOTE
Wenn Sie vom veralteten Suchadapter migrieren, finden Sie im Migrationshandbuch detaillierte Anleitungen zu Szenarien, Voraussetzungen und schrittweise Anweisungen.

Aktivieren des PLP-Widgets:

  1. Wechseln Sie in Ihrem Adobe Commerce-Administrator zu Stores → Einstellungen → Konfiguration.
  2. Klicken Sie in der linken Navigation auf Live Search > Storefront Features.
  3. Klicken Sie auf den Abschnitt Storefront Features .
  4. Enable Product Listing Widget = Ja
  5. Konfiguration speichern
  6. Wenn Sie dazu aufgefordert werden, leeren Sie den Cache (navigieren Sie zu System > Tools > Cache-Verwaltung > Flush Magento Cache).
IMPORTANT
Wenn die Live Search Product Listing Page Widget aktiviert ist, kann die Sortierreihenfolge auf einer Produktlistenseite nicht geändert werden.

Widget-Funktionen

Das PLP-Widget bietet die folgenden Standardfunktionen:

  • Schaltflächen zum Warenkorb hinzufügen - Nur für einfache Produkte verfügbar.
  • Mehrere Bilder pro Produkt - Das Bild kann sich ändern, wenn für ein konfigurierbares Produkt eine andere Farbe ausgewählt wird.
  • Unterstützung für Farbfelder - Beachten Sie, dass das Farbattribut color geschrieben werden muss, damit der Code ordnungsgemäß validiert werden kann.

Anpassen des Widgets

Zusätzlich zu den Standardfunktionen des PLP-Widgets können Sie das Widget weiter anpassen, um die folgenden Funktionen einzuschließen:

  • Filtern nach Attributen
  • Unterstützung mehrerer Sprachen
  • Preisregler

Informationen zum Anpassen des PLP-Widgets für die oben genannten Funktionen finden Sie in der storefront-product-listing-page Readme-Datei im folgenden Repository. Die Readme-Datei in diesem Repository enthält ein Beispiel für die Anpassung des PLP-Widgets und die Bereitstellung dieser Anpassungen auf Ihrer Site.

WARNING
Wenn Sie das PLP-Widget mithilfe des im Repository verfügbaren Codes anpassen, sind Sie für die Wartung und alle erforderlichen Aktualisierungen verantwortlich. Alle neuen PLP-Widget-Funktionen, die Adobe veröffentlicht, sind möglicherweise nicht mit Ihrer benutzerdefinierten Implementierung kompatibel.

Beispiel für einen Stil

Sie können das Erscheinungsbild des PLP-Widgets mithilfe von CSS) an Ihre Website ​.

NOTE
Elemente mit benutzerdefinierten Klassen in einem Adobe Commerce-Design werden nicht vererbt. Targeting dieser Elemente anhand ihrer spezifischen Klasse, damit sie mit den benutzerdefinierten Klassen übereinstimmen. Primäre Aktionsklassen sind auf einer Widget-Schaltfläche nicht wirksam. Generische zielgerichtete Elemente innerhalb des CSS werden übernommen. button gilt für Widget-Schaltflächen.

Die hervorgehobenen DIVs enthalten die ds-sdk-product-item__product-name der Zielklasse.

Paginierung

Passen Sie den Produktnamen an, indem Sie eine Regel hinzufügen, um ihn in Großbuchstaben zu ändern.

.ds-sdk-product-item__product-name {
 text-transform: uppercase;
}

Paginierung

CSS-Klassen

Produktliste

  • .ds-sdk-product-list: Äußeres div
  • .ds-sdk-product-list__grid: Innerer div

Paginierung

Seitenumbruch für Produktliste

  • .ds-plp-pagination

Paginierung

  • .ds-plp-pagination_item

Paginierungselement

  • .ds-plp-pagination_item--current

Paginierung des aktuellen Elements

Widgets

  • .ds-widgets: Äußeres div
  • .ds-widgets__actions: Innerer div auf der linken Seite
  • .ds-widgets__results: Rechter innerer Div

Widget-Ergebnisse

  • .ds-sdk-sort-dropdown

Dropdown sortieren

  • .ds-sdk-sort-dropdown__button

Dropdown-Schaltfläche

  • .ds-sdk-sort-dropdown__items

Dropdown-Elemente

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

Dropdown-Element

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

Dropdown-Element ausgewählt

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

Dropdown-Auswahl aktiv

Facetten

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

Facetten-Header-Titel {width="350"}

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

Facettenpille {width="350"}

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

Facettenbezeichnung {width="350"}

  • .ds-plp-facets__list

Facettenliste {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

Eingabe

  • .ds-sdk-labelled-input

Beschriftte Eingabe

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

Beschriftung eingeben

Produktartikel

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

Produkt

Wird geladen

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

Ladeanzeige

Deaktivieren des PLP-Widgets

Deaktivieren des PLP-Widgets:

  1. Gehen Sie zu Stores > Einstellungen > Konfiguration > Live Search > Storefront-Funktionen und setzen Sie Produktlisten-Widgets aktivieren auf „Nein“.
  2. Wählen Konfiguration speichern um die Einstellung zu speichern.
recommendation-more-help
commerce-help-live-search