Widget „Produktlistenseite“

Letzte Aktualisierung: 21. Februar 2025

Themen:
Durchsuchen

Erstellt für:

Admin

Das Live Search Product Listing Page Widget (PLP) verwendet die Commerce Services-Plattform, um eine leistungsstarke, durchsuchbare und facettenfähige 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.

Das Live Search PLP-Widget ist bei Neuinstallationen standardmäßig aktiviert. Wenn Sie ein Upgrade von Live Search durchführen und das PLP-Widget bereits deaktiviert wurde, wird es so bleiben.

IMPORTANT

Wenn die Live Search Product Listing Page Widget aktiviert ist, kann die Sortierreihenfolge auf einer Produktlistenseite nicht geändert werden.

Das PLP-Widget bietet die folgenden vordefinierten Funktionen:

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 vordefinierten Funktionen 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 mit (CSS) an Ihre anpassen.

NOTE

Elemente mit benutzerdefinierten Klassen in einem Adobe Commerce-Design werden nicht vererbt. Diese Elemente müssen durch ihre spezifische Klasse angesprochen werden, damit sie mit den benutzerdefinierten Klassen übereinstimmen. Primäre Aktionsklassen funktionieren nicht auf einer Widget-Schaltfläche. 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 sie 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

.ds-plp-pagination_item

.ds-plp-pagination_item--current

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

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

.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

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:

Gehen Sie zu Stores > Einstellungen > Konfiguration > Live Search > Storefront-Funktionen und setzen Sie Produktlisten-Widgets aktivieren auf „Nein“.
Wählen Konfiguration speichern um die Einstellung zu speichern.

recommendation-more-help