[PaaS uniquement]{class="badge informative" title="S’applique uniquement aux projets Adobe Commerce on Cloud (infrastructure PaaS gérée par Adobe) et aux projets On-premise."}

Widget de carrousel d’événements de catalogue

Fonctionnalité Adobe Commerce {width="20"} Fonctionnalité exclusive uniquement dans Adobe Commerce (En savoir plus)

Un widget de carrousel d’événements de catalogue affiche un curseur des événements à venir avec un indicateur de compte à rebours pour chaque événement. Vous pouvez choisir les pages et la zone de la mise en page dans lesquelles vous souhaitez que le carrousel apparaisse, ainsi que contrôler la largeur et le nombre d’événements qui s’affichent simultanément. Le résultat obtenu dépend de votre thème, de son emplacement pour qu’il apparaisse sur la page et des options que vous choisissez.

Carrousel d’événements dans la barre latérale gauche {width="700" modal="regular"}

Étape 1 : activer le widget de carrousel de catalogue

Avant de commencer, suivez les instructions pour configurer le widget Événement de catalogue afin qu’il soit activé pour le storefront.

Configuration d’événement de catalogue {width="500" modal="regular"}

Étape 2 : créer le widget

  1. Dans la barre latérale Admin, accédez à Content > Elements>Widgets.

  2. Dans le coin supérieur droit, cliquez sur Add Widget.

  3. Dans la section Settings, procédez comme suit :

    • Définissez Type sur Catalog Events Carousel.

    • Choisissez le Design Theme utilisé par le magasin.

  4. Cliquez sur Continue.

    Paramètres de widget pour un carrousel d’événement {width="500" modal="regular"}

  5. Dans la section Storefront Properties, procédez comme suit :

    • Par Widget Title, saisissez un titre descriptif pour le widget.

      Ce titre est visible uniquement depuis l’Admin.

    • Par Assign to Store Views, sélectionnez les vues de la boutique dans lesquelles vous souhaitez que le widget soit visible.

      Vous pouvez sélectionner une vue de magasin spécifique, ou All Store Views. Pour sélectionner plusieurs vues, maintenez la touche Ctrl (PC) ou Commande (Mac) enfoncée et cliquez sur chaque option.

    • (Facultatif) Par Sort Order, saisissez un nombre pour déterminer l’ordre dans lequel cet élément apparaît avec les autres dans la même partie de la page. (0 = premier, 1 = deuxième, 3 = troisième, etc.)

      Propriétés du storefront du widget {width="600" modal="regular"}

Étape 3 : choisir l'emplacement

  1. Dans la section Mises à jour de la disposition, cliquez sur Add Layout Update.

  2. Définissez Display On sur Specified Page.

  3. Définissez Page sur CMS Home Page.

  4. Définissez Container’une des options suivantes :

    • Main Content Area
    • Sidebar Additional
    • Sidebar Main
    note note
    NOTE
    Les résultats varient en fonction du thème et de la mise en page. Vous devez également spécifier le Catalog Events Carousel Default Template ​dans la configuration des catégories.
  5. Si vous souhaitez que le carrousel d’événements apparaisse à un autre emplacement du storefront, cliquez sur Add Layout Update et répétez ces étapes pour cet emplacement.

    ​ Mises à jour de la disposition ​ {width="600" modal="regular"}

  6. Cliquez sur Save and Continue Edit.

    Pour l’instant, vous pouvez ignorer le message pour actualiser le cache.

Étape 4 : configurer les options

  1. Dans le panneau de gauche, choisissez Widget Options.

  2. Par Frame Size, saisissez le nombre d’événements que vous souhaitez répertorier simultanément dans le curseur.

    Pour afficher un seul événement à la fois, saisissez 1.

  3. Par Scroll, saisissez le nombre de listes d’événements que vous souhaitez faire défiler par clic.

    Pour passer à l’événement suivant, saisissez 1.

  4. Pour une largeur personnalisée, saisissez le nombre de pixels pour la Block Custom Width.

    Dans l’exemple de page suivant, la largeur personnalisée est définie sur 250 pixels.

    Options du widget Largeur personnalisée {width="400" modal="regular"}

  5. Cliquez ensuite sur Save.

  6. Lorsque vous êtes invité à actualiser le cache, cliquez sur le lien du message en haut de la page et suivez les instructions.

recommendation-more-help
2b0136b4-ef75-405f-9734-60d741f198de