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

Magento 2 – Añadir Url Canonical a las págin... Al igual que vimos cómo añadir Canonical a las categorías y productos en Magento 2, ahora vamos a ver cómo hacerlo en las páginas. Es tan fácil c...
Magento 2 – Actualizar cantidad y stock de p... En ocasiones nos puede interesar actualizar la cantidad y el stock de nuestros productos en Magento 2 directamente en nuestra base de datos con una or...
Magento 2 – Ejecutar comandos consola en loc... Como es lógico, muchos de nosotros trabajamos en local antes de subir Magento 2 al servidor de producción. Esto hace que muchas veces nos encontremos ...
Magento2 – Quitar sufijo html de las urls Por defecto, Magento2 nos añade el sufijo .html a todas las páginas de productos y categorías. Para poder quitarlo desde el panel deberemos seguir las...

Deja un comentario

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

*