Eu tenho que adicionar o Bootstrap 4 no meu tema personalizado.
Eu adiciono o Bootstrap 3 usando a referência:
Como usar a inicialização no meu tema personalizado
Mas, o bootstrap 4 não está funcionando.
Respostas:
Para adicionar o Bootstrap 4 no Magento 2.2.3 (testado) e acima em seu tema personalizado, siga as etapas abaixo
1) Bootstrap arquivos CSS dentro da pasta web
Nota :
THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\
THEME_LOCATION\web\css\bootstrap.css Chame os arquivos css de bootstrap em default_head_blocks
THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xmlAdicionando 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) Adicionando arquivos Js em forma de pacote configurável em vez de individual porque o indivíduo não funciona
Coloque os arquivos bootstrap.bundle.js a partir daqui
THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.jsChame Js do Bootstrap em requirejs-config.js
THEME_LOCATION\Magento_Theme\requirejs-config.jscódigo para
var config = {
paths: {
'bootstrap':'Magento_Theme/js/bootstrap.bundle',
} ,
shim: {
'bootstrap': {
'deps': ['jquery']
}
}
};Adicione o código abaixo em header.phtml após sua tag de script já presente
THEME_LOCATION\Magento_Theme\templates\html\header.phtmlCódigo:
<script type="text/javascript">require(['bootstrap']);</script>Executar comandos abaixo:
php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)
php bin/magento cache:flush
Nota: Testado no Magento 2.2.3 e mais recente também 2.2.6. Também testado em 2.3.3
Atualizado : Faça o download do Bootstrap compilado a partir daqui e use o pacote js
Você pode adicionar o Bootstrap desta maneira, siga as etapas abaixo: Nota: Esta solução não funciona com o Magento 2.2.3 e superior
1) Coloque seu JS e CSS no local abaixo
/ app / design / frontend / nome do fornecedor / nome do tema / web / css
/ app / design / frontend / nome do fornecedor / nome do tema / web / js
2) Chame os arquivos em seu default_head_blocks.xml
app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xmladicione estas linhas de código
<css src="css/bootstrap.css" />
<script src="js/bootstrap.min.js"/>3) Execute os comandos abaixo
php bin/magento setup:upgrade
php bin/magento setup:static-content:deployVocê deve usar o gerenciador de pacotes do bower para adicionar o bootstrap 4 na pasta da web do tema.
PORQUE? Porque há atualização constante e fácil de gerenciar. Execute o comando update, o Bootstrap 4 é atualizado.
TAMBÉM: Preferimos usar LESS ou SCSS com o bootstrap 4. É robusto e fácil de refatorar.
Siga as etapas abaixo para instalar o pavilhão:
1) Instale o LTS nodeJS no seu sistema operacional respectivo em: https://nodejs.org/en/
2) Instale o gerenciador de pacotes do bower globalmente: npm install -g bower
3) Instale a gitpartir de: https://git-scm.com/
4) Instale o bootstrap 4:
Dentro web diretório do seu tema personalizado Magento
Por exemplo: Abra o terminal em <Magento root>/app/design/frontend/MyCustom/theme/web/
Execute este comando para instalar o bootstrap 4:
bower install bootstrap4
5) Depois disso, você precisa adicionar fontes, CSS de inicialização e JS de inicialização no nó de layout padrão para trabalhar o boostrap em todas as páginas do Magento_Theme módulo em seu tema personalizado.
Usamos gulp para compilar SCSS para CSS.
sudo npm install -g bower. Depois de instalar o pavilhão instalar js / css pacotes em seu diretório tema:app/design/frontend/My/Theme/
bower_componentsde webusar .bowerrc arquivo de configuração.
package.jsonarquivo aberto do Bootstrap 4, se você filesvir a chave do array, ele mostra apenas que a correspondência do tipo de arquivo será adicionada ao diretório do projeto. filesA chave é usada apenas pelo comando Bower. Se você deseja contribuir ou recompilar o Bootstrap, tente o Yarn. Porque ele adicionará um arquivo / diretório desnecessário ao projeto. Webpack e Parcel são para o projeto de nó que eles compilam para uso do JavaScript no frontend.
Depois de ler as respostas acima, tenho outra sugestão: coloque o Bootstrap 4 em um módulo e use o CDN para vincular os arquivos do Bootstrap.
Suponho que você saiba como criar um módulo básico. Caso contrário, você pode consultar aqui . Então, aqui estão as etapas:
Crie um arquivo app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlcom os seguintes códigos:
<?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>Ative o módulo e execute o setup:upgradecomando, só isso!
Benefícios:
Testado no Magento 2.2.4, mas deve funcionar em todas as versões do Magento 2.X. EDIT * alterou as tags de link href para src para ficar alinhado com os devdocs. Referência:
The attribute 'integrity' is not allowed.