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 uno de nuestros módulos.

Como sabemos, la plantilla contiene un fichero .xml donde define el Head de nuestra web. En este .xml es dónde se cargan las hojas de estilo y los ficheros JavaScript que necesitamos.

Muy importante: no se hace poniendo el código directamente. Hay unas etiquetas especiales para el .xml de configuración. En el momento que pongáis más códigos o etiquetas desconocidas, dejará de funcionar.

Empecemos. Primero hay que encontrar ese fichero que dependerá de la plantilla. En mi caso está en:

1
/app/design/frontend/nombreplantilla/Magento_Theme/layout/default_head_blocks.xml

Si lo editáis veréis que se define el Head de la web. El mío es de este estilo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
	<script src="js/bootstrap.js"/>
	<css src="css/bootstrap.css" />
	<css src="css/font-awesome.min.css" />
	<css src="css/ionicons.min.css" />
	<css src="css/font.css" />
	<css src="css/helper.css" />
	<css src="css/styles-l.css" />
	<css src="css/styles-m.css" />
	<css src="css/themes.css" />
	<link src="https://fonts.googleapis.com/css?family=Fira+Sans:100,400,700" rel='stylesheet' type='text/css' src_type="url" />
	<!-- Scripts -->
	<script src="js/bootstrap.js"/>
    </head>
</page>

Fijáos, que es muy importante, cómo se llama al JavaScript que tenemos en nuestro servidor:

1
<script src="js/bootstrap.js"/>

Magento2 ya se encarga de poner el resto de código a la llamada del JavaScript. No hace falta poner nada más.

Ahora bién. Si tenemos que llamar a un objeto que esté fuera de nuestro servidor, hay que añadir un atributo a la etiqueta para indicarle a Magento2 que lo qeu debe llamar está fuera. Como podéis observar en el ejemplo, se hace con el atributo: src_type=”url”. Fijaos:

1
<link src="https://fonts.googleapis.com/css?family=Fira+Sans:100,400,700" rel='stylesheet' type='text/css' src_type="url" />

Lo mismo haríamos si fuera un JavaScript externo:

1
<script src="https://www.otroservidor.com/libraries/fichero.js" src_type="url"/>

Ahora sólo queda el último paso, refrescar la caché de los fichero de configuración y Layouts:

Entráis al panel de Magento2 > System > Tools > Cache Management. Seleccionáis las tres primeras: Configuration, Layouts y Blocks HTML outputs y limpiáis. Podéis hacerlo también por consola (os dejo enlace en la parte inferior).

Comprovad en el código que se cargue correctamente el fichero.

Y recordad: sólo realizar estos pasos bajo vuestra responsabilidad. Si no sabéis qué estáis haciendo, si no hacéis copias de seguridad o cualquier otro motivo, mejor no lo hagáis. No nos hacemos responsables de lo que pueda pasar.

Artículos relacionados

Magento2 – Restringir cookies Para mostrar el mensaje de uso de cookies en vuestro Magento 2, hay que seguir unos sencillos pasos: Vamos a: Tiendas > Configuración > Configur...
Deshabilitar módulos en Magento 2 por consola Veamos cuál son las órdenes que debemos utilizar en consola para deshabilitar los módulos en Magento 2 Aquí están las órdenes a aseguir (si está ...
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 – Añadir fichero JS a nuestro módul... 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 fich...

Deja un comentario

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

*