En este artículo encontrarás un enlace para descargar el módulo que te permitirá tener múltiples sliders de productos, aprenderás a realizar su configuración y además podrás descargar un archivo para traducir el módulo al idioma español.
Para descargar este excelente módulo lo puedes hacer visitando la página oficial de los desarrolladores Buy-Addons. Completa la descarga ingresando el producto al carrito (como si lo fueras a comprar), completas los datos, si deseas puedes hacerlo como invitado (guest) y al finalizar la compra tendrás un número de orden que al hacer clic se descargará de forma automática.
Una vez descargues el módulo, procede a la instalación desde el back-office en PrestaShop y haces clic en Configurar.
Crear slider y ajustes generales
Cuando hagas clic en configurar te aparecerá la siguiente ventana, como se muestra en la imagen.
Tienes que hacer clic en el botón «+» para crear un nuevo slider.
En este punto ya estamos listos para empezar a crear y configurar nuestro slider en nuestra tienda.
- Title: título que tendrá nuestro slider, esto se visualizará en nuestra tienda.
- Enable Desktop: habilitar para mostrar en computadores de escritorio.
- Enable on Table: habilitar para dispositivos como tablets.
- Enable on Mobile: habilitar para dispositivos móviles.
- Staff only Notas: comentario o notas del slider solo para nuestro uso como administradores.
- Items in Desktop: número de productos a mostrar en pantallas desktop.
- Items in Tablet: número de productos a mostrar en tablets.
- Items in mobile: número de productos a mostrar en móvil.
- Width Slider / Height Slider: podemos personalizar el ancho y alto del slider.
- Count: número de productos que se mostrará en el slider.
- Image type: acá puedes elegir el tamaño de como se mostrarán los productos en base a los ajustes de imágenes que tienes configurados en PrestaShop, en este ejemplo he elegido small_default.
- Loop slider: es un loop, pero igual te lo explico, si tienes cinco productos en tu slider y como no tienes un sexto producto se mostrará nuevamente el producto número 1, así sucesivamente.
- Auto Play Slider: si activas esta función automáticamente el slider se moverá de forma horizontal y mostrará los productos, lo típico de un slider.
- Placements: ojo con esta opción, se trata de donde vamos a ubicar el slider:
- Homepage tab (only 1.6.X.X), es únicamente para la opción 1.6 de PrestaShop, osea es algo obvio, pero si tienes la versión 1.7 no seleccionar.
- HomePage 2: es para mostrar el slider en el hook de la home de nuestra tienda online, una vez seleccionas Save luego puedes ir a la sección de posición y configurar la ubicación.
- Product Page: para mostrar slider en la sección-ficha de productos, ideal para mostrar productos relacionados o algo que quieras mostrarle al usuario que se encuentra interesado en un determinado producto.
Cuando realices toda la configuración haz clic en Save and Stay, todos estos ajustes los puedes modificar luego en la opción General Settings.
Mostrar productos en slider
En el apartado de Filter Products vamos a seleccionar los productos que deseas mostrar en el slider, podemos elegir una determinada categoría, todos los productos o elegir específicamente productos determinados.
- Expand All: te permitirá expandir y mostrar todas las categóricas y subcategorias y puedas seleccionar las que deseas.
- Check all: seleccionará todas las categorias.
- Uncheck all: deseleccionará todas las categorías seleccionadas.
- Products: un buscador para elegir productos específicos, ideal en caso que no queramos elegir toda una categoría.
- Sort by: para elegir el orden para mostrar los productos, algunas opciones son por orden alfabético, precio, productos nuevos, populares o de forma aleatoria.
- Products in The Same Category: esta opción funciona únicamente cuando en los ajustes generales, seleccionamos en la opción
Placements -> Producto Page. Te explicaré con un ejemplo, si activamos esta opción y un usuario selecciona un producto en la página principal y este producto se encuentra en la categoría Sillas, el slider de productos que mostrará en la ficha de producto serán únicamente productos que también se encuentren la categoría Sillas. - Hide Product Out Of Stock: selecciona Sí, en caso de no querer mostrar un producto de encontrarse fuera de stock.
Cuando realices toda la configuración haz clic en Save and Stay.
Ajustes de diseño
La opción Layout Settings nos permitirá modificar el diseño de nuestro slider como por ejemplo: el color del botón, mostrar o no las flechas de navegación.
- Show Title: para elegir si deseas mostrar el título o no.
- Show Compare: dejar esta opción en No.
- Show Add to Cart: si deseas mostrar o no el CTA de Añadir al carrito.
- Show Dots: mostrar los típicos puntos de un slider para deslizar.
- Show Price: mostrar o no el precio.
- Show Nav: mostrar las flecha de izquierda o derecha para deslizar.
- Show Wish List: dejar esta opción en No, de lo contrario te arrojará un error.
- Color Themes: puedes personalizar el color de todo el front del módulo además de esto podemos elegir el color con numeración hexadecimal.
Con esto hemos terminado, cuando realices toda la configuración haz clic en Save and Stay o Save.
Puedes ir a la sección a donde lo ubicaste y ver como ha quedado, acá un ejemplo:
Este módulo me ha parecido excelente por la gran facilidad y posibilidades para su personalización, todo esto que hemos realizado podemos hacerlo con 2, 3, 4 o 5 sliders y personalizarlos todos de forma independiente.
Para los usuarios que se manejan un poco más PrestaShop, cada slider nos generá un shortcode que podrías ingresar en un fichero TPL y mostrarlo donde quieras, si deseas echar un ojo a los archivos o código puedes ubicar la carpeta baproductscarousel en los módulos instalados.
He realizado la traducción del módulo, así que si deseas tener los ajustes del back-office en español, te dejo el siguiente archivo para descargar la traducción en español.
Descomprimes el archivo zip, copias el archivo es.php y debes ingresar a la carpeta admin de tu PrestaShop (puede ser mediante FTP) para ubicar en la carpeta Modules la siguiente carpeta:
baproductscarousel -> translations -> dentro de la carpeta translations pegas el archivo es.php (recuerda borrar la caché en PrestaShop).
Espero que esta información te sea útil, si tienes alguna duda tienes el formulario de contacto se encuentra disponible para contactarme.
Saludos!