Activation du défilement automatique dans le widget Carrousel de contenu

Vous souhaitez peut-être que le widget Carrousel de contenu fasse automatiquement défiler les images plutôt que de demander à l'utilisateur de contrôler le défilement. Si tel est le cas, vous pouvez ajouter une propriété de défilement automatique au fichier JSPF du fournisseur d'interface utilisateur pour le widget et spécifier la vitesse de défilement.

Avec cette fonctionnalité activée, le widget défile automatiquement jusqu'à ce que le client interagisse avec le widget, par exemple, en cliquant sur une image ou en utilisant les flèches pour le défilement.

Remarque : Les étapes suivantes ne s'appliquent que si vous utilisez l'infrastructure Dojo.

Avant de commencer

Au lieu de mettre à jour le widget Carrousel de contenu par défaut fourni avec WebSphere Commerce, créez une version personnalisée du widget, puis enregistrez-la. Suivez dans son intégralité la procédure de mise à jour des widgets au niveau du site HCL Commerce dans Pratiques recommandées pour le développement de ressources du Commerce Composer.

Pourquoi et quand exécuter cette tâche

Lorsque vous activez le défilement automatique tel que décrit dans les étapes suivantes, le widget Carrousel de contenu ne répond pas aux recommandations d'accessibilité.

Procédure

  1. Démarrez HCL Commerce Developer. Basculez vers la vue Explorateur d'entreprise.
  2. Ouvrez votre fichier ContentCarousel_UI.jspf personnalisé pour le widget Carrousel de contenu.
    Conseil : Pour le widget par défaut, le fichier se trouve sur le chemin d'accès suivant :
    • workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentCarousel
  3. Localisez la ligne de code suivante : 
    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
data-dojo-props="speed:2000" >
  4. Ajoutez la valeur suivante à l'attribut data-dojo-props : 
    ,auto:5000

    Le résultat ressemble à cet exemple

    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
data-dojo-props="speed:2000,auto:5000" >
    Conseil : Le nombre 5000 indique le nombre de millisecondes entre chaque défilement, ce qui signifie que le widget défilera toutes les 5 secondes. Vous pouvez modifier le nombre pour raccourcir ou allonger le temps.
  5. Enregistrez et fermez le fichier ContentCarousel_UI.jspf.