Slider adicional para Prestashop

Tanto en la actualidad como en el pasado, dentro del universo Prestashop disponemos de módulos que permiten integrar un Slider/Galería de imagenes para dar y tirar, incluso el famoso “Sliders Everywhere“, que permite crearte slider/galerías de imágenes en casi todas las posiciones de la tienda, para que tu tienda, parezca una discoteca.

En esta ocasión, al igual que hicimos en el pasado,  vamos hacer una reseña de otro módulo, pero esta vez la reseña será un poco más extensa 🙂

El desarrollador del módulo, es el usuario BlobMarket de la Comunidad de Prestashop

¿Cómo se ve el Slider en la tienda?

La instalación/subida del módulo, como suele ser habitual, la realizamos desde la pestaña Módulos -> Módulos

Instalando módulo que nos permitirá añadir un slider adicional en tu tienda en Prestashop

Una vez instalado el módulo, para poder administrarlo, lo hacemos desde la pestaña Módulos -> Slider

Accediendo a la configuración del Slider adicional para tu tienda

Al entrar a la configuración, del Slider, vemos una pantalla donde podemos administrar (añadir/modificar/eliminar) imágenes y textos del propio slider )

Dentro de la configuración del slider adicional

Por ejemplo, vamos añadir un nuevo elemento al Slider (pulsamos el botón “+”)

Agregando nuevo elemento en el Slider adicional

Una vez hemos pulsado el botón “+”, veremos la siguiente pantalla:

Insertando imagen en el slider
  • Image  -> Campo donde vamos a subir la imagen
  • Link -> Enlace que se abrirá cuando vayamos a pulsar la imagen 🙂
  • Open  in new Tab -> Si activamos la opción el enlace que asignemos se abrirá en una nueva ventana
  • Title -> Servirá tanto para el campo “alt” de la imagen, como para el título del elemento.

    Titulo Slider
  • Content -> Descripción que se mostrara luego junto con la imagen en la tienda.

    Descripción Slider
  • Button text -> Botón que se mostrara debajo de la descripción del slider (al pulsarlo nos lleva al enlace que hemos definido en la opción ‘Link’ que hemos mencionado)

    Pulsador en el Slider
  • Activado -> SI/NO (La misma opción creo que ya lo dice por si mismo, nos sirve para desactivar/activar el elemento del slider)

Básicamente, este sería el proceso de añadir una imagen al slider 🙂

Si tenemos varios elementos en el Slider, cuando estemos en la configuración del módulo, independientemente de acceder a su ficha de modificación o eliminarlos.

Modificar/Eliminar imagen del Slider

Podemos activarla/desactivarla desde el mismo listado:

Activar o desactivar elemento del Slider

Eliminar / Desactivar (Activar) también lo podemos hacer de forma masiva:

Acciones masivas en el Slider

Podemos ordenar los elementos 🙂

Ordenar elementos del Slider

Por cierto, el módulo al instalarlo, nos avisa diciendo que se instala en el pie de página el típico mensaje de “Desarrollado por XXX“, y que podemos quitarlo sin problemas desde la pestaña Módulos -> Posiciones, en el bloque “DisplayFooter”.

Instrucciones adicionales del módulo

Aunque por lo que he visto en el módulo ahora (al menos en la versión que yo he probado no lo hace) y viendo el código (solo para avanzados), veo que lo instala simplemente en el displayHeader que es donde se suelen cargar los css/jss de los módulos y en el displayTopColumn que es donde veis el slider.

Hooks donde se instala el módulo

Un módulo “sencillo” que puede servirnos de utilidad 🙂



¿Dónde podemos descargar este módulo que insertar un slider adicional?
Continúa leyendo Slider adicional para Prestashop

Slider de fabricantes en Prestashop

