Blog

Estos Magento 2 en Marcgento > Blog > Magento 2 > Desarrollo Frontend > Como agregar él, componete Slick carousel en Magento 2

Como agregar él, componete Slick carousel en Magento 2

No hay comentarios

Así como este plug-in en JavaScript carrusel de imágenes creado por Ken Wheeler y la comunidad, así también puedes saber que podrías agregar a cualquier parte de Magento un elemento animado, dinámico o cualquier cosa que se te ocurra sin importar de donde venga ese framework, ya sea React.js,  Angular,  Ember.js,  Vue.js,  Backbone.js, Mercury.js de cualquiera de estas grandiosas tecnologías, así que aquí te voy a mostrar que tan sencillo es agregar una funcionalidad a Magento 2.

Lo primero que necesitas es identificar el comportamiento que necesitamos, en este caso mostraré como hacer un carrusel de imágenes utilizando la librería Slick de JavaScript que podrás descargar desde su sitio oficial en SLICK ya una vez descargado el paquete vamos a darnos cuenta de que la gran mayoría de librerías ya contiene ciertos elementos que necesitamos, por ejemplo para los Estilos CSS nos daremos cuenta, hay diferentes archivos de precompilación tanto como para LESS como para SASS.

Esto nos hace las cosas aún más fáciles, ya que solo necesitamos copiar estos archivos dentro de nuestro directorio del módulo que desarrollaremos y listo, todo funcionara a la perfección en cuanto a los estilos.

También veamos que hay un archivo de SCRIPT que nos permitirá realizar toda la ejecución del componente llamada slick.js o bien slick.min.js, desde mi punto de vista el que deberíamos usar seria slick.min.js, ya que no pretendemos alterar la funcionalidad del componente.

El segundo paso es que vamos a crear un módulo muy básico y sencillo para este ejercicio, en este artículo no mostraré como crear un módulo básico para Mgento 2, ya que no es el tema de esta sección, así que para lo cual vamos a suponer que ya contamos con el módulo llamado “ModuloSlick” creado dentro del espacio de nombres Marcgento las estructura de archivos y directorios seria de la siguiente forma:

code/Marcgento/ModuloSlick/Block
code/Marcgento/ModuloSlick/Block/Index.php
code/Marcgento/ModuloSlick/Controller/Index
code/Marcgento/ModuloSlick/Controller/Index/Index.php
code/Marcgento/ModuloSlick/etc
code/Marcgento/ModuloSlick/etc/module.xml
code/Marcgento/ModuloSlick/etc/frontend/routes.xml
code/Marcgento/ModuloSlick/view
code/Marcgento/ModuloSlick/view/frontend/
code/Marcgento/ModuloSlick/view/frontend/requirejs-config.js
code/Marcgento/ModuloSlick/view/layout
code/Marcgento/ModuloSlick/view/layout/slick_index_index.xml
code/Marcgento/ModuloSlick/view/templates
code/Marcgento/ModuloSlick/view/templates/slick.phtml
code/Marcgento/ModuloSlick/view/frontend/web
code/Marcgento/ModuloSlick/view/frontend/web/css
code/Marcgento/ModuloSlick/view/frontend/web/css/source
code/Marcgento/ModuloSlick/view/frontend/web/css/source/_module.less
code/Marcgento/ModuloSlick/view/frontend/web/css/source/module
code/Marcgento/ModuloSlick/view/frontend/web/css/source/module/slick-theme.less
code/Marcgento/ModuloSlick/view/frontend/web/css/source/module/slick.less
code/Marcgento/ModuloSlick/view/frontend/web/js
code/Marcgento/ModuloSlick/view/frontend/web/js/modulo-slick.js
code/Marcgento/ModuloSlick/view/frontend/web/js/slick.min.js
code/Marcgento/ModuloSlick/registration.php

Lo que se ha creado es un módulo con elementos básicos entre carpetas y archivo que muestran una estructura de una vista que carga los elementos externos para dar paso a la funcionalidad de la implementación del componente Slick.

