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 – Crear Crontab para magento Magento2 necesita poner en marcha tareas cada X tiempo. Esos es indexación, envío emails, actualizaciones... Para ello, hay que crear un Crontab. Pero...
Magento 2 – Añadir Url Canonical a categoría... Nos puede interesar, y por experiencia, casi podemos decir que es obligatorio añadir el Canonical a las categorías y productos de nuestra tienda Magen...
Deshabilitar módulos en Magento 2 por configuració... Si ya vimos en el artículo anterior cómo deshabilitar un módulo de Magento 2 por consola, ahora veremos cómo hacerlo modificando el fichero de configu...
Saber url de acceso al panel admin Magento 2 En muchas ocasiones, porque es nuevo proyecto o porque es un proyecto de hace mucho tiempo, no recordamos cuál es la dirección url para acceder al pan...

Deja un comentario

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

*