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. Empecemos con Magento2 – Añadir fichero JS a nuestro módulo.

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:

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

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

/{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:

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

Y dentro de éste, ponemos el siguiente contenido:

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:

<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:

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. Espero que os haya sido de utilidad este artículo: Magento2 – Añadir fichero JS a nuestro módulo

---

Más información:

• How to load custom module js file in magento 2?
• Tutoriales programación Magento 2