Block

Este archivo PHP solo es la definición de clase de bloque definida en la configuración de la vista de layout, toda especificación de layout debe contener dos elementos principales, una ruta de clase PHP del Bloque y una ruta de archivo PHTML para la semántica de código entre PHP y HTML, su código es muy simple:
Index.php

<?php
namespace Marcgento\ModuloSlick\Block;

class Index extends \Magento\Framework\View\Element\Template
{
      
}
?>

Controller

Esta Clase es un controlador que se define para que sea el parámetro de la URL que conformara el llamado al ruteador que se presentara como una página final, en este caso este controlador se llama Index y su clase también se llama Index.php así que así se definirá la nomenclatura de URL https://{dominio}/{frontName}/index/index en donde dominio es el sitio web donde está la instalación y frontName es el definido en el archivo routes.xml dentro de la carpeta etc/frontend/ y su código es muy simple:
Index.php

<?php

namespace Marcgento\ModuloSlick\Controller\Index;

class Index extends \Magento\Framework\App\Action\Action
{ 
    public function execute()
    {                
        $this->_view->loadLayout();
	    $this->_view->renderLayout();
    }
}

Module

Este archivo XML solo define la existencia y creación del componente del módulo, una configuración que definirá el nombre del módulo y la versión del mismo, el nombre del módulo es importante, ya que será lo que identifique en todo el proyecto al módulo y la versión será la cual especifique los cambios generados a través de su desarrollo o futuras actualizaciones, su código es muy simple:
module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Marcgento_ModuloSlick" setup_version="1.0.0"></module>
</config>

Routes

Mediante este archivo de configuración se define en que parte de la vista de Magento se trabajara si una vista para el cliente o una vista para el administrador así que se define dentro de un nombre de carpeta en este caso es una vista para el cliente, se crea la carpeta frontend y dentro el archivo routes.xml, este archivo XMl de configuración indicará que tipo de URL estándar o administrativa, dentro de un nodo llamado router, y finalmente dentro del mismo una estructura de nodos que definen un identificador de URL así como el nombre de la misma en un atributo frontName, también es importante indicar que esta URL estará disponible en el módulo dentro del nodo “module” mediante el atributo “name” el nombre estaría conformado por el espacio de nombre del proyecto y el nombre de la carpeta del módulo, su código es muy simple:
routes.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="slick" frontName="slick">
            <module name="Marcgento_ModuloSlick" />
        </route>
    </router>
</config>

RequireJS

Hasta este punto no hemos entrado en materia de la implementación del componente Slick, ya que es una estructura básica de un módulo en Magento, pero aquí es donde viene la parte interesante, porque en la vista es donde trabajaremos la inclusión del código del componente para que este pueda tener funcionalidad dentro de Magento, pues bien lo primero que necesitas es crear dentro de la vista una inyección por RequireJS esta tecnología que nos permitirá definir una configuración indicando la inclusión de un archivo a la librería de Magento a través de RequireJS, así como definir que esta librería tiene una dependencia de jQuery si no realizamos esta última definición de dependencia, la librería externa podría no funcionar con efectividad, su código es simple:
requirejs-config.js

var config = {    
    paths: {        
        slick: "Marcgento_ModuloSlick/js/slick.min"
    },
    shim: {        
        slick:{
            deps: ['jquery']
        }
    }
};

Layout

Para toda vista siempre se requerirá de un layout de presentación, aquí es donde indicamos cuál es la configuración que el controlador debería cargar, y si bien ya tenemos todos los complementos para que esto exista simplemente basta recordar que para que esto funcione primero necesitamos un archivo router que definirá la primera parte de una URL en nuestro caso es mediante el parámetro frontName que indicamos “slick” posterior a ello necesitamos el nombre de un Controlador que en nuestro caso lo llamamos “Index” y finalmente la última parte definirá el nombre de la clase dentro del controlador que para nuestro caso la llamamos igual “Index” así que con todo esto ya podemos crear nuestra estructura de Layout un archivo XML llamado “slick_index_index.xml” que contendrá el siguiente código:
slick_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Marcgento_ModuloSlick::js/modulo-slick.js" async="async" />
    </head>
    <body>
        <referenceContainer name="content">         
            <block class="Marcgento\ModuloSlick\Block\Index" name="modulo.slick" template="Marcgento_ModuloSlick::slick.phtml">
            </block>
        </referenceContainer>
    </body>
