Widget de page de liste de produits

Dernière mise à jour : 21 février 2025
  • Rubriques :

Créé pour :

  • Administration

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

Activation du widget PLP

Lors de l’installation du service Live Search, la fonctionnalité de recherche par défaut est automatiquement convertie en Live Search.

Le widget PLP Live Search est activé par défaut pour les nouvelles installations. Si vous effectuez une mise à niveau Live Search et que le widget PLP a déjà été désactivé, il le restera.

IMPORTANT
Lorsque le Live Search Product Listing Page Widget est activé, le sens de l’ordre de tri sur une page de liste de produits ne peut pas être modifié.

Fonctionnalités du widget

Le widget PLP fournit les fonctionnalités prêtes à l’emploi suivantes :

  • Boutons Ajouter au panier - Disponible uniquement pour les produits simples.
  • Plusieurs images par produit : l’image peut changer lorsqu’une couleur différente est choisie pour un produit configurable.
  • Prise en charge des échantillons de couleurs : notez que l’attribut de couleur doit être orthographié color pour que le code puisse le valider correctement.

Personnalisation du widget

Outre les fonctionnalités prêtes à l’emploi du widget PLP, vous pouvez personnaliser davantage le widget pour inclure les fonctionnalités suivantes :

  • Filtrage par attributs
  • Prise en charge de plusieurs langues
  • Curseurs de prix

Pour plus d’informations sur la personnalisation du widget PLP pour gérer les fonctionnalités ci-dessus, consultez le fichier lisez-moi storefront-product-listing-page dans le référentiel suivant. Le fichier Lisez-moi de ce référentiel fournit un exemple de personnalisation du widget PLP et de déploiement de ces personnalisations sur votre site.

WARNING
Si vous personnalisez le widget PLP à l’aide du code disponible dans le référentiel, vous êtes responsable de la maintenance et des mises à jour nécessaires. Toute nouvelle fonctionnalité de widget PLP publiée par Adobe peut être incompatible avec votre implémentation personnalisée.

Exemple de style

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

NOTE
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 sont hérités ; button s’applique aux boutons de widget.

Les balises div mises en surbrillance contiennent la classe cible ds-sdk-product-item__product-name.

Pagination

Personnalisez le nom du produit en ajoutant une règle pour les 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

Élément actif de pagination

Widgets

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

Résultats du widget

Liste déroulante de tri

  • .ds-sdk-sort-dropdown

Liste déroulante Tri

  • .ds-sdk-sort-dropdown__button

Bouton déroulant

  • .ds-sdk-sort-dropdown__items

Éléments de la liste déroulante

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

Élément de liste déroulante

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

Liste déroulante de l’élément sélectionné

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

Sélection active de la 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 des facettes

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

Pilules à facettes

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

libellé Facettes

  • .ds-plp-facets__list

Liste des facettes

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

Entrée

  • .ds-sdk-labelled-input

Entrée étiquetée

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

Libellé de saisie