Як додати bootstrap.js у magento2

Я намагаюся включити bootstrap js до моєї теми magento2. Але проблема полягає в тому, коли я включаю bootstrap js на свою тему. Ця консоль часу дає помилку, що для завантажувальної програми потрібен jQuery.

Тоді як я можу це зробити ??? Може хто-небудь, будь ласка, допомогти мені?

magento2 jquery

— Асіш Хіра
джерело

Створення структури папок модуля:

app / code / [Vendor] / [ModuleName]

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

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

Створення файлів модулів:

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>

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

Увімкнути модуль (SSH до кореня magento):

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

php -f bin/magento setup:upgrade

Розгорніть статичні ресурси (SSH до кореня магенто):

php bin/magento setup:static-content:deploy

RequireJS не завантажує жоден вихідний файл модуля javascript, поки хтось не використає цей модуль javascript як залежність. за Алана Бурі

(приклад використання) на сторінці CMS:

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

Пов’язано: Додавання CSS на сторінку CMS за допомогою XML-версії оновлення

— Джошуа34
джерело

Дякую за це :) Дуже чітке керівництво. Хоча мені дивно бачити xsi:noNamespaceSchemaLocationцінність default.xml. Мені здається, це суперечить всій модульності в Magento, щоб визначити такий шлях. Але я бачу це в усьому Інтернеті, тому це повинно бути таким, як все працює.

— Алекс Тіммер

Дійсно xsi:noNamespaceSchemaLocation, застарілий, або навіть неправильний. В даний час він повинен бути таким, urn:magento:framework:Module/etc/module.xsdщо робить його гнучким.

— Jisse Reitsma

Я не думаю, що додавання default.xmlнасправді потрібно. Magento 2 вже завантажує RequireJS скрізь на всі сторінки, тому немає необхідності чітко додавати RequireJS самостійно.

— Джіссі Рейцма

Опублікував цю посаду в будь-якому випадку, тому що це приголомшливо.

— Джіссі Рейцма

Щоб додати файл JS для завантаження, я виконав наступні кроки в Magento 2.2.4.

Крок 1: Розмістіть файл JS у такому місці.

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

Крок 2: Додайте в цей файл наступні сценарії 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']
        }
    }
};

Крок 3: Додайте наступні сценарії у файли шаблонів або у власні файли JS (без scriptтегів).

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

Крок 4: Перейдіть до кореневої папки Magento і запустіть команду нижче.

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

— Мілан Чандро
джерело