</page>

La estructura de configuración es simple para este caso y si sabes de semántica HTML te darás cuenta que es similar como una estructura de encabezado por “HEAD” y cuerpo del mensaje por “BODY”, y claro esta que dentro del encabezado se mandan a llamar las librerías tanto para JavaScript como para CSS, en nuestro casi aquí está la inclusión de un SCRIPT en JavaScript, que se ha realizado de esta forma para que ese pedazo de Script este solo disponible para esa vista y no interfiera en ninguna otra parte del proyecto, esto es muy elemental porque así evitamos problemas con el resto del proyecto y nos enfocamos solo en los componentes y módulos que trabajemos ya sea en módulos personalizados o en vistas nativas, posterior dentro del “BODY” solo indicamos un nodo que hace referencia a un contenedor a través de un parámetro nativo llamado “content” que indicara que necesito agregar algo al elemento “content” de una página maestra, dentro de este nodo hay una inclusión de Bloque mediante el nodo “block” que simplemente me permitiría definir dos parámetros importantes, por un lado, la clase de Bloque que manejara las reglas de negocio de esta vista y por el otro el archivo PHTML que es un archivo tipo HTML y PHP juntos que nos permitirá trabajar tanto con elementos HTMl así como código PHP, en donde a través de sus dos principales atributos “class” y “template” indicamos dichos parámetros y explicados, es importante tener foco al atributo name, ya que este será un identificador ahora de nuestro nuevo elemento de bloque a rendear en la pantalla, este sería importante porque podríamos reutilizarlo en este bloque o cualquier otra parte del proyecto.

Script modulo-slick.js

Toca el momento de definir un archivo JavaScript que indicara la acción a ejecutar una vez que se cargue la vista de la página, llamara a un método nativo del componente Slick pasando por parámetro algunos elementos que esta librería permite, este archivo lo tenemos que crear dentro de la ruta que se ha definido en el archivo slick_index_index.xml en la sección HEAD con la nomenclatura “Marcgento_ModuloSclick::js/modulo-slick.js”, la forma de interpretar esto es muy sencilla, a veces genera conjunción, pero una vez explico esto quedara muy claro, primero le indicamos el PATH DIR Ruta del directorio definida en el archivo registration.php que aún no definimos, pero más adelante lo vamos a ver, o bien también lo podemos encontrar en la especificación del identificador de módulo definido en el archivo module.xml con el parámetro name “Marcgento_ModuloSlick” esto es una definición de ruta relativa al proyecto en el que estamos trabajando así que una vez definida, esto quiere decir que ya estamos indicando cuál es la ruta del módulo que debemos apuntar, a partir de este elemento como vemos en el ejemplo se colocan los signos dobles de puntuacion”::” que esto indicaría que ahora apunta a la ruta de la carpeta view/ y como el archivo Layout está dentro de “frontend” entonces sería dentro de “view/frontend” y posterior indicaría que dentro de una carpeta “web”  así que al final toda la estructura a partir de los”::” indicaría que la ruta es “view/frontend/web” así de sencillo, posterior aquí podríamos generar cualquier número y nombre de carpetas, pero lo más lógico e ideal por buenas prácticas seria estructura “js” para archivos script y “css” para estilos en CSS e incluso archivos de precompilacion LESS o SASS según sea nuestro caso, así que para el ejemplo le estamos indicando que en la vista pre cargue el script localizado en la ruta ya definida, con el siguiente código:

require(['jquery', 'slick'], function($) {
    $(document).ready(function() {        
        $('.modulo-slick').slick({
            infinite: true,
            slidesToShow: 4,            
            autoplay: true,
            autoplaySpeed: 3000
        }); 
    });
});

