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">
 
	<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 – Traducir a Español Si instalas Magento2, y hablo de la versión Community, normalmente se instala con el panel y la tienda en inglés. Qué debemos hacer para ponerlo en es...
Magento 2 – Añadir fichero CSS a nuestro mód... Si ya vimos en el anterior artículo cómo añadir ficheros propios de JavaScript en nuestro módulo de Magento2, ahora vamos a ver cómo añadir nuestros p...
Magento 2 – Instalación hay varias maneras de instalar Magento 2. Vamos a ver el modo más típico: subir, descomprimir e instalar. 1: Descargamos Magento 2 Lo primero qu...
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 ...

Deja un comentario

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

*