วิธีเพิ่ม bootstrap.js ใน magento2

ฉันพยายามรวม bootstrap js ในธีม magento2 ของฉัน แต่ปัญหาคือเมื่อฉันรวม bootstrap js ในชุดรูปแบบของฉัน เวลานั้นคอนโซลให้ข้อผิดพลาดที่ bootstrap ต้องการ jQuery

ถ้าอย่างนั้นฉันจะทำยังไง ??? ใครช่วยได้บ้าง

magento2 jquery

— Asish Hira
แหล่งที่มา

สร้างโครงสร้างโฟลเดอร์โมดูล:

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 ถึงรูทวีโอไอพี):

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 นั้นเป็นการอ้างอิง ต่อAlan Storm

(ตัวอย่างการใช้งาน) ในหน้า CMS:

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

สิ่งที่เกี่ยวข้อง: การ เพิ่ม CSS ไปยังหน้า CMS โดยใช้ Layout Update XML

— Joshua34
แหล่งที่มา

ขอบคุณสำหรับสิ่งนี้ :) คำแนะนำที่ชัดเจนมาก แม้ว่าฉันพบว่ามันแปลกที่จะเห็นค่าในxsi:noNamespaceSchemaLocation default.xmlฉันคิดว่ามันขัดกับส่วนย่อยทั้งหมดใน Magento เพื่อกำหนดเส้นทางแบบนั้น แต่ฉันเห็นมันทั่วทั้งเว็บดังนั้นมันจึงต้องเป็นวิธีการทำงานของ

— Alex Timmer

อันที่จริงxsi:noNamespaceSchemaLocationล้าสมัยหรือผิดไปแล้ว ขณะนี้มันควรจะurn:magento:framework:Module/etc/module.xsdทำให้ยืดหยุ่น

— Jisse Reitsma

ฉันไม่คิดว่าdefault.xmlจำเป็นต้องเพิ่มสิ่งใดเพิ่มเติม Magento 2 โหลด RequireJS ทุกที่ในทุกหน้าดังนั้นไม่จำเป็นต้องเพิ่ม RequireJS อย่างชัดเจนด้วยตัวเอง

— Jisse Reitsma

เพิ่มไปยังโพสต์นี้เพราะมันยอดเยี่ยม

— Jisse Reitsma

ในการเพิ่มไฟล์ bootstrap 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:ไปที่โฟลเดอร์ root ของ Magento และเรียกใช้คำสั่งด้านล่าง

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

— มิลานจันโดร
แหล่งที่มา