Magento2 – Añadir fichero JS a nuestro módulo

Cuando estás creando un módulo propio, te puede interesar añadir tus ficheros externos Javascript dentro del módulo. Otras veces puedes añadir el fichero Javascript directamente a toda la web. Centrémonos en añadir a nuestro módulo los ficheros externos Javascript que necesitamos.

Es importante seguir el árbol de carpetas para que funcione. De otro modo, no funcionará. Dentro de la carpeta frontend de nuestro módulo, creamos la carpeta js:

1
/{Vendor}/{Modulo}/view/frontend/web/js/

Movemos a esa carpeta los ficheros JavaScript externos que queremos utilizar en nuestro módulo:

1
2
/{Vendor}/{Modulo}/view/frontend/web/js/pikaday.js
/{Vendor}/{Modulo}/view/frontend/web/js/moment.js

Dentro la carpeta Frontend, creamos el fichero requirejs-config.js:

1
/{Vendor}/{Modulo}/view/frontend/requirejs-config.js

Y dentro de éste, ponemos el siguiente contenido:

1
2
3
4
5
6
7
8
var config = {
    map: {
        '*': {
            pickadayjs: 'Trescomatres_Mimodulo/js/pikaday',
            momentjs: 'Trescomatres_Mimodulo/js/moment'
        }
    }
};

Como veréis le damos un nombre ‘pickadayjs’ y ‘monetjs’ y les asignamos la trayectoria donde estan los ficheros, pero sin extensión.

Ahora, cómo llamamos a nuestros ficheros JavaScript desde la plantilla .phtml? Veamoslo en el siguiente código:

1
2
3
4
5
6
7
8
<script type="text/javascript">
    require(['jquery','pikadayjs','momentjs'],function($){
        $(window).load(function() {
            $('#agenda').pikaday();
        });
 
    });
</script>

Si os fijáis, antes de trabajar con las funciones de nuestro javascript hacemos un require de los los javascript con los nombres que les hemos dado. Ahora, último paso. Nos vamos a consola, carpeta instalación de magento2 y ejecutamos un:

1
2
php bin/magento setup:upgrade
php bin/magento cache:flush

Ahora, recargáis la página donde trabaje vuestro módulo, y si os vaís a mirar en vuestro navegador qué ficheros js ha cargado, veréis los vuestros.

Como siempre, si no sabéis de qué estamos hablando, no estáis seguros de qué hacéis… no lo hagáis. Y si dáis el paso, antes copia de seguridad.

Más información

Artículos relacionados

Magento2 – Traducir a Español Si instalas Magento2, y hablo de la versión Community, normalmente se instala con el panel y la tienda en inglés. Qué debemos hacer para ponerlo en es...
Magento 2 – Actualizarlo desde consola con c... Hay dos maneras de actualizar Magento2. Una desde el panel, llamada Wizard, que podemos encontrar en System > Tools > Web Setup Wizard donde esc...
Magento 2 – Error 404 en la página de inicio... En muchas ocasiones, normalmente cuando estás poniendo Magento 2 en marcha, haces muchos cambios que te obligan a realizar limpiados de caché, reindex...
Magento 2 – Cambiar tamaño de las imágenes Una vez creamos los produtos en Magento 2, o los importamos en lote, al ver cómo queda la tienda, vemos que las imágenes no quedan bien y el motivo es...

Un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*