如何在magento2中添加bootstrap.js

我想在我的magento2主题中包含bootstrap js。但是问题是当我在主题中包含bootstrap js时。那个时间控制台发出引导需要jQuery的错误。

那我该怎么办呢？谁能帮帮我吗？

magento2 jquery

— Asish Hira
source

创建模块文件夹结构：

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>

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>

启用模块（SSH到magento根目录）：

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

php -f bin/magento setup:upgrade

部署静态资源（SSH到magento根目录）：

php bin/magento setup:static-content:deploy

除非有人使用该javascript模块作为依赖项，否则RequireJS不会加载任何javascript模块源文件。每艾伦风暴

（示例用法）在CMS页面中：

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

相关： 使用布局更新XML将CSS添加到CMS页面

— 约书亚记34
source

谢谢你:)一个非常清晰的指南。虽然我发现看到中的xsi:noNamespaceSchemaLocation值很奇怪default.xml。在我看来，这与定义Magento的所有模块背道而驰。但是我在网上看到了所有内容，因此它一定是事情的工作方式。

— 亚历克斯·蒂默

确实，这xsi:noNamespaceSchemaLocation已经过时，甚至是错误的。当前应该urn:magento:framework:Module/etc/module.xsd使它变得灵活。

— Jisse Reitsma，2016年

我认为default.xml实际上不需要添加。Magento 2已经在所有页面上的所有位置加载了RequireJS，因此无需自己显式添加RequireJS。

— Jisse Reitsma '16

无论如何都要增加此帖子，因为它很棒。

— Jisse Reitsma '16

要添加引导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

— 米兰·钱德罗
source