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 noindex nofollow a las pá... Veamos de una forma sencilla cómo añadir nofollow y no index a una página en Magento 2. En los contenidos estáticos puede interesarnos añadir las...
Magento 2 – Eliminar columnas en una categor... Cómo eliminar una columna de una categoría o página de Magento 2. El proceso es sencillo, pero saber qué tocar no. El proceso es ir a la página ...
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: añadir fichero js externo Partimos de la premisa que tenemos una plantilla en Magento2 y necesitamos que ésta cargue un fichero JavaScript externo porque lo necesitaremos en un...

Deja un comentario

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

*