DokumentationHandelLive Search Användarhandbok

Sidwidget för produktlista

Last update: Fri Feb 21 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Administratör

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

Aktivera PLP-widgeten

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

PLP-widgeten Live Search är aktiverad som standard för nya installationer. Om du uppgraderar Live Search och PLP-widgeten redan har inaktiverats, förblir det 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 vara stavat color för att koden ska kunna valideras korrekt.

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

Information om hur du anpassar PLP-widgeten för att hantera ovanstående funktioner finns i storefront-product-listing-page Viktigt i följande databas. Viktigt i den här databasen innehåller ett exempel på hur du anpassar PLP-widgeten och distribuerar anpassningarna till din plats.

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 PLP-widgetfunktioner som Adobe-releaser kan vara inkompatibla med din anpassade implementering.

Exempel på format

Du kan anpassa utseendet och känslan för PLP-widgeten så att den matchar webbplatsen 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 i CSS ärvs; button gäller 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

Sidnumrering av aktuellt objekt

Widgetar

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

Widget-resultat

Sortera-listrutan

  • .ds-sdk-sort-dropdown

Sorteringslistrutan

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

Fasetter

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

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

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

Faktablad {width="350"}

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

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

Etiketterade indata

  • .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 Store > Inställningar > Konfiguration > Live Search > StoreFront Features och ställ in Aktivera produktlistwidgetar på Nej.
  2. Välj Spara konfiguration om du vill spara inställningen.
recommendation-more-help
8eedb3c4-09d2-4e4f-917b-524833fc6b4f