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 pathapp/design/frontend/VendorName/Theme/
with bellow content:var config = { map: { '*': { custom_js: 'VendorName_Theme/js/js_file_name' } }, shim: { custom_js: { deps: ['jquery'] }, } };
ORYou 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 fromMagento_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 injs_file_name.js
file fromMagento_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