Magento2 में bootstrap.js कैसे जोड़ें

मैं अपने magento2 विषय पर बूटस्ट्रैप js को शामिल करने की कोशिश कर रहा हूं। लेकिन समस्या तब है जब मैं अपने विषय पर बूटस्ट्रैप 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>

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 to magento root):

php bin/magento setup:static-content:deploy

आवश्यकताएँ किसी भी जावास्क्रिप्ट मॉड्यूल स्रोत फ़ाइल लोड नहीं होगा जब तक कोई निर्भरता के रूप में उस जावास्क्रिप्ट मॉड्यूल का उपयोग करता है। प्रति एलन तूफान

(उदाहरण उपयोग) सीएमएस पृष्ठ में:

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

संबंधित: सीएसएस को लेआउट अपडेट एक्सएमएल का उपयोग करके सीएमएस पृष्ठ पर जोड़ना

— Joshua34
स्रोत

इसके लिए धन्यवाद :) एक बहुत स्पष्ट गाइड। हालांकि मुझे इसमें xsi:noNamespaceSchemaLocationमूल्य देखने में अजीब लगता है default.xml। यह मुझे लगता है कि यह Magento के सभी प्रतिरूपकता के खिलाफ जाता है, उस तरह से एक मार्ग को परिभाषित करने के लिए। लेकिन मैं इसे पूरे वेब पर देखता हूं, इसलिए इसे काम करने का तरीका होना चाहिए।

— एलेक्स टिमर

वास्तव में xsi:noNamespaceSchemaLocationपुराना है, या गलत भी है। वर्तमान में यह ऐसा होना चाहिए urn:magento:framework:Module/etc/module.xsdजो इसे लचीला बनाता है।

— जिस्से रीत्समा

मुझे नहीं लगता कि default.xmlवास्तव में इसके अलावा की जरूरत है। Magento 2 पहले से ही सभी पेजों पर हर जगह RequJS को लोड करता है, इसलिए खुद को Expljs को स्पष्ट रूप से जोड़ने की आवश्यकता नहीं है।

— १

इस पोस्ट को वैसे भी छोड़ दिया, क्योंकि यह कमाल है।

— १

बूटस्ट्रैप जेएस फाइल को जोड़ने के लिए, मैंने Magento 2.2.4 पर निम्न चरणों का पालन किया।

चरण 1: जेएस फ़ाइल को निम्न स्थान पर रखें।

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: टेम्पलेट फ़ाइलों या अपने कस्टम जेएस फ़ाइलों ( 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

— मिलन चंद्रो
स्रोत