DokumentationCommerce„Handbuch zu Live Search“

Seiten-Widget "Produktliste"

Last update: Thu Jun 20 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 Produktseite bereitzustellen. Hier wird beschrieben, wie Sie das PLP-Widget aktivieren und gestalten.

Aktivieren des PLP-Widgets

Wenn die Variable Live Search installiert ist, wird die Standardsuchfunktion in Live Search automatisch.

Die Live Search PLP-Widget ist für neue Installationen standardmäßig aktiviert. Wenn Sie ein Upgrade Live Search und das PLP-Widget bereits deaktiviert wurde, bleibt es so.

IMPORTANT
Wenn die Variable 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 geschrieben werden muss color , 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 in der storefront-product-listing-page Lesen Sie die folgenden Informationen: repo.

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 zu Ihrer Site passt, indem Sie CSS.

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 vererbt. 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: Externes 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

Aktuelles Element Paginierung

Widgets

  • .ds-widgets: Externes div
  • .ds-widgets__actions: Linkes seitliches inneres Div
  • .ds-widgets__results: Rechtsseitiges inneres Div

Widget-Ergebnisse

Sortieren-Dropdown

  • .ds-sdk-sort-dropdown

Sortieren-Dropdown

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

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

Dropdown-aktive Auswahl

Facets

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

Facet-Kopfzeilentitel

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

Facettentabletten

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

Facette-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

Eingabe

  • .ds-sdk-labelled-input

Beschriftte Eingabe

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

Eingabebezeichnung

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. Navigieren Sie zu Stores > Einstellungen > Konfiguration > Live Search > Storefront-Funktionen und Enable Product Listing Widgets auf "Nein".
  2. Auswählen Konfiguration speichern , um die Einstellung zu speichern.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055