Sidwidget för produktlista

The Live Search Product Listing Page Widget (PLP) använder Commerce Services-plattformen för att tillhandahålla en utförlig, sökbar och faktabaserad produktlistsida. I det här avsnittet beskrivs hur du aktiverar och formaterar PLP-widgeten.

Aktivera PLP-widgeten

När Live Search tjänsten är installerad, standardsökfunktionen konverteras till Live Search automatiskt.

The Live Search PLP-widgeten är aktiverad som standard för nya installationer. Om du uppgraderar Live Search och PLP-widgeten redan har stängts av, kommer att förbli så.

IMPORTANT
När Live Search Product Listing Page Widget är aktiverat går det inte att ändra sorteringsordningen på en produktlistsida.

Widgetfunktioner

PLP-widgeten har följande färdiga funktioner:

  • Knapparna Lägg till i kundvagnen - endast för enkla produkter.
  • Flera bilder per produkt - Bilden kan ändras när en annan färg väljs för en konfigurerbar produkt.
  • Stöd för färgrutor - Observera att färgattributet måste stavas color för att koden ska kunna valideras.

Anpassa widgeten

Utöver de färdiga funktionerna i PLP-widgeten kan du anpassa widgeten ytterligare och inkludera följande funktioner:

  • Filtrera efter attribut
  • Stöd för flera språk
  • Prisreglage

Mer information om hur du anpassar PLP-widgeten för att hantera ovanstående funktioner finns i storefront-product-listing-page Viktigt i följande repo.

WARNING
Om du anpassar PLP-widgeten med koden som finns i rapporten ansvarar du för underhållet och de uppdateringar som behövs. Alla nya funktioner i PLP-widgeten som Adobe kan vara inkompatibla med din anpassade implementering.

Exempel på format

Du kan anpassa utseende och känsla för PLP-widgeten så att den passar din webbplats med CSS.

NOTE
Element med anpassade klasser inom ett Adobe Commerce-tema ärvs inte. Dessa element måste ha en specifik klass som mål för att matcha de anpassade klasserna. De primära åtgärdsklasserna fungerar inte med en widgetknapp. Allmänna målelement inom CSS ärvs. button används för widgetknappar.

De markerade diven innehåller målklassen ds-sdk-product-item__product-name.

Sidnumrering

Anpassa produktnamnet genom att lägga till en regel som gör dem till stora bokstäver.

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

Sidnumrering

CSS-klasser

Produktlista

  • .ds-sdk-product-list: Yttre div
  • .ds-sdk-product-list__grid: Inre div

Sidnumrering

Sidnumrering av produktlista

  • .ds-plp-pagination

Sidnumrering

  • .ds-plp-pagination_item

Sidnumreringsobjekt

  • .ds-plp-pagination_item--current

Aktuellt sidnumreringsobjekt

Widgetar

  • .ds-widgets: Yttre div
  • .ds-widgets__actions: Inre div på vänster sida
  • .ds-widgets__results: Inre div på höger sida

Widgetresultat

Sortera-listrutan

  • .ds-sdk-sort-dropdown

Sortera-listrutan

  • .ds-sdk-sort-dropdown__button

Nedrullningsknapp

  • .ds-sdk-sort-dropdown__items

Listruteobjekt

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

Listruteobjekt

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

Listruta för markerat objekt

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

Aktiv markering i listrutan

Fasetter

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

Rubrik för fack

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

Faktablad

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

Etikett för ansikten

  • .ds-plp-facets__list

Fasettlista

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

Indata

  • .ds-sdk-labelled-input

Indata med etiketter

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

Indataetikett

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

Läser in

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

Läser in indikator

Inaktivera PLP-widgeten

Så här inaktiverar du PLP-widgeten:

  1. Gå till Lager > Inställningar > Konfiguration > Live Search > Adobe Storefront-funktioner och ange Aktivera widgetar för produktlistor till "Nej".
  2. Välj Spara konfiguration för att spara inställningen.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055