Habilitar el desplazamiento automático en el widget de carrusel de contenido

Es posible que desee que el widget de Carrusel de contenido se desplace automáticamente por las imágenes en lugar de requerir que el usuario controle el desplazamiento. Si es así, puede añadir una propiedad de desplazamiento automático al archivo JSPF del proveedor de interfaz de usuario para el widget y especificar la velocidad de desplazamiento.

Con esta característica habilitada, el widget se desplaza automáticamente hasta que el comprador interactúe con el widget, por ejemplo, pulsando una imagen o utilizando las flechas para desplazarse.

Nota: Los pasos siguientes solo son aplicables si utiliza la infraestructura Dojo.

Antes de empezar

En lugar de actualizar el widget de Carrusel de contenido predeterminado que se proporciona con WebSphere Commerce, cree una versión personalizada del widget y, a continuación, registre la versión personalizada. Siga el conjunto completo de pasos recomendados para actualizar widgets a nivel de sitio HCL Commerce en Métodos recomendados para desarrollar elementos de Commerce Composer.

Por qué y cuándo se efectúa esta tarea

Cuando habilita el desplazamiento automático tal como se describe en los pasos siguientes, el widget de carrusel de contenido no cumple con las directrices de accesibilidad.

Procedimiento

  1. Inicie HCL Commerce Developer. Vaya a la vista Explorador de empresa.
  2. Abra el archivo ContentCarousel_UI.jspf personalizado para el widget de Carrusel de contenido.
    Consejo: Para el widget predeterminado, el archivo se encuentra en la siguiente ruta:
    • workspace_dir\Stores\WebContent\widgetdir\com.ibm.commerce.store.widgets.ContentCarousel
  3. Localice la línea de código siguiente:
    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
    data-dojo-props="speed:2000" >
  4. Añada el valor siguiente al atributo data-dojo-props:
    ,auto:5000

    El resultado es parecido al de este ejemplo

    <div id="contentCarouselWidget${widgetSuffix}" class="contentCarouselWidget carousel" data-dojo-type="wc/widget/Carousel" 
    data-dojo-props="speed:2000,auto:5000" >
    Consejo: El número 5000 especifica el número de milisegundos entre cada desplazamiento, lo que significa que el widget se desplazará cada 5 segundos. Puede utilizar un número diferente para acortar o alargar el tiempo.
  5. Guarde y cierre el archivo ContentCarousel_UI.jspf.