DocumentationCommerce« Guide Live Search »

Widget de page de liste de produits

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • Administration

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.

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

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

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 qui Adobe des versions peut être incompatible avec votre mise en oeuvre 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 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

Élément actif de pagination

Widgets

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

Résultats du widget

  • .ds-sdk-sort-dropdown

Liste déroulante de tri

  • .ds-sdk-sort-dropdown__button

Bouton déroulant

  • .ds-sdk-sort-dropdown__items

Éléments de liste déroulante

  • .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 de facettes {width="350"}

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

Facet pills {width="350"}

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

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

Input

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

Désactivation du widget PLP

Pour désactiver le widget PLP :

  1. Accédez à Magasins > Paramètres > Configuration > Live Search > Fonctionnalités Storefront et définissez Activer les widgets de liste de produits sur "Non".
  2. Sélectionnez Save Config pour enregistrer le paramètre.
recommendation-more-help
1d60634e-b73a-404a-be7a-4a2a36676055