DocumentationCommerceContenu et conception

Widget de carrousel d’événements de catalogue

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Débutant
  • Intermédiaire
  • Administration
  • Utilisateur ou utilisatrice
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 sélecteur de compte à rebours pour chaque événement. Vous pouvez choisir les pages et la zone de la mise en page où le carrousel doit apparaître, et contrôler la largeur et le nombre d’événements qui s’affichent simultanément. Le résultat que vous obtenez dépend de votre thème, de l’emplacement où il est positionné pour apparaître sur la page et des options que vous choisissez.

Carrousel d’événements dans la barre latérale gauche

Étape 1 : activation du widget du 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

Étape 2 : création du widget

  1. Sur 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.

    • Sélectionnez 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 :

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

      Ce titre est visible uniquement à partir de Admin.

    • Pour Assign to Store Views, sélectionnez les vues de magasin où le widget doit être 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 la touche Commande (Mac) enfoncée, puis cliquez sur chaque option.

    • (Facultatif) Pour Sort Order, saisissez un nombre afin de 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 de storefront de widgets {width="600" modal="regular"}

Etape 3 : sélection de l'emplacement

  1. Dans la section Mises à jour de la mise en page, 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 l’un des paramètres suivants :

    • 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 de catégorie.

  5. Si vous souhaitez que le carrousel d’événements s’affiche à un autre emplacement du storefront, cliquez sur Add Layout Update et répétez ces étapes pour cet emplacement.

    Mises à jour de mise en page {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 : Configuration des options

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

  2. Pour Frame Size, entrez 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. Pour Scroll, saisissez le nombre de listes d’événements que vous souhaitez faire défiler par clic.

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

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

    Sur la page d’exemple suivante, la largeur personnalisée est définie sur 250 pixels.

    Options de widget de largeur personnalisée {width="400" modal="regular"}

  5. Une fois l’opération terminée, cliquez sur Save.

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

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