Como cambiar el banner en OpenCart. Como personalizar el banner o slider de OpenCart. Parte 2

En una entrada anterior les había explicado como cambiar las imagenes del slider básico de OpenCart, ahora vamos a entrar en mas detalles y les voy a explicar como cambiar el tamaño del banner por ejemplo, como cambiar los efectos de transición, como añadir una película en el banner, como cambiar el tiempo de exposición de cada slide, etc… Ahora, ya deberemos de estar un poco mas familiarizados con el panel administrador de OpenCart, vamos a ir a:

->System->Design->Banners

slider Normalmente en esta pantalla hay 3 banners configurados, si desean los pueden borrar o no, estos banners los aprendimos a configurar en la parte 1 de este tutorial.

Vamos entonces a crear un banner nuevo con las imágenes del tamaño que deseamos, cuando ya este listo el banner con todas sus imágenes vamos a ir a:

->Extension -> Modules -> Slideshow

Vamos a hacer clic en el botón ‘Add Module‘, un nuevo renglón aparecerá con un menú desplegable donde están los nombres de los banners que has creado, seleccionas el banner que contiene las imagenes para este nuevo ‘slider‘. Entonces si el banner que creaste tiene un tamaño de 500px de ancho por 200px de alto, vas a colocar esos valores en las casillas respectivas, seleccionas un ‘layout’ o mejor dicho, seleccionas la página donde quieres ver este ‘slider‘, luego la posición (arriba, abajo o en las columnas), y digamos que vas a tener varios ‘sliders‘ en esta misma página entonces tienes que indicar cual estará primero ‘Sort Order’ y por últimos haces clic en el botón ‘Save

  1. Crear un banner con las imágenes que deseas para el slider, ya formateadas al tamaño del slider.
  2. Ir al modulo ‘Slideshow‘ y hacer clic en ‘Add Module
  3. Seleccionar el banner que creaste.
  4. Llenar las casillas de ‘Dimension‘, ‘Layout‘, ‘Position‘, ‘Status‘ y ‘Sort Order‘.
  5. Hacer clic en el botón ‘Save‘.

slideShowOpenCart

 

Bueno, pues ahora tienes que visitar tu página y ver si todo ha salido como lo imaginaste, prueba poniendo el ‘Slider‘ en distintos ‘Layouts‘ y diferentes posiciones hasta quedar satisfecho con tu diseño.

Ahora vamos a personalizarlo un poquito mas, digamos que el efecto de transición que hay entre cada imágen no te gusta, el default es RANDOM(aleatorio), el nivoSlider tiene los siguientes efectos de transición:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

Muy bien, digamos que para que tu website tenga armonia, deseas que el efecto de transición sea ‘slideInRight‘, quieres ver las imágenes siempre apareciendo desde la derecha, pues bien, para esto debemos de modificar el archivo ‘jquery.nivo.slider.pack.js’. Este archivo esta en: /catalog/view/javascript/jquery/nivo-slider/

MUY IMPORTANTE ANTES DE HACER CUALQUIER CAMBIO A ESTE ARCHIVO TE RECOMIENDO QUE LE HAGAS UNA COPIA
Intentar leer o comprender este archivo a simple vista puede ser una tarea difícil, lo mejor es buscar y reemplazar. Vamos a buscar el código que controla los efectos del slider, esta parte del código es: effect:”random”, una vez encuentres esa parte del código vas a reemplazar ‘random‘ con el efecto que desees aplicar en tu slider.
Guardas los cambios, vas a tu página le das ‘refresh‘ y fíjate si los cambios que has hecho te gustan, si no, intenta otro efecto.

Y ya que estamos editando este archivo, también podriamos modificar otro par de cosas las cuales influyen en el comportamiento del ‘slider‘, digamos que quieres que la rotación entre imágenes sea mas lenta, buscaremos entonces en el código por: ‘pauseTime:3e3’ vas a reemplazar ‘3e3‘ por un número mayor como ‘4000‘ o ‘5000‘, visita tu página y fíjate que tan lento esta ahora el ‘slider‘. Ajústalo con un número mayor o menor de acuerdo a tu gusto.

Add Comment