DokumentationCommerceLive Search

Sidwidget för produktlista

Senast uppdaterad: 12 maj 2026

Skapat för:

  • Admin

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

NOTE
Om du migrerar från det borttagna sökkortet finns mer information i migreringsguiden om scenarier, förutsättningar och steg-för-steg-instruktioner.

Aktivera PLP-widgeten:

  1. Gå till Lager → Inställningar → Konfiguration i Adobe Commerce Admin.
  2. Klicka på Live Search > Storefront Features i den vänstra navigeringen.
  3. Klicka på avsnittet Storefront Features.
  4. Ange Enable Product Listing Widget = Ja
  5. Spara konfiguration
  6. Om du uppmanas till det tömmer du cachen (gå till System > Verktyg > Cachehantering > Flush Magento Cache).
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. primära åtgärdsklasser fungerar inte med en widgetknapp. Allmänna målelement inom 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
commerce-help-live-search