Jak dodać bootstrap.js w magento2

Próbuję dołączyć bootstrap js do mojego motywu magento2. Ale problem polega na tym, że dołączam bootstrap js do mojego motywu. Ta konsola czasu podaje błąd, że bootstrap wymaga jQuery.

Jak mogę to zrobić? Czy ktoś może mi pomóc?

magento2 jquery

— Asish Hira
źródło

Utwórz strukturę folderów modułów:

app / code / [Vendor] / [ModuleName]

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

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

Utwórz pliki modułów:

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>

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

Włącz moduł (SSH do magento root):

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

php -f bin/magento setup:upgrade

Wdróż zasoby statyczne (SSH do magento root):

php bin/magento setup:static-content:deploy

RequireJS nie załaduje żadnego pliku źródłowego modułu javascript, dopóki ktoś nie użyje tego modułu javascript jako zależności. na Alana Storma

(przykładowe użycie) na stronie CMS:

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

Powiązane: Dodanie CSS do strony CMS za pomocą Layout Update XML

— Joshua34
źródło

Dzięki za to :) Bardzo jasny przewodnik. Chociaż dziwnie jest widzieć xsi:noNamespaceSchemaLocationwartość w default.xml. Wydaje mi się, że jest to sprzeczne z całą modułowością w Magento, aby zdefiniować taką ścieżkę. Ale widzę to w Internecie, więc musi tak być.

— Alex Timmer

Rzeczywiście xsi:noNamespaceSchemaLocationjest przestarzały, a nawet zły. Obecnie powinien to być, urn:magento:framework:Module/etc/module.xsdco czyni go elastycznym.

— Jisse Reitsma

Nie sądzę, aby dodanie default.xmlbyło naprawdę potrzebne. Magento 2 już ładuje RequireJS wszędzie na wszystkich stronach, więc nie ma potrzeby jawnego dodawania RequireJS samodzielnie.

— Jisse Reitsma

W każdym razie poprawiłem ten post, ponieważ jest niesamowity.

— Jisse Reitsma

Aby dodać plik JS bootstrap, wykonałem następujące kroki na Magento 2.2.4.

Krok 1: Umieść plik JS w następującej lokalizacji.

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

Krok 2: Dodaj następujące skrypty do tego pliku 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']
        }
    }
};

Krok 3: Dodaj następujące skrypty w plikach szablonów lub niestandardowych plikach JS (bez scriptznacznika).

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

Krok 4: Przejdź do folderu głównego Magento i uruchom poniższe polecenie.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

— Milan Chandro
źródło