Widget de page de liste de produits

Dernière mise à jour : 2024-02-22
  • Rubriques :
  • Services
    Afficher plus sur ce sujet
  • Search
    Afficher plus sur ce sujet
  • Créé pour :
  • Admin

La variable 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.

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

Pour désactiver le widget PLP :

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

Fonctionnalités des widgets

Le widget PLP fournit toute une gamme de fonctionnalités attendues dans une page de produits pouvant faire l’objet d’une recherche. Il s’agit notamment :

  • Filtrage par attributs
  • Prise en charge des échantillons de couleurs
  • Fonction Ajouter au panier
  • Prise en charge de plusieurs langues
  • Curseurs de prix

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 sont 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: div interne du côté gauche
  • .ds-widgets__results: div interne du côté droit

Résultats du widget

  • .ds-sdk-sort-dropdown

Menu déroulant 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

Liste déroulante de sélection active

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