सभी पृष्ठों पर आवश्यक फ़ाइलों को लोड करने के लिए आवश्यकता-config.js का उपयोग करें

Question

मुझे पता है कि require-config.jsकस्टम थीम में कैसे उपयोग किया जाता है, लेकिन मैं myfile.jsसभी पृष्ठों पर कस्टम जावास्क्रिप्ट फ़ाइल ( ) का उपयोग करना चाहूंगा । मुझे किस निर्देशिका में जोड़ना चाहिए require-config.jsऔर इसका उपयोग कैसे करना चाहिए , ताकि यह उसी तरह काम करे जैसा कि इसे करना चाहिए?

कृपया, Magento के आधिकारिक पेज का संदर्भ न लें।

Comments

आप सीधे लेआउट xml हेड टैग के अंदर js कह सकते हैं और आपको प्रत्येक पृष्ठ में js मिला।

— राकेश जेसादिया

आपके उत्तर के लिए धन्यवाद। लेकिन अगर मैं इसके साथ आवश्यकता-विन्यास और लोड फ़ाइलों का उपयोग करना चाहूंगा, तो Magento 1 की तरह नहीं?

— ऐित्र

Magento 2 में इसका समर्थन भी आप मॉड्यूल-थीम फ़ोल्डर लेआउट / default_head_block.xml फ़ाइल की जांच कर सकते हैं

— राकेश जेसादिया

हाँ मैं जानता हूँ। लेकिन, मैं सही तरीके से आवश्यकता-config.js का उपयोग करना चाहता हूं।

— एित्र

Answer 1

requirejs-config.jsजावास्क्रिप्ट संसाधन मानचित्रण बनाने के लिए उपयोग करता है । हम पा सकते हैं सभी के तहत विन्यास की आवश्यकता है pub/static/_requirejs:।

जहां तक ​​मुझे पता है, आवश्यकता के अनुसार हमारी कस्टम स्क्रिप्ट को लोड करने का सही तरीका है Js: हमारी स्क्रिप्ट को कॉल करने के लिए टेम्पलेट का उपयोग करना । हम Magento\Framework\View\Element\Templateइसके ब्लॉक वर्ग के साथ नया खाका तैयार करेंगे ।

यदि हम सभी पृष्ठों पर js फाइलें लोड करना चाहते हैं और एक नया मॉड्यूल नहीं बनाना चाहते हैं, तो हमारे ब्लॉक को Magento थीम मॉड्यूल में before.body.endया इसकेafter.body.start container संदर्भ में होना चाहिए default.xml।

एप्लिकेशन / डिजाइन / दृश्यपटल / विक्रेता / विषय / Magento_Theme / लेआउट / default.xml

<?xml version="1.0"?>

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
    </referenceContainer>

</page>

एप्लिकेशन / डिजाइन / दृश्यपटल / विक्रेता / विषय / requirejs-config.js

var config = {
    map: {
        '*': {
            customScript:'Magento_Theme/js/customscript'
        }
    }
};

एप्लिकेशन / डिजाइन / दृश्यपटल / विक्रेता / विषय / Magento_Theme / वेब / js / customscript.js

define('jquery', function($) {

    //Your code here
    //alert('Here');

    }(jQuery)
);

हमारा टेम्प्लेट हमारी स्क्रिप्ट को कॉल करेगा: ऐप / डिज़ाइन / फ्रंटएंड / वेंडर / थीम / Magento_Theme / टेम्प्लेट / custom_js.phtml

