ब्लॉक स्पेसिफिक JS (और CSS) को कैसे जोड़ें

इसलिए मैंने वक़्त गुज़ारने में घंटों बिताए हैं, पढ़ना, ect का अध्ययन करना, लेकिन किसी ने भी (एलन स्टॉर्म नहीं!) ने मुझे इस बारे में बताया है। ऐसा लगता है कि संपूर्ण इंटरनेट जेएस या सीएसएस को Magento 2 के एक विशेष पृष्ठ में जोड़ने में रुचि रखता है , लेकिन जो मैं देख रहा हूं वह एक विशेष ब्लॉक में JS / CSS जोड़ रहा है ।

तो, यहाँ संक्षेप में मेरा सवाल है:

जेएस (और इसके अतिरिक्त सीएसएस) को किसी विशेष ब्लॉक में जोड़ने का सबसे अच्छा तरीका क्या है , ताकि ब्लॉक पेज पर मौजूद हो (*) जेएस / सीएसएस लोड हो, अगर ब्लॉक नहीं है, तो कोई सीएसएस / जेएस नहीं है? ?

* इसका मतलब यह है कि किसी भी ब्लॉक को लेआउट /xml के माध्यम से एक पृष्ठ / टेम्पलेट पर, मेरे मॉड्यूल से एक कस्टम पृष्ठ पर, एक ब्लॉक / पृष्ठ के tottml विधि के माध्यम से या सबसे महत्वपूर्ण रूप से एक वर्ग के WYSIYG में एम्बेडेड ब्लॉक में सेट किया जा सकता है / उत्पाद विवरण / सीएमएस ब्लॉक / सीएमएस पृष्ठ।

मैंने एलन के महान लेखों (इस आदमी को फिर से !!) के अन्य लेखों का उल्लेख करने के लिए नहीं पढ़ा है , लेकिन मुझे लगता है कि हर कोई एक पृष्ठ, एक विशिष्ट पृष्ठ में जोड़ना चाहता है, जहां कभी भी नहीं। ब्लॉक का उपयोग किया जाता है।

मुझे लगता है कि मैं विभिन्न तकनीकों से परिचित हूं, हालांकि मुझे यहां कुछ याद आ रहा है, इसलिए मैं समुदाय से एक सहमति चाहता हूं, साथ ही साथ सभी फ्रंट एंडर्स के लिए साइन पोस्ट का एक सा हिस्सा पूरी तरह से स्टैक्ड देवों के लिए देख रहा हूं। इसी तरह के सवाल और मैं हूँ के रूप में विकल्पों की ओर इशारा करते हुए।

इससे पहले, मैगेंटो 1 में, मैं ब्लॉक कंस्ट्रक्टर को देखता हूं, लेआउट प्राप्त करता हूं, सिर संदर्भ प्राप्त करता हूं और वहां AddJs / addCss कॉल करता हूं, या यदि संभव हो तो लेआउट में तरीकों का उपयोग करें। xml। इससे जेएस को ब्लॉक कंस्ट्रक्टर पर रिसोर्स सूची में "जोड़ा" गया (थीम स्तर से पहले हेड ब्लॉक का उत्पादन होगा)। लेकिन यह अब संभव नहीं लगता।

मैंने जेएस / सीएसएस को जोड़ने के तरीके के बारे में पढ़ा है (यह एक सरल "मैं कैसे नहीं कर सकता हूं ???" यह अधिक सहमति है "सही / मैग 2 तरीका क्या है ???") और इनसे परिचित हूं तकनीकें:

<head></head>रूट तत्वों का उपयोग करके /view/ Isareaacing/layout/ Isdefault/page_idades.xml तकनीक
एक जोड़ा जा रहा है सिर अगर मेरे ब्लॉक भरी हुई है के बारे में तर्क के कुछ प्रकार के साथ, मेरे मॉड्यूल के लिए ब्लॉक, head.additional में appened
पेज / टेम्पलेट के कस्ट्रेक्टर से इंजेक्ट करने के लिए \ Asset \ GroupedCollection और \ Asset \ Repository ऑब्जेक्ट्स का उपयोग करना (यह ब्लॉक के साथ ऑर्क नहीं लगता है), संभावित रूप से लोडिंग का क्रम ??
आवश्यकताएँ का उपयोग करना और मेरे मॉड्यूल के लिए एक आवश्यकताJJ कॉन्फ़िगर करना

