Una de las cosas que tenemos que tener claro cuando trabajamos con Magento 2 es que queda terminantemente prohibido modificar archivos que se encuentran en la carpeta vendor. ¿Por qué? Muy sencillo, cuando actualicemos Magento todo lo que hayamos hecho será modificado por los cambios que tenga el core de Magento por lo que perderemos todo nuestro trabajo.
Hace unos cuantos artículos vimos como añadir Google Fonts a Magento 2 a través de la modificación del archivo default_head_blocks.xml de nuestro theme. Hoy vamos a rizar el rizo e ir un paso más allá, vamos crear un módulo de cero para hacer esto.
Para ello comenzaremos definiendo al estructura que va a tener nuestro módulo, que será tal que así:
app / code / [Vendor] / [Módulo]
app / code / [Vendor] / [Módulo] / etc
app / code / [Vendor] / [Módulo] / view / frontend / layout
Siendo Vendor el nombre del paquete en el que queramos incluir nuestro módulo y Módulo su nombre. A partir de ahora llamaremos Pululart a Vendor y Bootstrap a Módulo, para simplificarlo, quedando así entonces nuestra estructura:
app / code / Pululart / Bootstrap
app / code / Pululart / Bootstrap / etc
app / code / Pululart / Bootstrap / view / frontend / layout
Y estos serán los archivos que crearemos en nuestro módulo:
app / code / Pululart / Bootstrap / registration.php
app / code / Pululart / Bootstrap / etc / module.xml
app / code / Pululart / Bootstrap / view / frontend / requirejs-config.js
app / code / Pululart / Bootstrap / view / frontend / layout / default.xml
app / code / Pululart / Bootstrap / view / frontend / layout / default_head_blocks.xml
Ahora pasamos al contenido de cada uno de ellos, primero creamos el archivo con el que registramos nuestro módulo, el archivo registration.php:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Pululart_Bootstrap',
__DIR__
);
Tras esto creamos el archivo module.xml, en el cuál indidicaremos en que versión está nuestro módulo, cada vez que lo actualicemos debemos cambiar la setup_version que aquí indiquemos:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<module name="Pululart_Boostrap" setup_version="1.0.0" />
</config>
Indicaremos que archivos js se cargarán con nuestro require-config.js:
var config = {
paths:{
"jquery.bootstrap":"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"
},
shim:{
'jquery.bootstrap':{
'deps':['jquery']
}
}
};
Añadimos esto a nuestro default.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<referenceBlock name="head">
<block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
<arguments>
<!-- RequireJs library enabled -->
<argument name="file" xsi:type="string">requirejs/require.js</argument>
</arguments>
</block>
<!-- Special block with necessary config is added on the page -->
<block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
</referenceBlock>
</page>
Finalmente solo nos resta incluir la parte de css de bootstrap y ya tendremos listo nuestro módulo:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
<head>
<css src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" src_type="url" />
</head>
</page>
Con esto ya habremos finalizado nuestro módulo y ya podremos utilizar boostrap en nuestro Magento 2. Ahora solo tenemos que hacer como cualquier otro módulo y activarlo por SSH mediante los comandos:
php -f bin/magento module:enable --clear-static-content Pululart_Bootstrap
php -f bin/magento setup:upgrade
¿Sencillo verdad? Con esto aprendimos a crear un módulo sencillo lo cual nos puede servir como base para cualquier otro más complejo que desarrollemos.