Magento e Boostrap : come utilizzarlo

Al momento stai visualizzando Magento e Boostrap : come utilizzarlo
  • Autore dell'articolo:
  • Categoria dell'articolo:Magento

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 :

  1. Copiare il file boostrap.min.css in app/design/frontend/NOME/NOME_TEMA/web/css
  2. Copiare il file boostrap.min.js in app/design/frontend/NOME/NOME_TEMA/web/js
  3. 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>
  4. Salvare il file
  5. Da console eseguire :
    1. php bin/magento setup:upgrade
    2. php bin/magento setup:static-content:deploy -f 
      1. (se avete installato la lingua italiana php bin/magento setup:static-content:deploy it_IT -f )
    3. 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

magento2 boostrap4

Per ora è tutto, ecco come poter utilizzare all’interno di un proprio tema custom magento boostrap
Al prossimo articolo

 

Condividilo se ti è piaciuto