Template slick.phtml

Así como ya validamos como saber la ruta de donde tendremos que crear nuestro archivo de Script, lo mismo el caso para nuestro, Template, el archivo que representa la semántica entre HTML y PHP, indicado por el atributo témplate del archivo de configuración “slick_index_index” definido como “Marcgento_ModuloSlick::slick.phtml”, ahora en este caso cuando definimos en un atributo de template una ruta relativa los signos de doble puntuación”::” indicarían la ruta “view/frontend/templates” así que ahí es donde buscaría encontrara ese, Template, creamos el archivo “slick.phtml” con el siguiente código:

<h1>Test Modulo - Slick</h1>

<div class="carousel-wrap">
    <div class="modulo-slick">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    </div>
</div>

LESS _module.less

Y para finalizar con esta implementación solo falta depositar dos cosas de la librería externa de Slick, los estilos y la librería principal que hace que funcione como se espera, así que primero explicaré como trabajar los CSS o en este caso como la librería lo permite los precompiladores LESS, lo primero que recomiendo es crear un archivo principal que Magento ya reconoce de forma nativa y es el archivo “_module.less”, aquí hay que entender algo importante cuando realizamos un rénder o deploy del proyecto, lo que realiza Magento es un procedimiento que va verificando módulo por módulo creado dentro del directorio “app/code”, una vez que verifica todos los módulos existentes, realiza distintas tareas de pre construccion y generación de contenido estático y dinámico dependiendo de la forma de despliegue, aquí es en donde en alguna de sus tareas verificara la existencia de un archivo llamado “_module.less” dentro de la ruta “web/css/source” esto es muy importante, ya que por buenas prácticas de Magento, así tal cual debería definirse la estructura y el nombre de archivo, si el archivo no se nombra tal cual como “_module.less” este no lo tomara en cuenta así que para este ejemplo he creado un archivo principal con ese contenido como a continuación:

@import 'module/slick.less';
@import 'module/slick-theme.less';

/* Personalizar los estilos */
.carousel-wrap .modulo-slick .item{
    width: 207px;
    border: 1px solid #bfe5e7;
    padding: 10px 10px;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    background-color: #b5f2ff;
    color: #4a4a4a;
}

El archivo es muy básico y ami me gusta hacerlo de esta forma porque, por un lado, puedo en este archivo personalizar el componente mediante estilos que puedo agregar aquí como en el ejemplo se muestra, y segundo que aquí es donde controlo la ruta del resto de archivos CSS o LESS que sean parte de la librería que simplemente puedo mandar a importar con las etiquetas principales, para este punto quiere decir que ya tendría disponible para este componente todos los CSS pre compilados a través de este archivo, indicado que agregue tanto “slick.less” como “slick-theme.less” que son parte de este componente externo.

Script slick.min.js

Por último, para dar por terminada la parte del agregado de todos los archivos, solo indicar en donde tendríamos que añadir el archivo de la librería de Slick, que ya se ha definido en el archivo de configuración requirejs-config.js en la definición: path: {slick: “Marcgento_ModuloSlick/js/slick.min”}, con todo lo ya explicado sería muy lógico entender que dentro de “web/js/” deberíamos colocar la librería del componente slick.min.js, solo algo que quiero recalcar es que en lo personal ami me genero confusión es por qué en las definiciones de RequireJs en su caso el archivo requirejs-config.js, ¿Por qué no se le coloca la extensión “.js” a la definición? Y es por la razón de que la configuración se lo añade de forma dinámica, así que la extensión ya no es necesaria añadirla, solo basta con el nombre del archivo.

Este es el resultado final 

Descarga la librería de Slick desde aquí

Deja una respuesta

This website uses cookies and asks your personal data to enhance your browsing experience. We are committed to protecting your privacy and ensuring your data is handled in compliance with the General Data Protection Regulation (GDPR).
Ok, I agree Privacy Policy