Comment ajouter bootstrap.js dans magento2

13

J'essaie d'inclure bootstrap js sur mon thème magento2. Mais le problème est quand j'inclus bootstrap js sur mon thème. Cette console temporelle génère une erreur indiquant que le bootstrap nécessite jQuery.

Alors comment puis-je le faire ??? Est-ce que quelqu'un peut m'aider s'il vous plait?

magento2 jquery Asish Hira
la source

Réponses:

21

Créer une structure de dossiers de module:

app / code / [Vendor] / [ModuleName]

app / code / [Vendor] / [ModuleName] / etc

app / code / [Vendor] / [ModuleName] / view / frontend / layout

Créer des fichiers de module:

app / code / [Vendor] / [ModuleName] / registration.php

app / code / [Vendor] / [ModuleName] / etc / module.xml

app / code / [Vendor] / [ModuleName] / view / frontend / requirejs-config.js

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default.xml

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default_head_blocks.xml

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[Vendor]_[ModuleName]',
    __DIR__
);

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <module name="[Vendor]_[ModuleName]" setup_version="0.0.1"/>
</config>

requirejs-config.js

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery']
        }
    }
};

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <referenceBlock name="head">
        <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
            <arguments>
                <!-- RequireJs library enabled -->
                <argument name="file" xsi:type="string">requirejs/require.js</argument>
            </arguments>
        </block>
        <!-- Special block with necessary config is added on the page -->
        <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
    </referenceBlock>
</page>

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" src_type="url"/>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" src_type="url"/>
    </head>
</page>

Activer le module (SSH vers root magento):

php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]

php -f bin/magento setup:upgrade

Déployer des ressources statiques (SSH vers la racine magento):

php bin/magento setup:static-content:deploy

RequireJS ne chargera aucun fichier source de module javascript jusqu'à ce que quelqu'un utilise ce module javascript comme dépendance. par Alan Storm

(exemple d'utilisation) dans la page CMS:

<script type="text/javascript">
    requirejs(['jquery', 'jquery.bootstrap'], function (jQuery, jQueryBootstrap) {
        jQuery('.carousel').carousel();
    });
</script>

En relation: Ajout de CSS à une page CMS à l'aide de la mise à jour XML

Joshua34
la source
Merci pour cela :) Un guide très clair. Bien que je trouve bizarre de voir la xsi:noNamespaceSchemaLocationvaleur default.xml. Il me semble que cela va à l'encontre de toute la modularité de Magento, pour définir un chemin comme ça. Mais je le vois partout sur le web, donc ça doit être la façon dont les choses fonctionnent.
Alex Timmer
En effet le xsi:noNamespaceSchemaLocationest dépassé, voire faux. Actuellement, il devrait l'être, urn:magento:framework:Module/etc/module.xsdce qui le rend flexible.
Jisse Reitsma
Je ne pense pas que l'ajout de default.xmlsoit réellement nécessaire. Magento 2 charge déjà RequireJS partout sur toutes les pages, il n'est donc pas nécessaire d'ajouter explicitement RequireJS vous-même.
Jisse Reitsma
1
J'ai quand même augmenté ce post, car il est génial.
Jisse Reitsma
4

Pour ajouter un fichier bootstrap JS, j'ai suivi les étapes suivantes sur Magento 2.2.4.

Étape 1: placez le fichier JS à l'emplacement suivant.

app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/web/js/bootstrap.bundle.min.js

Étape 2: ajoutez les scripts suivants dans ce fichier app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/requirejs-config.js.

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

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

Étape 3: Ajoutez les scripts suivants dans les fichiers de modèle ou vos fichiers JS personnalisés (sans scriptbalise).

<script type="text/javascript">    
    require([ 'jquery', 'jquery/ui', 'bootstrap'], function($){ 
       // core js, jquery, jquery-ui, bootstrap codes go here
    });
</script>

Étape 4: Accédez au dossier racine Magento et exécutez la commande ci-dessous.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Milan Chandro
la source