क्या मुझे कुछ याद आया ??

एक का मानना है कि सही तरीका जरुरतमंद पुस्तकालय का उपयोग करना होगा, और require("my_module", function(){ ... })इनलाइन स्क्रिप्ट में सिंटैक्स के साथ एक्स-मैगेंटो-इनिट विशेषताएँ या केवल एक स्क्रिप्ट। लेकिन यह मुझे klunky लगता है? मुझे स्क्रिप्ट लोड करने के लिए स्क्रिप्ट सेट अप करना होगा, मुझे अपने जेएस के कम से कम कुछ इनलाइन करने के लिए मजबूर होना पड़ता है, हालांकि यह "यहां मेरे ब्लॉक, अब मुझे कुछ जेएस की आवश्यकता है" कहने का सबसे सरल तरीका लगता है, इसे मेरे phtml में पॉपिंग करके।

लेकिन मैं वास्तव में PHP के माध्यम से ऐसा करने में सक्षम होना चाहूंगा, एक बैकएंड / स्टैक प्रोग्रामर के रूप में मैं आदर्श रूप से जेएस को दूर करना चाहूंगा और (आदर्श रूप में) अपने फ्रंट एंड टीम को यह लिखने की अनुमति दूंगा जैसा वे चाहते हैं। संक्षेप में लोडिंग का ख्याल रखें (बैक एंड देव टू फ्रॉन्ड एंड देव "एफ़टीएमएल, यदि आप चाहें तो थीम में ओवरराइड करें, इसी तरह जेएस फाइल, उसके आश्रित कामेच्छा और ब्लॉक के लिए सीएसएस को हायर करता है)।

यह __constructएसेट सिस्टम पर इंजेक्ट डिपेंडेंसी के साथ विधि का सुझाव देता है। लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है, यह एलन स्टॉर्म के त्वरित लेख में इसकी पुष्टि की जा रही है: मैगेंटो क्विकिज़: मैगेंटो 2: फ्रंटेंड एसेट फाइलें जोड़ना

साइन ऑफ पर ध्यान दें "ब्लॉक बनाने का कोई भी विचार जो उनके सामने अपनी संपत्तियों को ले जाता है वह खिड़की से बाहर है।" ... बुमेर :(

पढ़ने और विचार करने के लिए समय निकालने के लिए धन्यवाद दोस्तों । मैं आपकी प्रतिक्रियाओं को सुनने के लिए उत्सुक हूं!

PS> जाहिर तौर पर यह StackExchange है, इसलिए मैं उत्तर को सर्वश्रेष्ठ पाठ्यक्रम के रूप में चिह्नित करूँगा कि मैं क्या हासिल करने की कोशिश कर रहा हूं (विशिष्ट संसाधन लोड हो रहा है) हालांकि मैं किसी भी और सभी उत्तरों के नीचे दिए गए विवरणों के रूप में भी सूचीबद्ध करूंगा। या तो चर्चा में जोड़ें या एक ठोस समाधान सुझाएं!

— साइग्नस डिजिटल
स्रोत

जेएस के लिए यह आसान होना चाहिए क्योंकि मैजेंटो 2 का उपयोग करता है require.js।
तो इसका मतलब यह है कि आप मक्खी पर एक जेएस को शामिल कर सकते हैं जब आपको इसकी आवश्यकता होती है।

एक टेम्पलेट द्वारा एक ब्लॉक को (ज्यादातर मामलों में) रेंडर किया जाना है।
इसलिए आपको इसे अपने टेम्पलेट में जोड़ना होगा:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

अब अपनी js फाइल बनाएं view/adminhtml|frontend/web/js/filename_here.jsजहां आपका सभी js कोड मौजूद है।

require.js यह पता चलेगा कि अनुरोध करने पर आपकी फ़ाइल को कैसे चुनना है।

सीएसएस फ़ाइलों के लिए मुझे नहीं पता कि क्या यह संभव है।
सीएसएस फ़ाइलों को headपृष्ठ के अनुभाग में जाना चाहिए , लेकिन उदाहरण के लिए यदि आपके पास एक सेमी पृष्ठ की सामग्री के अंदर इस तरह से अपना ब्लॉक है {{block class="..." template="..."}}, जब सेमी पेज की सामग्री को संसाधित किया जाना चाहिए, तो उस बिंदु तक html पहले से ही प्रदान किया गया है इसलिए आप php के माध्यम से हेड ब्लॉक में कुछ और नहीं जोड़ सकते। आप इसे टेम्पलेट में जोड़ने का प्रयास कर सकते हैं, <style...लेकिन यह वह नहीं है जो आप चाहते हैं (मुझे लगता है)।

— Marius
स्रोत

धन्यवाद Marius, मैं आवश्यकता से अधिक जेएसएस मार्ग की खोज कर रहा हूं, जो मैंने ऊपर सूचीबद्ध की है, लेकिन कंसाइस उदाहरण के लिए धन्यवाद! हालाँकि मैं सहमत हूँ कि यह CSS समस्या के समाधान की पेशकश नहीं करता है, हालाँकि यह Magento के कम संकलक ect के कारण एक म्यूट बिंदु हो सकता है। इसके अलावा, यह अमूर्त है, लेकिन मुझे लगता है कि हम अपने जेएस को लोड करने के लिए requJS का उपयोग कर सकते हैं, जो बदले में स्टाइलशीट योगी डोम के लिंक को जोड़ सकता है, कम से कम इसका एसिंक्रोनस !!!

— सायगनस डिजिटल

वास्तव में, मुझे यह आवश्यक पृष्ठों पर लगता है, सीएसएस को आवश्यकता के साथ कैसे लोड किया जाए! : Requirejs.org/docs/faq-advanced.html#css

— डिजिटल सिग्नस

@cygnusdigital। अच्छा लगा। तो समस्या हल हो :)

— मेरियस

हाय मारियस, ठीक है हाँ और नहीं, यह समाधान के लिए एक अच्छा उम्मीदवार है, यह आवश्यकताओं को फिट करता है इसलिए मैं आपके इनपुट के लिए धन्यवाद करता हूं, लेकिन मैं चर्चा और विकल्पों की तलाश कर रहा हूं। शायद इसका सिर्फ मुझे एक डायनासोर होने के नाते लेकिन मुझे लगता है कि इसके निर्माण के लिए जेएस / सीएसएस लोडिंग के लिए अधिक सहमति है, अर्थात। "यदि ब्लॉक बनाया / शामिल किया गया है, तो इसे सिर पर जोड़ें।" : DI आश्चर्य करता है कि क्या यह संभव है कि सशर्त रूप से मक्खी पर सिर को जोड़ा जाए। (यानी मेरे मॉड्यूल से हेड ब्लॉक में एक हेड ब्लॉक जोड़ें। ब्लॉक कंस्ट्रक्टर स्टेज पर एडिशनल)।

— साइग्नस डिजिटल

आप ऐसा नियमित ब्लॉक के साथ कर सकते हैं जो लेआउट फ़ाइलों के माध्यम से जोड़ा जाता है, लेकिन जैसा कि मैंने समझाया कि आप {{block}}निर्देशों के माध्यम से पृष्ठ सामग्री में शामिल ब्लॉकों के लिए ऐसा नहीं कर सकते हैं , क्योंकि ब्लॉक वर्ग का तात्कालिक होने पर सिर अनुभाग पहले ही प्रदान किया गया है।

— मेरियस

ब्लॉक स्पेसिफिक JS (और CSS) को कैसे जोड़ें - The _right_ way?