Magento 2: añadir fichero js externo

Publicada el por

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. Empecemos con artículo Magento 2: añadir fichero js externo.

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:

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

<!--?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"/>     
</page>

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

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

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

<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).

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

Espero que os sea de utilidad el artículo Magento 2: añadir fichero js externo.

Más información