Como adicionar o Bootstrap 4 em um tema do Magento 2?

Respostas:

23

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.xml

Adicionando 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.js

Chame Js do Bootstrap em requirejs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

có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.phtml

Có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

Manoj Deswal
fonte
Ok, obrigado. Vou tentar esta solução. BTW Qual é a diferença entre bootstrap.bundle.js e bootstrap.js?
Magecode
Popper.js incluído no js pacote ..... e jQuery já está magento dentro .... popper não funciona sozinho, mas ele funciona usando como um pacote
Manoj Deswal
@ Magecode está funcionando no Magento 2.2.4?
Manoj Deswal
1
Eu finalmente descobri ... Eu coloquei os js em Meu_Tema / web / js em vez de Meu_Tema / Magento_Theme / web / js im desculpe
preto
1
Esta era a maneira de trabalho padrão antes da 2.2.3, mas na 2.2.3 não funcionava e eu descobri a maneira acima. Mas ainda funciona no 2.3.2 .... O jeito que você fez da maneira correta #
Manoj Deswal
11

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.xml

adicione 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:deploy
Mayur Rathod
fonte
E como funciona então com o Magento 2.2.3 e superior?
Preto
6

Você 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.

Ananth
fonte
Como usar o gerenciador de pacotes do bower?
Magecode
Você precisa fazer o download do nó aqui: link . Se você estiver usando o linux, use o respectivo gerenciador de pacotes. Em seguida, instale pavilhão usando este comando: 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/
Ananth
Aqui você precisa default mudança diretório de instalação a partir bower_componentsde webusar .bowerrc arquivo de configuração.
Ananth
1
Eu acho que Bower não é mais relevante. A equipe do Bower até recomenda o uso de Yarn ou Webpack ou Parcel para projetos de front-end.
Phagento #
Primeiro 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.
Ananth
5

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:

  1. Aplique a TODOS os temas de uma só vez, independentemente de o tema estar ativo ou inativo
  2. Você não precisa baixar nenhum arquivo no seu sistema
  3. Muito fácil de atualizar. Apenas substituir o link da CDN é a única tarefa que você precisa executar, se necessário. Você não precisa compilar e substituir nenhum arquivo ao atualizar para o Bootstrap 5, 6, 7 ...
  4. Você pode ativar e desativar o Bootstrap com UM comando simples.
  5. Você não precisa substituir nada. Tudo está em cima dos códigos atuais.
  6. Não é necessário executar a implantação estática, o que pode levar muito tempo

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:

PY Yick
fonte
Às vezes, a CDN pode ser lenta.
Phagento #
Eu receboThe attribute 'integrity' is not allowed.
Preto