Magento è sicuramente il CMS più conosciuto per la creazione di e-commerce professionali.
In questo articolo illustrerò i passi necessari per poter utilizzare su un tema Custom di Magento 2 Boostrap 4.
Partiamo dal prerecquisito di avere una installazione già attiva di Magento 2.4 e quindi un server già configurato e pronto e un tema Custom già creato e attivo (ne parleremo in altri articoli anche di questo )
Esistono due strade per aggiungere a Magento Bootstrap :
La prima
Utilizzare il CDN
La seconda
Scaricare il pacchetto già compilato direttamente dal sito Boostrap 4
In questo articolo utilizzerò la seconda soluzione.
Una volta scaricato ed estratto il pacchetto :
- Copiare il file boostrap.min.css in app/design/frontend/NOME/NOME_TEMA/web/css
- Copiare il file boostrap.min.js in app/design/frontend/NOME/NOME_TEMA/web/js
- In app/design/frontend/NOME/NOME_TEMA/Magento_Theme/layout
modificare il file default_head_block.xml aggiungendo :<css src=”css/bootstrap.min.css”/>
<script src=”js/bootstrap.min.js”/><?xml version="1.0"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <!-- Boostrap--> <css src="css/bootstrap.min.css"/> <script src="js/bootstrap.min.js"/> </head> </page>
- Salvare il file
- Da console eseguire :
- php bin/magento setup:upgrade
- php bin/magento setup:static-content:deploy -f
- (se avete installato la lingua italiana php bin/magento setup:static-content:deploy it_IT -f )
- php bin/magento cache:flush per eliminare la cache
Fatto!
Cosa molto importante
Nella mia installazione si verificava un problema molto fastidioso, l’immagine del prodotto dopo 2 secondi scompariva, questo è dovuto ad un problema all’interno del js di Magento che con l’inserimento del pacchetto di Bootstrap4 non è più in grado di calcolare le dimensioni corrette dell’attributo .gallery-placeholder
Per risolvere è sufficiente aggiungere all’interno del proprio foglio di stile questo attributo
.gallery-placeholder { width:100%; }
Io l’ho inserito all’interno del file _extend.less situato in app/design/frontend/NOME/NOME_TEMA/web/source del mio tema custom.
Ed ecco una pagina di test che mostra Boostrap4 attivo e funzionante
Per ora è tutto, ecco come poter utilizzare all’interno di un proprio tema custom magento boostrap
Al prossimo articolo