Comment ajouter Bootstrap 4 dans un thème Magento 2?

12

Je dois ajouter Bootstrap 4 dans mon thème personnalisé.

J'ajoute Bootstrap 3 en utilisant la référence:

Comment utiliser bootstrap dans mon thème personnalisé

Mais, bootstrap 4 ne fonctionne pas.

— Magecode
source

Que voulez-vous dire par «ne fonctionne pas» ??

— Black

23

Pour ajouter Bootstrap 4 dans Magento 2.2.3 (testé) et au-dessus dans votre thème personnalisé, suivez les étapes ci-dessous

1) Fichiers css bootstrap dans le dossier web

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

THEME_LOCATION\web\css\bootstrap.css

Appeler les fichiers css bootstrap dans default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Ajout de 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) Ajouter des fichiers Js sous forme de bundle plutôt qu'individuel car l'individu ne fonctionne pas

Placez les fichiers bootstrap.bundle.js que vous pouvez télécharger à partir d' ici

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

Appelez Bootstrap Js dans requirejs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

code pour

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

Ajoutez le code ci-dessous dans header.phtml après votre balise de script déjà présente

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Code:

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

Exécuter en dessous des commandes:

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

php bin/magento cache:flush

Remarque: testé sur Magento 2.2.3 et les dernières versions ainsi que 2.2.6. Également testé sur 2.3.3

Mise à jour : Téléchargez Bootstrap compilé à partir d' ici et utilisez le bundle js

— Manoj Deswal
source

OK merci. Je vais essayer cette solution. BTW Quelle est la différence entre bootstrap.bundle.js et bootstrap.js?

— Magecode

Popper.js inclus dans le bundle js ..... et jquery est déjà dans magento .... popper ne fonctionne pas seul mais il fonctionne en utilisant un bundle

— Manoj Deswal

@Magecode fonctionne-t-il sur Magento 2.2.4?

— Manoj Deswal

1

Je l'ai finalement compris ... J'ai placé les js dans MY_THEME / web / js au lieu de MY_THEME / Magento_Theme / web / js je suis désolé

— Black

1

C'était la méthode de travail standard avant 2.2.3 mais en 2.2.3 cela ne fonctionnait pas et j'ai découvert la méthode ci-dessus. Mais ça marche toujours en 2.3.2 .... La façon dont vous avez fait c'est la bonne façon

— Manoj Deswal

11

Vous pouvez ajouter Bootstrap de cette façon, suivez les étapes ci-dessous: Remarque: Cette solution ne fonctionne pas avec Magento 2.2.3 et supérieur

1) Placez votre JS et CSS à l'emplacement ci-dessous

/ app / design / frontend / nom-fournisseur / nom-thème / web / css

/ app / design / frontend / nom-fournisseur / nom-thème / web / js

2) Appeler des fichiers dans votre default_head_blocks.xml

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

ajoutez ces lignes de code

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

3) Exécuter les commandes ci-dessous

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

— Mayur Rathod
source

Et comment ça marche alors avec Magento 2.2.3 et supérieur?

— Black

6

Vous devez utiliser le gestionnaire de packages bower pour ajouter bootstrap 4 dans votre dossier Web de thème.

POURQUOI? Parce qu'il y a une mise à jour constante et facile à gérer. Exécutez la commande de mise à jour pour que Bootstrap 4 soit mis à jour.

AUSSI: Nous préférons utiliser LESS ou SCSS avec bootstrap 4. Son robuste et facile à refactoriser.

Suivez les étapes ci-dessous pour installer bower:

1) Installez LTS nodeJS sur votre système d'exploitation respectif à partir de: https://nodejs.org/en/

2) Installez globalement le gestionnaire de paquets bower: npm install -g bower

3) Installez gitdepuis: https://git-scm.com/

4) Installez bootstrap 4:

Dans le webrépertoire de votre thème personnalisé Magento

Par exemple: Ouvrir le terminal à <Magento root>/app/design/frontend/MyCustom/theme/web/

Exécutez cette commande pour installer bootstrap 4: bower install bootstrap4

5) Après cela, vous devez ajouter des polices, bootstrap CSS et bootstrap JS dans le nœud de mise en page par défaut pour travailler boostrap sur chaque page du Magento_Thememodule de votre thème personnalisé.

Nous utilisons gulp pour compiler SCSS en CSS.

— Ananth
source

Comment utiliser le gestionnaire de paquets Bower?

— Magecode

Vous devez télécharger le nœud à partir d'ici: lien . Si vous utilisez linux, utilisez le gestionnaire de packages respectif. Ensuite , installez charmille en utilisant cette commande: sudo npm install -g bower. Après avoir installé bower, installez les packages js / css dans votre répertoire Theme:app/design/frontend/My/Theme/

— Ananth

Ici, vous devez changer le répertoire d'installation par défaut de bower_componentsen webutilisant le fichier de configuration .bowerrc .

— Ananth

1

Je pense que Bower n'est plus pertinent. L'équipe de Bower recommande même d'utiliser Yarn ou Webpack ou Parcel pour les projets frontaux.

— phagento

Premier package.jsonfichier ouvert de Bootstrap 4, si vous voyez la filesclé du tableau, cela montre seulement que la correspondance du type de fichier sera ajoutée à votre répertoire de projet. filesLa clé est utilisée uniquement par la commande Bower. Si vous souhaitez contribuer ou recompiler Bootstrap, vous devriez essayer Yarn. Parce qu'il ajoutera un fichier / répertoire inutile au projet. Webpack et Parcel sont pour le projet de noeud qu'ils compilent en JavaScript pour le frontend.

— Ananth

5

Après avoir lu les réponses ci-dessus, j'ai une autre suggestion: mettre Bootstrap 4 dans un module et utiliser CDN pour lier les fichiers Bootstrap à la place.

Je suppose que vous savez comment créer un module de base. Sinon, vous pouvez vous référer ici . Voici donc les étapes:

Créez un fichier app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlavec les codes suivants:

<?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>

Activez le module et exécutez la setup:upgradecommande, c'est tout!

Avantages:

Appliquer à TOUS les thèmes à la fois, peu importe que le thème soit actif ou inactif
Vous n'avez pas besoin de télécharger de fichiers sur votre système
Très facile à mettre à jour. Remplacer simplement le lien CDN est la seule tâche que vous devez faire si nécessaire. Vous n'avez pas besoin de compiler et de remplacer des fichiers lors de la mise à jour vers Bootstrap 5, 6, 7 ...
Vous pouvez activer et désactiver Bootstrap avec UNE seule commande simple.
Vous n'avez pas besoin de remplacer quoi que ce soit. Tout est au-dessus des codes actuels.
Pas besoin d'exécuter un déploiement statique qui pourrait prendre du temps

Testé sur Magento 2.2.4, mais devrait fonctionner sur toutes les versions de Magento 2.X. EDIT * a changé les balises de lien href en src pour être en ligne avec les devdocs. Référence:

— PY Yick
source

Le CDN peut parfois être lent.

— phagento

Je reçoisThe attribute 'integrity' is not allowed.

— Black