2

I did added JS file from design layout update from Admin CMS page- > Design layout update XML , but it showing jQuery is not defined error, When I view source , these files are being added before the requireJS file.
How to add JS from Admin->Content->Pages ->Open CMS page -> Design ->"layout update XML" ?

<head> 
 <script src="js/pi.googleMapStyles.js" order="100"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" src_type="url" order="101"/>
<script src="js/jquery.gmap.min.js" order="102"/>
<script src="js/pi.global.js" order="103"/><script src="js/pi.init.map.js" order="104"/>
</head>

Thanks

2

You must quit what you have done so far in the XML layout.

You need requirejs-config.js in this path app/design/frontend/VendorName/Theme/ with bellow content:

var config = {
    map: {
        '*': {
            custom_js: 'VendorName_Theme/js/js_file_name'
        }
    },
    shim: {
        custom_js: {
            deps: ['jquery']
        },
    }
};


OR

You need requirejs-config.js in this path /app/design/frontend/VendorName/Theme/web/js/ with bellow content:

var config = {
    map: {
        '*': {
            custom_js: 'VendorName_ModuleName/js/js_file_name'
        }
    }
};

In a template you can call it:

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


OR

In a template you can call it:

<script>
    require([
        'jquery',
        'VendorName_ModuleName/js/js_file_name'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
</script>




You can add for any CMS Pages (from admin) a template file in Layout Update XML

<referenceContainer name="before.body.end">
    <block class="Magento\Framework\View\Element\Template" name="test" template="Magento_Theme::test.phtml"/>
</referenceContainer>

You can add for a test in test.phtml file from Magento_Theme in your current theme:

<pre>11111111</pre>
<script>
  require([
    'jquery',
    'Magento_Theme/js/js_file_name'
  ], function ($, script) {
    //Your code here
    alert('js_file_name - test');
  });
</script>


You can add for a test in js_file_name.js file from Magento_Theme in your current theme:

console.log(1234567890987654321);


After seeing your test work, you can change how you want it.

  • What in case if we just want to add this JS files into one cms page only ? – Pravin Aug 28 '17 at 11:01
  • If you want to add in one page, then you can use one of the last two examples above in a file template, and that file is loaded only there. – St3phan Aug 28 '17 at 11:06
  • I need to add on cms page and tempalte for cms is common for all cms page , so just to be clear when you say file template, I can add this code into CMS page from admin and it should work fine , correct ? – Pravin Aug 28 '17 at 11:22
  • You did not specify this in your description. You can only add a template file for cms pages <referenceContainer name="content"> <referenceBlock name="cms_page"> <block class="Magento\Framework\View\Element\Template" name="test.trigger" template="test.phtml"/> </referenceBlock> </referenceContainer>. – St3phan Aug 28 '17 at 12:23
  • Apologies for the confusion , I thought I added in my question title – Pravin Aug 28 '17 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.