Tutorial Magento

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

Activar modo desarrollador o producción en Magento... Antes de ponerte a tocar nada de tu tienda Magento 2, ya sea actualizar o aplicar parches, debes poner tu tienda en modo desarrollador o al final en m...
Cambiar contraseña usuario de Magento 2 desde la b... El tema de las contraseñas olvidadas es el pan de cada día. Usuarios en WordPress, Prestashop o Magento. En este caso mostramos como cambiar la contra...
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...
Magento 2 – Actualizarlo desde consola con c... Hay dos maneras de actualizar Magento2. Una desde el panel, llamada Wizard, que podemos encontrar en System > Tools > Web Setup Wizard donde esc...