Seiten-Widget "Produktliste"

Dokumentation Commerce „Handbuch zu Live Search“

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Themen:

Erstellt für:

Admin

Die Live Search Product Listing Page Widget (PLP) verwendet die Commerce Services-Plattform, um eine leistungsfähige, durchsuchbare und facettenfähige Produktanlistungsseite bereitzustellen. Hier wird beschrieben, wie Sie das PLP-Widget aktivieren und gestalten.

Aktivieren des PLP-Widgets

Wenn der Live Search -Dienst installiert ist, wird die Standardsuchfunktion automatisch in Live Search umgewandelt.

Das Widget Live Search PLP ist für neue Installationen standardmäßig aktiviert. Wenn Sie Live Search aktualisieren und das PLP-Widget bereits deaktiviert wurde, bleibt dies so.

IMPORTANT

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

Das PLP-Widget bietet die folgenden nativen Funktionen:

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 Farbmuster - Beachten Sie, dass das Farbattribut color geschrieben werden muss, damit der Code ordnungsgemäß validiert wird.

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 unter storefront-product-listing-page readme im folgenden repository. Die Readme in diesem Repository bietet 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 erforderliche Updates verantwortlich. Alle neuen PLP-Widget-Funktionen, die von Adobe veröffentlicht werden, sind möglicherweise nicht mit Ihrer benutzerdefinierten Implementierung kompatibel.

Stilbeispiel

Sie können das Erscheinungsbild des PLP-Widgets so anpassen, dass es mit CSS Ihrer Site entspricht.

NOTE

Elemente mit benutzerdefinierten Klassen innerhalb eines Adobe Commerce-Designs werden nicht vererbt. Diese Elemente müssen von ihrer jeweiligen Klasse angesprochen werden, um mit den benutzerdefinierten Klassen übereinstimmen. Primäre Aktionsklassen funktionieren nicht mit Widget-Schaltflächen. Generische Targeting-Elemente innerhalb des CSS werden übernommen; button gilt für Widget-Schaltflächen.

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

Paginierung

Passen Sie den Produktnamen an, indem Sie eine Regel hinzufügen, um sie in Großbuchstaben zu versetzen.

.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: Inner div

Paginierung

Paginierung von Produktlisten

.ds-plp-pagination

.ds-plp-pagination_item

.ds-plp-pagination_item--current

Widgets

.ds-widgets: Äußeres div
.ds-widgets__actions: Linkes seitliches inneres Div
.ds-widgets__results: Rechtes seitliches inneres Div

Widget results

.ds-sdk-sort-dropdown

Sortieren-Dropdown-Liste

.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

Ausgewähltes Dropdown-Element

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

Aktive Dropdown-Auswahl

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

Kopfzeilentitel "Facets"

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

Facettentabletten

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

Facets-Bezeichnung

.ds-plp-facets__list

Facettenliste

.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

Beschriftte Eingabe

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

Input label

Produktelement

.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

Laden

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

Ladeanzeige

Deaktivieren des PLP-Widgets

So deaktivieren Sie das PLP-Widget:

Wechseln Sie zu Stores > Einstellungen > Konfiguration > Live Search > Storefront-Funktionen und setzen Sie Enable Product Listing Widgets auf "Nein".
Wählen Sie Konfiguration speichern aus, um die Einstellung zu speichern.

recommendation-more-help

1d60634e-b73a-404a-be7a-4a2a36676055