Magento 2 में एक jQuery लाइब्रेरी जोड़ना

Question

कैसे एक तीसरे पक्ष के डेवलपर Magento 2 के लिए एक jQuery पुस्तकालय जोड़ सकते हैं?

जबकि Magento 2 में उनके दृश्य विषयों में jQuery का एक संस्करण शामिल है, jQuery ऑब्जेक्ट तुरंत वैश्विक नामस्थान में उपलब्ध नहीं है । मुझे लगता है कि यह इसलिए है क्योंकि Magento 2 ने jQuery में खींचने के लिए आवश्यकताएँ का उपयोग किया है, और जब तक इसकी आवश्यकता नहीं होती तब तकJJS एक मॉड्यूल फ़ाइल को लोड नहीं करेगा।

यह jQuery प्लगइन्स के लिए एक समस्या प्रस्तुत करता है। आम तौर पर, मैं HTML के साथ एक प्लगइन शामिल करता हूँ जो कुछ इस तरह दिखता है

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

यह, हालांकि, Magento 2 के साथ संभव नहीं है। क्योंकि jquery.cookie.jsफ़ाइल वैश्विक jQuery ऑब्जेक्ट का उपयोग करके jQuery प्लगइन को परिभाषित करता है, यह Magento 2 में एक jQuery is not definedत्रुटि के साथ विफल हो जाएगा ।

कैसे एक फ्रंट एंड डेवलपर को Magento 2 के फ्रंट एंड एप्लिकेशन में एक मानक jquery प्लगइन लाइब्रेरी शामिल करनी चाहिए?

Comments

magento.stackexchange.com/questions/97184/… शायद मददगार

— सत्ती

@QaisarSatti नहीं, इस संदर्भ में मददगार नहीं है? यह दिखाता है कि मुख्य jquery पुस्तकालय का उपयोग कैसे करें, और Magento विजेट का उपयोग करें। यह मानक jquery प्लगइन में कैसे खींचना है, इसके बारे में कुछ नहीं कहता है।

— एलन स्टॉर्म

@AlanStorm आप आवश्यकता के उपयोग के बिना Jquery जोड़ना चाहते हैं?

— शहीर अली

@ शेहरअली नहीं, मैं उस jQuery का उपयोग करना चाहता हूं जो Magento 2 के साथ जहाज करता है , और एक तीसरे पक्ष के jquery प्लगइन का उपयोग करता है जो Magento 2 के साथ जहाज नहीं करता है

— एलन स्ट्रॉम

@AlanStrom आपको अपनी js फ़ाइल में आवश्यकता के अनुसार js फ़ंक्शन के बीच अपना तीसरा पार्टी प्लगइन js कोड डालने की आवश्यकता है (जैसे कि 'jquery'], function ($) {// अपना प्लगइन कोड}};

— शहीर अली

Answer 1

आवश्यकताएं बनाएँ- config.js Companyname \ Modulename \ view \ frontend \ requjs-config.js जोड़ें

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

आपके JS फ़ाइल आपके मॉड्यूल में Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
आप केवल सिंटैक्स का उपयोग करके jquery lib जोड़ सकते हैं

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

दूसरा उदाहरण

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Comments

फ्लेक्सस्लाइडर जावास्क्रिप्ट फ़ाइल को HTML पेज में कैसे शामिल किया जाता है और / या आवश्यकता है?

— एलन स्टॉर्म

आप आवश्यकता के अनुसार js.if का उपयोग करके जोड़ सकते हैं, जिसका मैं विस्तार से वर्णन करता हूं

— प्रतिक

@AlanStorm कृपया उत्तर को स्वीकार करें यदि आप स्पष्ट हैं तो मुझे बताएं कि मैं अधिक जानकारी साझा नहीं करूंगा :)

— प्रतिक

भले ही यह काम करता है, "jQuery परिभाषित नहीं है" त्रुटि अभी भी हर आधा दर्जन पृष्ठ ताज़ा करती है।

— थीमानोक्वास्टेथमैन

एलन ने अपने ब्लॉग पोस्ट में इस मुद्दे का एक बड़ा विराम

— jzahedieh

Answer 2

मैं Magento डॉक्स को उद्धृत करता हूं ।

तृतीय-पक्ष प्लगइन पर निर्भरता बनाने के लिए, निम्नलिखित कॉन्फ़िगरेशन फ़ाइलों में एक शिम निर्दिष्ट करें:

अपनी आवश्यकताओं में config -js:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

फिर अपने थीम या मॉड्यूल में अपना थर्ड पार्टी प्लगइन कोड शामिल करें: "web / js / 3-rd-party-plugin.js" जैसे:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

यह समाधान अनुकूल है क्योंकि आप किसी भी प्रकार के संशोधन के बिना अपनी प्लगइन फ़ाइल को शामिल कर रहे हैं। जब तक कि प्लगइन लेखक अपडेट या यहां तक ​​कि सीडीएन का उपयोग न करे, तब तक जेएस फाइल को बदल दें!

Answer 3

सबसे अच्छी बात यह है कि इस तरह के प्लगइन्स / पुस्तकालयों को शामिल करने के लिए एक Magento 2 मॉड्यूल या एक थीम का उपयोग करें । यह अनुशंसित तरीका और सर्वोत्तम अभ्यास है ।

---

विधि 1> विषय : यदि जावास्क्रिप्ट / jquery पुस्तकालय विषय से संबंधित है (व्यवस्था के रूप और स्वरूप को बदलने के लिए)।

• निम्नलिखित घटक में से एक में कस्टम घटक स्रोत फ़ाइल रखें
  [theme_dir] / web / js /
• [Theme_dir] में अपनी आवश्यकताएँ- config.js फ़ाइल रखें
  

---

विधि 2> MODULE : यदि जावास्क्रिप्ट / jquery लाइब्रेरी किसी विशेष व्यवसाय फ़ंक्शन से संबंधित है या एक Magento सुविधा को संभालती है। यह एक मॉड्यूल के अंदर जाना चाहिए।

• निम्नलिखित घटक में से किसी एक में कस्टम घटक स्रोत फ़ाइल रखें
  [मॉड्यूल_डिर] / दृश्य / दृश्य / वेब / js /

• [Mod_dir] / view / frontend / में अपनी आवश्यकता- config.js फ़ाइल रखें
  

Magento 2 दृढ़ता से डिफ़ॉल्ट Magento घटकों और विगेट्स के स्रोत कोड को बदलने की सिफारिश नहीं करता है। सभी अनुकूलन कस्टम मॉड्यूल या थीम में लागू होने चाहिए।

Answer 4

एलन, jQuery यूआई विजेट कारखाने का एक विशेष मामला है। AMD को संगत बनाने के लिए कृपया निम्न लिंक की जाँच करें।

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/