Widget de page de liste de produits

Le Live Search Product Listing Page Widget (PLP) utilise la plateforme Commerce Services pour fournir une page de liste de produits performante, indexable et facettable. Cette rubrique décrit comment activer et mettre en forme le widget PLP.

Activation du widget PLP

Lorsque la variable Live Search est installé, la fonctionnalité de recherche par défaut est convertie en Live Search automatiquement.
Le widget PLP doit être activé dans Admin.

  1. Accédez à Magasins > Paramètres > Configuration > Live Search > Fonctionnalités de Storefront et défini Activation des widgets de liste de produits à "Oui".
  2. Sélectionner Enregistrer la configuration pour enregistrer le paramètre.

Exemple de style

Vous pouvez personnaliser l’aspect du widget PLP pour qu’il corresponde à votre site à l’aide de CSS.

REMARQUE

Les éléments avec des classes personnalisées dans un thème Adobe Commerce ne sont pas hérités. Ces éléments doivent être ciblés par leur classe spécifique pour correspondre aux classes personnalisées. Les classes d’action Principales ne fonctionneront pas sur un bouton de widget.
Les éléments ciblés génériques dans le CSS seront hérités ; button s’applique aux boutons de widget.

Les divisions en surbrillance contiennent la classe cible ds-sdk-product-item__product-name.

Pagination

Personnalisez le nom du produit en ajoutant une règle pour le mettre en majuscules.

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

Pagination

Classes CSS

Liste de produits

  • .ds-sdk-product-list: Div externe
  • .ds-sdk-product-list__grid: Div interne

Pagination

Pagination de la liste de produits

  • .ds-plp-pagination

Pagination

  • .ds-plp-pagination_item

Élément de pagination

  • .ds-plp-pagination_item--current

Pagination de l’élément actif

Widgets

  • .ds-widgets: Div externe
  • .ds-widgets__actions: Diviseur interne du côté gauche
  • .ds-widgets__results: Diviseur interne du côté droit

Résultats du widget

Liste déroulante Trier

  • .ds-sdk-sort-dropdown

Liste déroulante Trier

  • .ds-sdk-sort-dropdown__button

Bouton Liste déroulante

  • .ds-sdk-sort-dropdown__items

Éléments déroulants

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

Élément de liste déroulante

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

Menu déroulant de l’élément sélectionné

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

Principale sélection de liste déroulante

Facettes

  • .ds-plp-facets
  • .ds-plp-facets__header
  • .ds-plp-facets__header_title
  • .ds-plp-facets__header__clear-all
Titre de l’en-tête Facettes
  • .ds-plp-facets__pills
  • .ds-sdk-pill
Facettes
  • .ds-sdk-pill__label
  • .ds-sdk-pill__cta
Libellé des facettes
  • .ds-plp-facets__list
Liste des facettes
  • .ds-sdk-input
  • .ds-sdk-input__label
  • .ds-sdk-input__options
  • .ds-sdk-input_fieldset_show-more

Entrée

  • .ds-sdk-labelled-input

Entrée étiquetée

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

Libellé d'entrée

Élément de produit

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

Produit

Chargement

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

Indicateur de chargement

Sur cette page