DokumentationCommerce„Handbuch zu Live Search“

Seiten-Widget "Produktliste"

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

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.

Widget-Funktionen

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

Paginierung

  • .ds-plp-pagination_item

Paginierungselement

  • .ds-plp-pagination_item--current

Paginierung des aktuellen Elements

Widgets

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

Widget results

Sortieren-Dropdown

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

Facets

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

Kopfzeilentitel "Facets" {width="350"}

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

Facettentabletten {width="350"}

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

Facets-Bezeichnung {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

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:

  1. Wechseln Sie zu Stores > Einstellungen > Konfiguration > Live Search > Storefront-Funktionen und setzen Sie Enable Product Listing Widgets auf "Nein".
  2. Wählen Sie Konfiguration speichern aus, um die Einstellung zu speichern.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055