OwlCarousel

Descripción del Control

User Control para web que permite crear un carrusel responsive. Basado en el plugin de Jquery OwlCarousel. Cuenta con  varios tipos de template con diseños ya elaborados (Product List, Brand List, Slide, Video List).


Ejemplo de uso en sitio: developer.igniaframework.com

 

Ver abajo lista con ejemplos. 

Compatibilidad

Web

Usando el control

Abrir Extensibility Catalog y dirigirse a la sección Web a través del menú lateral izquierdo.

Seleccionar el control OwlCarousel y luego instalar. (Ver documentación del Extensibility Catalog si tiene dudas en el proceso de instalación de controles).

Durante el proceso de instalación se recomienda importar el ejemplo que viene con el control.

Al importarlo se cera en la ruta Ignia/Controls/Owl un Web Panel  de ejemplo y los SDT con las estructura de datos para cada tipo de template de carrusel.

Estructura de datos

Este User Control cuenta con varios tipos de Template y para cada uno de ellos se define una estructura de datos mediante la cual se le asignan los valores a mostrar:

Estructura de datos para un carrusel de tipo Product List:

 

Estructura de datos para un carrusel de tipo Brand List:

Estructura de datos para un carrusel de tipo Slide:

Estructura de datos para un carrusel de tipo Video List:

Propiedades

  • Header: Texto a mostrar en el encabezado.
  • Center: Centrar un elemento.
  • Class: Clase de asociada al carrusel, para ver las personalizaciones que se puede realizar ir a la sección Configuración de Estilos.
  • Animate Out: Clase para la animación de salida. Las animaciones disponibles son todas las que se encuentran en la librería Animate.css.
  • Animate In: Clase para la animación de entrada. Las animaciones disponibles son todas las que se encuentran en la librería Animate.css.
  • Items: El número de elementos que desea ver en la pantalla.
  • Loop: Bucle infinito. Duplicar los últimos y primeros elementos para obtener una ilusión de bucle.
  • Mouse Drag: Mover los elementos del carrusel al arrastrar el mouse.
  • Pull Drag: Mover elementos del carrusel hacia el principio al arrastrar el mouse.
  • Rewind: Ir al primer elemento cuando se llegue al último.
  • Slide By: Cantidad de elementos a desplazarse al utilizar la navegación.
  • Start Position: Posición del elemento inicial. Válido para cuando la propiedad Items sea igual a 1. La posición del primer elemento es 0.  
  • Touch Drag:  Habilitar el movimiento de los elementos del carrusel al tocar la pantalla. Para dispositivos móviles y pantallas táctiles.
  • Nav: Mostrar los botones de paginado (anterior / siguiente ).
  • Nav Text Next: Texto para el botón de siguiente.
  • Nav Text Prev: Texto para el botón de anterior.
  • Nav Speed: Velocidad de navegación.
  • Dots: Mostrar la paginación por puntos.
  • Dots Each: Mostrar puntos cada x elementos.
  • Dots Speed: Velocidad de la paginación.
  • Autoplay: Habilitar la reproducción automática del carrusel.
  • Autoplay Timeout: Intervalo de tiempo para el cambio de los elementos.
  • Autoplay Hover Pause: Pausar la reproducción al hacer hover con el mouse.
  • Autoplay Speed:  Velocidad de la reproducción automática.
  • Template: Tipo de diseño para el carrusel a mostrar.
  • Data: SDT con los datos a mostrar en el carrusel, el tipo de SDT depende del Template seleccionado.
  • Responsive: Habilitar el comportamiento responsivo del carrusel.
  • Item Extra Small: Cantidad de elementos a mostrar por página en el carrusel en una resolución menor a 768 px.
  • Item Small: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 768px y menor a 992 px.
  • Item Medium: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 992px y menor a 1024 px.
  • Item Large: Cantidad de elementos a mostrar por página en el carrusel en una resolución mayor o igual a 1024px.

Configuración de Estilos

Para configurar los estilos del control en los temas de GeneXus encontramos un nuevo tipo de clase de nombre OwlCarousel.

Este tipo de clase puede ser asignada al control mediante la propiedad Class.

La clase OwlCarousel cuenta con las siguientes propiedades:

  • Header Class:  Clase utilizada para el "Header" de Carousel. (Tipo de clase: TextBlock).
  • Container Class: Clase utilizada para el contenedor de Carrusel. (Tipo de Clase: Section).
  • Item Container Class: Clase utilizada para el contenedor de los elementos del carrusel. (Tipo de Clase: Section).
  • Dots
    • Dots Class: Clase utilizada para el estilo del contenedor de los puntos del paginado. (Tipo de Clase: Section).
    • Dot Class: Clase utilizada para el estilo de los puntos del paginado. (Tipo de Clase: Section).
    • Dot Active Class: Clase utilizada para el estilo del punto activo. (Tipo de Clase: Section).
  • Nav
    • Nav Class: Clase utilizada para el estilo de los botones del paginado. (Tipo de Clase: Section).
    • Nav Prev Class: Clase utilizada para el estilo del botón anterior del paginado. (Tipo de Clase: Section).
    • Nav Next Class: Clase utilizada para el estilo del botón siguiente del paginado. (Tipo de Clase: Section).
  • Template Product List
    • Product Name Class: Clase utilizada para diseñar el texto "Nombre del producto". (Tipo de clase: Section).
    • Price Class: Clase utilizada para diseñar el valor "Precio". (Tipo de Clase: Section).
    • Add Cart Button Class: Clase utilizada para diseñar el botón "Añadir al carrito". (Tipo de clase: Button).
    • Zoom Button Class: Clase utilizada para diseñar el botón "Zoom". (Tipo de clase: Button).
    • View Button Class: Clase utilizada para diseñar el botón "Ver". (Tipo de clase: Button).
  • Template Video List
    • Video Wrapper: Clase utilizada para diseñar el contenedor del Video. (Tipo de Clase: Section)

 

Resaltar producto

Una funcionalidad que nos pidieron muchos clientes era la de poder resaltar un producto con alguna imagen de promoción, descuento, etc. Para ello se incorporó esta funcionalidad.


Ejemplo de uso en sitio de opticaflorida.com.uy

Para realizar esto se debe indicar en el momento de cargar el SDT: OwlProductList la imagen que indique la promoción a aplicar.

Se debe indicar una clase a aplicar sobre la imagen, por ejemplo 'sale'  de la forma &ProductListItem.additionalclass = 'sale'
y la imagen  &ProductListItem.additionalimage = sale.link  (la imagen sale de ejemplo viene incluida en el XPZ que se importa al utilizar el User Control)

La clase "sale" la pueden definir como quieras, para el caso presentado se incorporó la clase dentro del Theme usado, bajo la sección Custom y con el siguiente valor en Custom Properties:

height: 100px !important; width: 100px !imaportant;  display: -webkit-box !important; background-color: transparent !important;

 

Ejecución

Template Product List

Template Brand List

Template Slide

Template Video List