Devo aggiungere Bootstrap 4 nel mio tema personalizzato.
Aggiungo Bootstrap 3 usando il riferimento:
Come usare bootstrap nel mio tema personalizzato
Ma bootstrap 4 non funziona.
Risposte:
Per aggiungere Bootstrap 4 In Magento 2.2.3 (testato) e versioni successive nel tema personalizzato, seguire i passaggi seguenti
1) Bootstrap file css all'interno della cartella web
Nota :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Chiama i file css bootstrap in default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlAggiunta di CSS
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!--Bootstrap css-->
<css src="css/bootstrap.css" />
</head>
</page>
2) Aggiunta di file Js in formato bundle piuttosto che individuale perché individuale non funziona
Posiziona i file bootstrap.bundle.js che possono essere scaricati da qui
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsChiama Bootstrap Js in requestjs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jscodice per
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};
Aggiungi sotto il codice in header.phtml dopo il tag script già presente
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlCodice:
<script type="text/javascript">require(['bootstrap']);</script>Esegui sotto i comandi:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Nota: testato su Magento 2.2.3 e versioni successive 2.2.6. Testato anche su 2.3.3
Aggiornato : scarica Bootstrap compilato da qui e usa il bundle js
È possibile aggiungere Bootstrap in questo modo, seguire i passaggi seguenti: Nota: questa soluzione non funziona con Magento 2.2.3 e versioni successive
1) Posiziona JS e CSS in basso
/ App / design / frontend / vendor-name / theme-name / web / css
/ App / design / frontend / vendor-name / theme-name / web / js
2) Chiama i file in default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmlaggiungi questa riga di codice
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>
3) Esegui sotto i comandi
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
È necessario utilizzare Bower Package Manager per aggiungere bootstrap 4 nella cartella Web del tema.
PERCHÉ? Perché ci sono aggiornamenti costanti e facili da gestire. Esegui il comando di aggiornamento Bootstrap 4 viene aggiornato.
ANCHE: Preferiamo usare LESS o SCSS con bootstrap 4. È robusto e facile da refactoring.
Seguire i passaggi seguenti per installare il pergolato:
1) Installa il nodo LTS JS sul tuo rispettivo sistema operativo da: https://nodejs.org/en/
2) Installa il gestore di pacchetti pergolato a livello globale: npm install -g bower
3) Installa gitda: https://git-scm.com/
4) Installa bootstrap 4:
Nella webdirectory di te tema personalizzato Magento
Ad esempio: aprire il terminale in <Magento root>/app/design/frontend/MyCustom/theme/web/
Esegui questo comando per installare bootstrap 4:
bower install bootstrap4
5) Dopo questo è necessario aggiungere caratteri, bootstrap CSS e bootstrap JS nel nodo layout predefinito per far funzionare il boostrap su ogni pagina del Magento_Thememodulo nel tema personalizzato.
Usiamo gulp per compilare SCSS in CSS.
sudo npm install -g bower. Dopo aver installato bower, installa i pacchetti js / css nella tua directory dei temi:app/design/frontend/My/Theme/
bower_componentsa webutilizzare .bowerrc file di configurazione.
package.jsonfile di Bootstrap 4, se vedi la fileschiave dell'array mostra solo che la corrispondenza del tipo di file verrà aggiunta alla directory del tuo progetto. filesIl tasto viene utilizzato solo dal comando Bower. Se vuoi contribuire o ricompilare Bootstrap, allora dovresti provare Yarn. Perché aggiungerà file / directory non necessari al progetto. Webpack e Parcel sono per il progetto del nodo che compilano in JavaScript per frontend.
Dopo aver letto le risposte di cui sopra, ho un altro suggerimento: inserire Bootstrap 4 in un modulo e utilizzare invece CDN per collegare i file Bootstrap.
Presumo che tu sappia come creare un modulo di base. In caso contrario, puoi fare riferimento qui . Quindi ecco i passaggi:
Crea file app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlcon i seguenti codici:
<?xml version="1.0"?>
<!--
/**
* Copyright © 2013-2017 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>
<link rel="stylesheet" type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
</head>
</page>
Attiva il modulo ed esegui il setup:upgradecomando, tutto qui!
Benefici:
Testato su Magento 2.2.4, ma dovrebbe funzionare su tutte le versioni di Magento 2.X. EDIT * ha modificato i tag di collegamento href in src per essere in linea con devdocs. Riferimento:
The attribute 'integrity' is not allowed.