¿Cómo agregar Bootstrap 4 en un tema de Magento 2?

Respuestas:

23

Para agregar Bootstrap 4 en Magento 2.2.3 (probado) y superior en su tema personalizado, siga los pasos a continuación

1) Bootstrap css archivos dentro de la carpeta web

Nota : THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

Llame a los archivos css de bootstrap en default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Agregar 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) Agregar archivos Js en forma de paquete en lugar de individual porque el individuo no funciona

Coloque los archivos bootstrap.bundle.js que puede descargar desde aquí 

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js

Llame a Bootstrap Js en 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']
        }
    }
};

Agregue el siguiente código en header.phtml después de su etiqueta de script ya presente

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Código:

<script type="text/javascript">require(['bootstrap']);</script>

Ejecutar debajo de los comandos:

php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

Nota: Probado en Magento 2.2.3 y Latest 2.2.6. También probado en 2.3.3

Actualizado : descargue Bootstrap compilado desde aquí y use el paquete js

Manoj Deswal
fuente
OK gracias. Probaré esta solución. Por cierto, ¿cuál es la diferencia entre bootstrap.bundle.js y bootstrap.js?
Magecode
Popper.js incluido en el paquete js ..... y jquery ya está dentro de magento ... popper no funciona solo, pero funciona usando como un paquete
Manoj Deswal
@Magecode ¿está trabajando en Magento 2.2.4?
Manoj Deswal
1
Finalmente lo descubrí ... coloqué el js en MY_THEME / web / js en lugar de MY_THEME / Magento_Theme / web / js lo siento
Negro
1
Esta era la forma de trabajo estándar antes de 2.2.3 pero en 2.2.3 no funcionó y descubrí la forma anterior. Pero todavía funciona en 2.3.2 ... La forma en que lo hiciste es la manera correcta
Manoj Deswal
11

Puede agregar Bootstrap de esta manera, siga los pasos a continuación: Nota: Esta solución no funciona con Magento 2.2.3 y superior

1) Coloque su JS y CSS en la ubicación a continuación

/ app / design / frontend / vendor-name / theme-name / web / css

/ app / design / frontend / vendor-name / theme-name / web / js

2) Llame archivos en su default_head_blocks.xml

app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml

agregue esta línea de código

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

3) Ejecutar debajo de los comandos 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
Mayur Rathod
fuente
¿Y cómo funciona entonces con Magento 2.2.3 y superior?
Negro
6

Debe usar el administrador de paquetes de Bower para agregar Bootstrap 4 en la carpeta web de su tema.

¿POR QUÉ? Porque hay actualizaciones constantes y fáciles de administrar. Ejecute el comando de actualización Bootstrap 4 se actualiza.

TAMBIÉN: Preferimos usar MENOS o SCSS con bootstrap 4. Es robusto y fácil de refactorizar.

Siga los pasos a continuación para instalar la glorieta:

1) Instale LTS nodeJS en su sistema operativo respectivo desde: https://nodejs.org/en/

2) Instalar el administrador de paquetes Bower a nivel mundial: npm install -g bower

3) Instalar gitdesde: https://git-scm.com/

4) Instalar bootstrap 4:

En el webdirectorio de tu tema personalizado de Magento

Por ejemplo: Abra la terminal en <Magento root>/app/design/frontend/MyCustom/theme/web/

Ejecute este comando para instalar bootstrap 4: bower install bootstrap4

5) Después de esto, debe agregar fuentes, bootstrap CSS y bootstrap JS en el nodo de diseño predeterminado para trabajar boostrap en cada página del Magento_Thememódulo en su tema personalizado.

Usamos gulp para compilar SCSS a CSS.

Ananth
fuente
¿Cómo usar el administrador de paquetes Bower?
Magecode
Necesita descargar el nodo desde aquí: enlace . Si está utilizando Linux, utilice el administrador de paquetes correspondiente. A continuación, instalar glorieta usando este comando: sudo npm install -g bower. Después de instalar bower, instale los paquetes js / css en su directorio de temas:app/design/frontend/My/Theme/
Ananth
Aquí es necesario un cambio predeterminado directorio de instalación de bower_componentsque webel uso de .bowerrc archivo de configuración.
Ananth
1
Creo que Bower ya no es relevante. El equipo de Bower incluso recomienda usar Yarn o Webpack o Parcel para proyectos frontend.
phagento
Primero abra el package.jsonarchivo de Bootstrap 4, si ve la filesclave de matriz, solo muestra que la coincidencia de tipo de archivo se agregará al directorio de su proyecto. filesLa tecla es utilizada únicamente por el comando Bower. Si quieres contribuir o recompilar Bootstrap, entonces deberías probar Yarn. Porque agregará un archivo / directorio innecesario al proyecto. Webpack y Parcel son para proyectos de nodo que compilan en JavaScript para frontend.
Ananth
5

Después de leer las respuestas anteriores, tengo otra sugerencia: coloque Bootstrap 4 en un módulo y use CDN para vincular los archivos de Bootstrap.

Supongo que sabes cómo crear un módulo básico. Si no, puede consultar aquí . Así que aquí están los pasos:

  • Cree un archivo app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlcon los siguientes 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>

  • Active el módulo y ejecute el setup:upgradecomando, ¡eso es todo!

Beneficios:

  1. Aplicar a TODOS los temas a la vez, sin importar si el tema está activo o inactivo
  2. No necesita descargar ningún archivo en su sistema
  3. Muy fácil de actualizar. Simplemente reemplace el enlace CDN es la única tarea que debe hacer si es necesario. No necesita compilar y reemplazar ningún archivo cuando actualiza a Bootstrap 5, 6, 7 ...
  4. Puede habilitar y deshabilitar Bootstrap con UN comando simple.
  5. No necesita anular nada. Todo está por encima de los códigos actuales.
  6. No es necesario ejecutar una implementación estática, lo que puede llevar mucho tiempo

Probado en Magento 2.2.4, pero debería funcionar en todas las versiones de Magento 2.X. EDITAR * cambió las etiquetas de enlace href a src para estar en línea con los devdocs. Referencia:

PY Yick
fuente
CDN puede ser a veces lento.
phagento
ObtengoThe attribute 'integrity' is not allowed.
Negro