Widget de page de liste de produits
Live Search Product Listing Page Widget (PLP) utilise la plateforme des services Commerce pour fournir une page de liste de produits performante, pouvant faire l’objet de recherches et pouvant être facettes. Cette rubrique décrit comment activer et mettre en forme le widget PLP.
Activation du widget PLP
Lorsque le service Live Search est installé, la fonctionnalité de recherche par défaut est automatiquement convertie en Live Search.
Le widget Live Search PLP est activé par défaut pour les nouvelles installations. Si vous effectuez une mise à niveau de Live Search et que le widget PLP a déjà été désactivé, il le restera.
Fonctionnalités des widgets
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 autre couleur est sélectionnée pour un produit configurable.
- Prise en charge des échantillons de couleurs : notez que l’attribut de couleur doit être orthographié
colorpour que le code soit correctement validé.
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.
Exemple de style
Vous pouvez personnaliser l’aspect du widget PLP pour qu’il corresponde à votre site à l’aide de CSS.
button s’applique aux boutons de widget.Les divisions en surbrillance contiennent la classe cible ds-sdk-product-item__product-name.
Personnalisez le nom du produit en ajoutant une règle pour le mettre en majuscules.
.ds-sdk-product-item__product-name {
text-transform: uppercase;
}
Classes CSS
Liste de produits
.ds-sdk-product-list: div externe.ds-sdk-product-list__grid: div interne
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 gauche.ds-widgets__results: div interne du côté droit
Menu déroulant Trier
.ds-sdk-sort-dropdown
.ds-sdk-sort-dropdown__button
.ds-sdk-sort-dropdown__items
.ds-sdk-sort-dropdown__items--item
.ds-sdk-sort-dropdown__items--item-selected
.ds-sdk-sort-dropdown__items--item-active
Facettes
.ds-plp-facets.ds-plp-facets__header.ds-plp-facets__header_title.ds-plp-facets__header__clear-all
.ds-plp-facets__pills.ds-sdk-pill
.ds-sdk-pill__label.ds-sdk-pill__cta
.ds-plp-facets__list
.ds-sdk-input.ds-sdk-input__label.ds-sdk-product-item__product-swatch-groupds-sdk-product-item__product-swatch-item.ds-sdk-input_fieldset_show-more
.ds-sdk-labelled-input
.ds-sdk-labelled-input__input.ds-sdk-labelled-input__label
É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
Chargement
.ds-sdk-loading.ds-sdk-loading__spinner.ds-sdk-loading__spinner-label
Désactivation du widget PLP
Pour désactiver le widget PLP :
- Accédez à Magasins > Paramètres > Configuration > Live Search > Fonctionnalités Storefront et définissez Activer les widgets de liste de produits sur "Non".
- Sélectionnez Save Config pour enregistrer le paramètre.