Magento 2 में कस्टम मॉड्यूल js फ़ाइल कैसे लोड करें?

Question

मैंने Magento 2 के लिए बैनर स्लाइडर मॉड्यूल बनाया है। मैंने निम्नलिखित तरीकों और इसके ठीक काम का उपयोग करके JS फ़ाइल को कॉल किया है। ब्लॉक क्लास में मैंने निम्नलिखित फंक्शन बनाए

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

और इस फ़ंक्शन bannerslider.phtmlको निम्न तरीके से फ़ाइल में कहा जाता है।

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

लेकिन, jQuery की निर्भरता तंत्र के अनुसार require.jsमैं इसे कैसे कर सकता हूं?

Answer 1

अंत में, मुझे अपनी क्वेरी का हल मिल गया। मैं इसे नीचे दिए गए विवरणों में साझा करना चाहूंगा।

चरण 1: के तहत अपने मॉड्यूल जेएस फ़ाइल जोड़ें<Vendor>/<Module_Name>/view/<area>/web/js/

जैसे <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

चरण 2: केrequirejs-config.js तहत फ़ाइल बनाएँ<Vendor>/<Module_Name>/view/<area>/

जैसे <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

निम्नलिखित कोड जोड़ें requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

नोट: आप अपनी पसंद के अनुसार अपना ऑब्जेक्ट नाम सेट कर सकते हैं। मेरे मामले में मैंने के रूप में सेट किया है bannersliderऔर फ़ाइल नाम में .js एक्सटेंशन को न जोड़ेंVendorName_ModuleName/js/flexslider

चरण 3: फ़ाइल में निम्नलिखित तरीके functionसे अपने मॉड्यूल जेएस को कॉल करें .phtml।

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

मेरे लिए यह ठीक है।

ट्रेस: Netलोड की गई या नहीं भरी हुई js फ़ाइल का अनुरोधित URL देखने के लिए टैब का उपयोग करें ।

Comments

'domReady' का उपयोग करने के लिए बेहतर है! $ (विंडो) .load () के बजाय प्लगइन की आवश्यकता होती है, उदाहरण के लिए (['jquery', 'bannerslider', 'domReady!], फ़ंक्शन ($) {... कोड केवल डोम लोड के बाद निष्पादित होते हैं)

— KAYy

हाँ, यह बहुत उपयोगी होगा।

— प्रफुल्ल राजपूत

@ यह निर्भर करता है, यदि आप स्क्रिप्ट को अंतिम रूप से निष्पादित करना चाहते हैं, तो क्या $ (विंडो) का उपयोग करना बेहतर नहीं है? क्या वह स्क्रिप्ट न केवल DOM पढ़ने पर चलती है, बल्कि जब सभी स्क्रिप्ट निष्पादित होती हैं?

— लाचेज़र रेचेव

और वह तरीका मेरे लिए काम नहीं कर रहा है ... स्थैतिक / adminhtml / Magento / backend / en_US / gift.js 404 (नहीं मिला) कहते हैं मैंने कैश और पब / स्टेटिक को साफ कर दिया है ... bot nope .. काम नहीं कर रहा है

— लाचेज़र रेचेव

खरोंच है कि, यह काम कर रहा है ... domReady! हालांकि काम नहीं कर रहा है ... मैं अन्य सभी लिपियों के लोड होने के बाद एक स्क्रिप्ट को चलाने के लिए कैसे कह सकता हूं, या जो वर्तमान मैजेंट 2 विज्ञान में मौजूद नहीं है?

— लाचेज़र रेचेव

Answer 2

मेरा तरीका है:

चरण 1

लेआउट निर्देशों का उपयोग करके एक्सटेंशन की बेस जावास्क्रिप्ट फ़ाइल शामिल करें।

चरण 2

आवश्यकता के साथ आधार फ़ाइल से एक्सटेंशन की अन्य जावास्क्रिप्ट फ़ाइलों की आवश्यकता होती है:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});

Comments

एक त्रुटि की आवश्यकता है परिभाषित नहीं किया गया है, क्योंकि मेरे जे एस आवश्यकता से पहले भरी हुई है

— साधारण आदमी