Magento 2 : Add custom js to a single CMS page

You can do this by two ways as described below.

First create the custom.js at below location (in your case you have already did this)

app/design/{Vendor_name}/{theme}/web/js/custom.js

Now you can choose any of the below steps for your requirement.

1st Way

Just traverse to the below location

Admin > Content > Elements > Pages > Design > Layout Update XML

Put the below code there in that section

<head>
    <link src="js/custom.js"/>
</head>

Save the page & flush the cache & you will see it is working

2nd Way

Just traverse to the below location

Admin > Content > Elements > Pages > Content

Put the below code there in that section

{{block class="Magento\Framework\View\Element\Template"  name="test_file" template="Magento_Theme::test.phtml"}}

Now traverse to the below location & create a file with name test.phtml

Magento_root/app/design/frontend/{Vendor_name}/{theme}/Magento_Theme/templates/test.phtml

Put the below code there

<script type="text/x-magento-init">
{
      ".Your_class/#Your_id": {
              "https://www.example.com/demo/pub/static/frontend/{Vendor_name}/{theme}/en_US/js/custom.js": {}
       }
}
</script>

Now again flush the cache & refresh the page you will see your changes are working

Note: If it is not rendering your js there just do run the following commands from your magento_root

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

In magento 2 require js is used for sorting dependencies between js and loading them accordingly, so I suggest you use the same for doing it in your cms page.

A related question has been asked before too so I am just going to reference great answer given by @St3phan here -

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

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> <br/> <hr/> <br/> 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); <br/> After seeing your test work, you can change how you want it.

EDIT :

Just make a new phtml in Magento/Theme/templates folder of your theme and reference in layout update like following ;

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

Then in the phtml paste all the code you've done in your cms page and it should work fine.

Feel free to ask in case of any confusion

Tags:

Javascript

Requirejs

Magento2

Cms Pages

Recent Posts