<script>// <![CDATA[
    require([
        'jquery',
        'customScript'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
    // ]]>
</script>

Magento कैश को साफ़ करें और स्थिर सामग्री को चलाएं: php bin/magento setup:static-content:deploy

Comments

मैं अपनी स्क्रिप्ट को कॉल करता हूं \app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtml, लेकिन मुझे थीम फ़ोल्डर (एप्लिकेशन / डिज़ाइन / फ्रंटएंड / वेंडर / थीम / आवश्यकता-कॉन्फ़िगर-जेएस) में आवश्यकताएं-config.js और स्क्रिप्ट है। यह ठीक है? समस्या यह है कि मैं अपनी स्क्रिप्ट को कई अलग-अलग स्थानों से कहता हूं।

— ित्र

आपकी स्क्रिप्ट केवल तब प्रभावित होती है जब टेम्पलेट templa‌​tes\product\widget\c‌​ontent\grid.phtmlकहा जाता है।

— खोआ TruongDinh

हां, यह ठीक है - समस्या उस एक के साथ है: magento.stackexchange.com/questions/149019/… , मैं सोच रहा हूं कि क्या यह मुद्दा किसी तरह से कॉल करने के लिए जरूरी है।

— ित्र

@KhoaTruongDinh मैं इससे थोड़ा भ्रमित हूं। मैंने अभी तक ठीक से परीक्षण नहीं किया है, लेकिन क्या मैं यह सोचने में सही हूं कि फ़ंक्शन custom_js.phtmlको एक नियमित कॉलबैक के रूप में माना जाता है, जो कोड के निष्पादन के बाद किया जाता है customscript.js? या मुझे customscript.jsफ़ंक्शन के भीतर से घोषित कोड निष्पादित करने की आवश्यकता होगी custom_js.phtml?

— जोशुआ बाढ़

@KhoaTruongDinh मैं यह भी सोच रहा हूं कि इवेता का जवाब यह क्यों कहता है कि आपका नाम after.body.startबदल दिया जाना चाहिए before.body.end?

— जोशुआ बाढ़

Answer 2

आवश्यकता-विन्यास फ़ाइल: एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / दृश्य / दृश्य / आवश्यकताएँ / config.js

var config = {
    paths: {            
         'myfile': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'myfile': {
        deps: ['jquery']
    }
  }
} 

आपका js फ़ाइल में होना चाहिए: एप्लिकेशन / कोड / विक्रेता / मॉड्यूल / दृश्य / दृश्य / वेब / js / myfile.js

अब आप नीचे दिए गए तरीके से अपनी टेम्पलेट फ़ाइल में कहीं भी उपयोग कर सकते हैं:

<srcipt>
 require(["jquery","myfile"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>

Comments

हाँ, यह सही है। लेकिन मैंने पूछा कि क्या किसी को पता है कि इसे थीम फ़ोल्डर में कैसे उपयोग करना है, न कि मॉड्यूल पर निर्भर करता है - इसे पूरे पृष्ठ पर लोड किया जाना चाहिए, न कि केवल एक मॉड्यूल पर।

— ऐित्र

आप इसे विषय फ़ोल्डर में भी उपयोग कर सकते हैं, बस स्क्रिप्ट के ऊपर कॉल कर सकते हैं और आप अपने js का उपयोग कर सकते हैं

— राकेश जेसादिया

कृपया मुझे बताएं कि क्या आपके पास कोई मुद्दा है

— राकेश जेसादिया

यह काम करता है, धन्यवाद। लेकिन फिर भी, मैं कुछ अन्य मुद्दों पर बात कर रहा हूं: magento.stackexchange.com/questions/149019/…

— Anitr

नमस्ते, कृपया मुझे बताएं कि स्टेप फाइल कहां रखें?

— प्रिया

Answer 3

उपयोग करने में एक आसान संस्करण है deps। रिक्वायरमेंट्स- डिपेंडेंस में डिपेंडेंसीज आपकी फाइल को तब लोड करेगा जब रिक्वायरमेंट्स खुद लोड होंगी (हर जगह शॉप में)। यहाँ एक उदाहरण दिया गया है कि आपके रिक्जेस्ट को कैसे देखना चाहिए।

var config = {
    // When load 'requirejs' always load the following files also
    deps: [
        'common-js'
    ],

    // Library file path.
    paths: {
        'common-js': 'js/Your-File-Name'
    },

    // The rest of your config file ...

Answer 4

खोआ की सिफारिश के लिए एक वैकल्पिक दृष्टिकोण के रूप में, जो उत्कृष्ट मैगेंटो देव अभ्यास है, आप अपने जावास्क्रिप्ट को इस से एक .phtml फ़ाइल में पेस्ट कर सकते हैं:

<srcipt>
require(["jquery"],function($){
 $(document).ready(function(){
    your script here...
 })
});
</script>

इसके बाद अपनी phtml फ़ाइल को default.xml से लिंक करें जैसा कि खोआ के उत्तर में वर्णित है, हालांकि मैं इसे पहले से जोड़ने की सलाह दूंगा। और, फिर कॉपीराइट जेएफटी से अपनी जेएस स्क्रिप्ट को इस तरह से कॉल करें :

<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>

Copyright.phtml हर पेज पर चेकआउट जैसे पेज पर भी लोड हो जाता है, जहाँ पाद लेख छोड़ा गया है।