Crear un módulo de carrusel de productos para PrestaShop 1.7 implica varios pasos, desde la creación del módulo básico hasta la implementación del carrusel con código PHP, Smarty y JavaScript. Aquí te dejo una guía detallada para ayudarte en este proceso.
Paso 1: Configuración básica del módulo
Estructura de archivos
Crea una carpeta para tu módulo dentro de la carpeta modules de PrestaShop, por ejemplo productcarousel.
Dentro de esta carpeta, crea los siguientes archivos y carpetas:
productcarousel/
├── productcarousel.php
├── config.xml
├── views/
│ ├── templates/
│ │ ├── hook/
│ │ │ └── displayHome.tpl
│ └── css/
│ └── productcarousel.css
│ └── js/
│ └── productcarousel.js
Archivo principal del módulo: productcarousel.php
Este archivo contendrá la lógica principal del módulo.
if (!defined('_PS_VERSION_')) {
exit;
}
class ProductCarousel extends Module
{
public function __construct()
{
$this->name = 'productcarousel';
$this->tab = 'front_office_features';
$this->version = '1.0.0';
$this->author = 'Tu Nombre';
$this->need_instance = 0;
$this->bootstrap = true;
parent::__construct();
$this->displayName = $this->l('Product Carousel');
$this->description = $this->l('Displays a carousel of products on the homepage.');
$this->ps_versions_compliancy = array('min' => '1.7', 'max' => _PS_VERSION_);
}
public function install()
{
return parent::install() && $this->registerHook('displayHome') && $this->registerHook('header');
}
public function uninstall()
{
return parent::uninstall();
}
public function hookDisplayHome($params)
{
$products = $this->getProducts();
$this->context->smarty->assign('products', $products);
return $this->display(__FILE__, 'views/templates/hook/displayHome.tpl');
}
protected function getProducts()
{
// Obtén los productos. Aquí, puedes personalizar esta consulta según tus necesidades.
$sql = 'SELECT * FROM ' . _DB_PREFIX_ . 'product WHERE active = 1 LIMIT 10';
return Db::getInstance()->executeS($sql);
}
public function hookHeader()
{
$this->context->controller->addCSS($this->_path . 'views/css/productcarousel.css', 'all');
$this->context->controller->addJS($this->_path . 'views/js/productcarousel.js');
}
}
Archivo de configuración: config.xml
Este archivo define la configuración básica del módulo.
<module>
<name>productcarousel</name>
<displayName>Product Carousel</displayName>
<version>1.0.0</version>
<author>Tu Nombre</author>
<tab>front_office_features</tab>
<description>Displays a carousel of products on the homepage.</description>
<compatibility>
<version from="1.7.0.0" to="1.7.9.9"/>
</compatibility>
</module>
Paso 2: Plantilla del carrusel
Archivo de plantilla: displayHome.tpl
Este archivo contiene el HTML y Smarty para mostrar el carrusel en la página de inicio.
<div id="product-carousel" class="owl-carousel owl-theme">
{foreach from=$products item=product}
<div class="item">
<a href="{$link->getProductLink($product.id_product)}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')}" alt="{$product.name|escape:'html':'UTF-8'}" />
<h4>{$product.name|escape:'html':'UTF-8'}</h4>
<p>{$product.price|convertPrice}</p>
</a>
</div>
{/foreach}
</div>
Paso 3: CSS y JavaScript para el carrusel
Archivo CSS: productcarousel.css
Define los estilos para el carrusel.
#product-carousel .item {
text-align: center;
padding: 10px;
}#product-carousel .item img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
Archivo JavaScript: productcarousel.js
Inicializa el carrusel usando una librería como Owl Carousel.
$(document).ready(function(){
$("#product-carousel").owlCarousel({
items: 4,
loop: true,
margin: 10,
nav: true,
dots: true,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true
});
});
Paso 4: Incluir la librería de Owl Carousel
Para que el carrusel funcione, necesitas incluir la librería Owl Carousel en tu tema o módulo. Puedes descargar los archivos CSS y JS de Owl Carousel desde su página oficial y colocarlos en las carpetas correspondientes (views/css y views/js).
Luego, asegúrate de incluir estos archivos en el método hookHeader:
public function hookHeader()
{
$this->context->controller->addCSS($this->_path . 'views/css/productcarousel.css', 'all');
$this->context->controller->addCSS($this->_path . 'views/css/owl.carousel.min.css', 'all');
$this->context->controller->addCSS($this->_path . 'views/css/owl.theme.default.min.css', 'all');
$this->context->controller->addJS($this->_path . 'views/js/owl.carousel.min.js');
$this->context->controller->addJS($this->_path . 'views/js/productcarousel.js');
}
Paso 5: Instalar y activar el módulo
- Sube la carpeta del módulo a la carpeta
modulesde tu instalación de PrestaShop. - Ve al back office de PrestaShop: Navega a Módulos > Módulos y Servicios.
- Busca el módulo “Product Carousel” y haz clic en Instalar.
Una vez instalado y activado, el carrusel de productos debería aparecer en la página de inicio de tu tienda.
Siguiendo estos pasos, deberías poder crear un módulo de carrusel de productos para PrestaShop 1.7. Puedes personalizar y ampliar este módulo según tus necesidades específicas.
4o
