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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
14
  • What in case if we just want to add this JS files into one cms page only ?
    – magento2new
    Aug 28, 2017 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, 2017 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 ?
    – magento2new
    Aug 28, 2017 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, 2017 at 12:23
  • Apologies for the confusion , I thought I added in my question title
    – magento2new
    Aug 28, 2017 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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