Wie man bootstrap.js in magento2 hinzufügt

13

Ich versuche, Bootstrap-Js in mein Magento2-Theme aufzunehmen. Aber das Problem ist, wenn ich Bootstrap-Js zu meinem Thema hinzufüge. Diese Zeitkonsole gibt einen Fehler aus, für den Bootstrap jQuery erfordert.

Wie kann ich das dann machen ??? Kann mir bitte jemand helfen?

Asish Hira
quelle

Antworten:

21

Modulordnerstruktur erstellen:

app / code / [Vendor] / [ModuleName]

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

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

Moduldateien erstellen:

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>

Modul aktivieren (SSH zu Magento Root):

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

php -f bin/magento setup:upgrade

Bereitstellen statischer Ressourcen (SSH für Magento-Root):

php bin/magento setup:static-content:deploy

RequireJS lädt keine Javascript-Modul-Quelldatei, bis jemand dieses Javascript-Modul als Abhängigkeit verwendet. per Alan Storm

(Beispielverwendung) in der CMS-Seite:

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

Verwandte Themen : Hinzufügen von CSS zu einer CMS-Seite mit Layout Update XML

Joshua34
quelle
Danke dafür :) Eine sehr klare Anleitung. Obwohl ich es seltsam finde, den xsi:noNamespaceSchemaLocationWert in zu sehen default.xml. Es scheint mir, dass dies gegen die Modularität in Magento verstößt, um einen solchen Pfad zu definieren. Aber ich sehe es überall im Web, also muss es so sein, wie es funktioniert.
Alex Timmer
In der Tat xsi:noNamespaceSchemaLocationist das veraltet oder sogar falsch. Derzeit sollte es sein urn:magento:framework:Module/etc/module.xsd, was es flexibel macht.
Jisse Reitsma
Ich denke nicht, dass das Hinzufügen von default.xmltatsächlich erforderlich ist. Magento 2 lädt RequireJS bereits überall auf allen Seiten, sodass Sie RequireJS nicht explizit selbst hinzufügen müssen.
Jisse Reitsma
1
Hat diesen Beitrag trotzdem verbessert, weil er fantastisch ist.
Jisse Reitsma
4

Um eine Bootstrap-JS-Datei hinzuzufügen, habe ich die folgenden Schritte in Magento 2.2.4 ausgeführt.

Schritt 1: Platzieren Sie die JS-Datei am folgenden Speicherort.

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

Schritt 2: Fügen Sie die folgenden Skripte in diese Datei ein 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']
        }
    }
};

Schritt 3: Fügen Sie die folgenden Skripte in die Vorlagendateien oder Ihre benutzerdefinierten JS - Dateien ein (ohnescript Tag) ein.

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

Schritt 4: Gehen Sie zum Magento-Stammordner und führen Sie den folgenden Befehl aus.

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