DokumentationHandel”Live Search Användarhandbok”

Sidwidget för produktlista

Last update: Wed May 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Admin

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.

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.

Widgetfunktioner

PLP-widgeten innehåller en rad funktioner som förväntas på en sökbar produktsida. Bland dessa finns:

  • Filtrera efter attribut
  • Stöd för färgrutor
  • Lägg till i kundvagnen
  • 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.

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 {width="350"}

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

Faktablad {width="350"}

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

Etikett för ansikten {width="350"}

  • .ds-plp-facets__list

Fasettlista {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

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

recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055