Dernière mise à jour : 2 septembre 2026

Créé pour :

Administrateur ou administratrice

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

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

Les nouvelles installations activent par défaut le widget PLP Live Search.

Si vous mettez à niveau Live Search alors que le widget PLP est désactivé, il reste désactivé après la mise à niveau.

NOTE

Si vous migrez depuis l’adaptateur de recherche obsolète, consultez le guide de migration pour obtenir des conseils détaillés sur les scénarios, les conditions préalables et des instructions détaillées.

Pour activer le widget PLP, procédez comme suit :

Dans votre administrateur Adobe Commerce, accédez à Magasins → Paramètres → Configuration.
Dans le volet de navigation de gauche, cliquez sur Live Search > Storefront Features.
Cliquez sur la section Storefront Features .
Définir Enable Product Listing Widget = Oui
Enregistrer la configuration
Si vous y êtes invité, videz le cache (accédez à Système > Outils > Gestion du cache > Flush Magento Cache).

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

Le widget PLP fournit les fonctionnalités standard 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 soit correctement validé.

Outre les fonctionnalités standard 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. Ciblez ces éléments par leur classe spécifique pour qu’ils correspondent aux classes personnalisées. Les classes d’action principales ne sont pas efficaces 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 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

.ds-plp-pagination_item

.ds-plp-pagination_item--current

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

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

Pilules à facettes {width="350"}

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

libellé Facettes {width="350"}

.ds-plp-facets__list

Liste des facettes {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

Entrée

.ds-sdk-labelled-input

Entrée étiquetée

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

Libellé de saisie

Article 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

Pour désactiver le widget PLP :

Accédez à Magasins > Paramètres > Configuration > Live Search > Fonctionnalités de Storefront et définissez Activer les widgets de liste de produits sur « Non ».
Sélectionnez Enregistrer la configuration pour enregistrer le paramètre.

recommendation-more-help

commerce-help-live-search

Widget de page de liste de produits

Activation du widget PLP

Fonctionnalités du widget

Personnalisation du widget

Exemple de style

Classes CSS

Liste de produits

Widgets

Liste déroulante de tri

Facettes

Article de produit

Chargement

Désactivation du widget PLP