Hace unos 4 años años, estuvimos hablando de un módulo parecido desarrollado por el usuario Statitic de la Comunidad de Prestashop, que mostraba un slider de los fabricantes en Prestashop. por desgracia ya no tenemos disponible el módulo para descargar, por lo que hoy intentaremos hablar de un módulo parecido 🙂

El review del módulo, la vamos hacer en Prestashop 1.6 (en concreto en 1.6.1.12)

¿Quién es el desarrollador del módulo Slider para fabricantes desarrollado para su funcionamiento en Prestashop?

El desarrollador del módulo es el usuario Themes Zone de la Comunidad de Prestashop

¿Cómo se ve el slider de fabricantes en la tienda?

El slider se visualizara inicialmente en la página principal (Hook: displayHome), recordar que desde módulos -> posiciones, podemos subirlo hacia arriba si no queremos que se vea en la última posición de la página principal.  (Podéis usar tambien el LiveEdit, aunque desde mis inicios en Prestashop (y mira que han pasado años), nunca me ha gustado 🙂 )

Subir slider de fabricantes de Fabricantes en Prestashop
Slider de fabricantes/marcas en Prestashop

La instalación/subida del módulo, la realizamos desde la pestaña módulos -> módulos, sin grandes complicaciones.

¿Qué opciones de configuración nos trae ese módulo que permite integrar un Slider de fabricantes en nuestra tienda?

Nos permite configurar la visualización del slider según resoluciones. 

Primer bloque de configuración del slider de fabricantes en Prestashop
  • Number of items in the carousel for wide screens (resoluciones normales en la actualidad)
  • Number of items in the carousel for desktop screens ( resoluciones medias )
  • Number of items in the carousel for desktop small screens (resoluciones  pequeñas)
  • Number of items in the carousel for tablets (tablets)
  • Number of items in the carousel for mobile  (dispositivos moviles).
    Entiéndase que la palabra “Number of items” se refiere a número de elementos 🙂
Segundo bloque de configuración del slider de fabricantes para Prestashop
  • Slide Speed -> Velocidad del Slider
  • Autoplay -> Podemos seleccionar si queremos que el slider sea automático u no.
  • Show Navigation -> Podemos habilitar la opción de mostrar/ocultar las flechas de navegación

    Flechas de navegación del Slider de fabricantes en Prestashop

Continúa leyendo Slider de fabricantes en Prestashop

Slider de Prestashop 1.7

Slider de Prestashop 1.7

El slider que se muestra en la página principal de Prestashop 1.7, lo podemos configurar en la pestaña módulos -> módulos y servicios (módulos instalados), con el nombre: “Carrusel de imágenes” o bien directamente con el nombre interno “ps_imageslider“.

Entrando a la configuración del slider de Prestashop 1.7

Las opciones de configuración que nos ofrece el slider en Prestashop 1.7, son las siguientes:

Empezamos con los ajustes generales del módulo:

Primero bloque de configuración del Slider
  • Velocidad ->Tiempo de transición entre el cambio de imágenes
  • Pausar al posicionar el ratón por encima –> Opción de pausar la transición del slider cuando pasamos el ratón sobre el.
  • Repetir indefinidamente -> Opción de poder repetir la transición de las imágenes del slider indefinidamente

Pasamos al segundo bloque de configuración del Slider, donde podemos gestionar los elementos del slider.

Listado de elementos en el Slider de Prestashop 1.7

Vamos a pulsar el icono de “+” para añadir un nuevo elemento en el Slider

Añadir nueva diapositiva en el Slider de Prestashop 1.7

El formulario de creación del nuevo elemento (diapositiva) en el slider solicita la siguiente información:

Nueva diapositiva en Prestashop 1.7
  • Imagen ->Subimos la imagen que vayamos a mostrar.
  • Título -> Título de la diapositiva

    Título de la diapositiva
  • URL de destino -> Enlace de la diapositiva
  • Título -> Campo alt de la imagen

    alt de la imagen
  • Descripción-> Descripción de la diapositiva

    Descripción de la diapositiva en Prestashop 1.7
  • Activado -> Activar / Desactivar diapositiva

