Wie man bootstrap.js in magento2 hinzufügt

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?

magento2 jquery

— Asish Hira
quelle

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>

— 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

Hat diesen Beitrag trotzdem verbessert, weil er fantastisch ist.

— Jisse Reitsma

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