Otras opciones, que tenemos disponibles en el Slider de Prestashop 1.7, es que podemos ordenar los elementos arrastrándolos hacia arriba o hacia abajo 🙂

Ordenar diapositivas del slider de Prestashop 1.7

Por supuesto, una vez que hayamos creado una diapositiva, podemos volver a modificar o eliminarla.

Eliminar / Modificar diapositiva

Desde el listado de diapositivas, podemos activar y desactivar los elementos, sin necesidad de entrar a su ficha de edición.

Activar / Desactivar elemento del Slider

Los ficheros del módulo se encuentran en el directorio:

/modules/ps_imageslider/

Ficheros del Slider en Prestashop 1.7

El fichero TPL del slider se encuentra sobreescrito en la plantilla por defecto de Prestashop 1.7, en:

/themes/classic/modules/ps_imageslider/views/templates/hook/slider.tpl

Fichero TPL del Slider sobreescrito en la plantilla por defecto de Prestashop 1.7

El módulo inicialmente se encuentra instalado en el displayHome y displayHeader

Recordar que el hook -> displayHome es el hook situado en la página principal y el hook -> displayHeader es donde habitualmente se cargaban las hojas de estilo (css) y ficheros *.js

Documento construido bajo Prestashop 1.7.1.0

Slider de productos destacados en Prestashop

En esta ocasión, nos toca reseñar un módulo del usuario Yopixel de la Comunidad de Prestashop, que muestra un slider de los productos destacados en la página principal.

En principio, vamos ha realizar el mini-review bajo Prestashop 1.6

La instalación del módulo, sin complicaciones, como suele ser habitual en la galaxia de Prestashop

¿Qué opciones nos trae en su configuración el módulo?

Configuración del slider de productos destacados en Prestashop

Trae la típica configuración del módulo de productos destacados:

  • Number of products to be displayed (Número de productos a mostrar)
  • Category from which to pick products to be displayed: (Categoría de donde se van a obtener los productos a mostrar)
  • Randomly display featured products (Activar o desactivar el modo aleatorio de visualización de productos)

¿Entonces donde se configuran las opciones, como por ejemplo la velocidad del slider?

En el fichero “slickslider.js“, ubicado originalmente en: “modules/yp_slickslider/js/front/”

Fichero JS de configuración del slider de productos destacados en Prestashop

¿Cómo se visualiza luego el módulo en la tienda?
Continúa leyendo Slider de productos destacados en Prestashop

Guía – Desplazar el slider debajo de la cabecera en Prestashop 1.5

En esta guía, explicaremos como desplazar el slider en nuestra tienda prestashop, para que se situé justo debajo del “menú”, que tenemos en la cabecera en nuestra tienda Prestashop bajo la versión 1.5

Actualmente vemos el slider como mostramos en la siguiente imagen:

Slider Prestashop
Slider Prestashop

(Pulsar en imagen, para verla de forma completa)

Para desplazar el slider, justo debajo del menú de la cabecera, lo primero que vamos hacer es ir al fichero:

/modules/homeslider/homeslider.php

Continúa leyendo Guía – Desplazar el slider debajo de la cabecera en Prestashop 1.5

Reseña – Módulo para mostrar un slider sencillo en la home o en la cabecera en Prestashop

Lo primero de todo el autor del módulo es iLet Develop Team. (El módulo es totalmente gratuito)

¿Qué hace el módulo?

El módulo permite insertar un pequeño slider en la home o en la cabecera.

En dicho slider podemos configurar hasta 5 imágenes.

En el panel de administración podemos configurar la altura y el ancho de las imágenes del slider, cambiar la velocidad de cambio entre imagen y imagen, subir las imágenes y asignarles un enlace.

Continúa leyendo Reseña – Módulo para mostrar un slider sencillo en la home o en la cabecera en Prestashop