Magento 2 : Add custom js to a single CMS pageMagento2: Add JS from Admin CMS page Design “layout update XML”Custom javascript not working/loading correctlyMagento 2 CMS page add custom breadcrumbsChange Shipping Method Name programmaticallyHow to create a new page without using CMS?How to add custom js file in Magento 2Select2 / Selectize JS does not start domReady! - RequireJsHow to get the Terms and conditions content in phtml?Change text and Relink the “Add To Cart” button in the product list page (list.phtml)Invalid Return Type in Ajax CallCompile email-inline.less not working

How to fry ground beef so it is well-browned

Multiple options vs single option UI

Determine the application client is using to connect

Is there really no use for MD5 anymore?

Should the Product Owner dictate what info the UI needs to display?

How come there are so many candidates for the 2020 Democratic party presidential nomination?

How to pronounce 'c++' in Spanish

Creating a chemical industry from a medieval tech level without petroleum

Two field separators (colon and space) in awk

Check if a string is entirely made of the same substring

Which term is being referred to with "reflected-sound-of-underground-spirits"?

Moving longtable left of margin

Why must Chinese maps be obfuscated?

How can I get rid of an unhelpful parallel branch when unpivoting a single row?

How to have a sharp product image?

Student asking for papers

Can I enter Heaven by simply doing good deeds while on Earth?

If a planet has 3 moons, is it possible to have triple Full/New Moons at once?

Thesis on avalanche prediction using One Class SVM

What happened to Captain America in Endgame?

A Paper Record is What I Hamper

Does a large simulator bay have standard public address announcements?

Who is the character that appears at the end of Endgame?

Mistake in years of experience in resume?

Magento 2 : Add custom js to a single CMS page

Magento2: Add JS from Admin CMS page Design “layout update XML”Custom javascript not working/loading correctlyMagento 2 CMS page add custom breadcrumbsChange Shipping Method Name programmaticallyHow to create a new page without using CMS?How to add custom js file in Magento 2Select2 / Selectize JS does not start domReady! - RequireJsHow to get the Terms and conditions content in phtml?Change text and Relink the “Add To Cart” button in the product list page (list.phtml)Invalid Return Type in Ajax CallCompile email-inline.less not working

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

I am trying to add custom js to a single CMS page in Magento 2.2.5.

Here is what I got:

I have put the rellax.min.js file at :/app/design/frontend/TemplateMonster/md/web/js

And I want to use that js on my about us CMS page so I invoked it like :

<script src="/app/design/frontend/TemplateMonster/md/web/js/rellax.min.js" type="text/javascript" xml="space"></script>
<script type="text/javascript" xml="space">// <![CDATA[
 var rellax = new Rellax('.rellax');
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

The problem I am facing is that the js doesn't seem to affect the rellax class like it is suppose to do.

Thanks for the help.

var config = 
 map: 
 '*': 
 rellax: 'md/js/rellax'
 
 ,
 shim: 
 rellax: 
 deps: ['jquery']
 ,
 
;

And this is the code in my CMS page

<script type="text/javascript" xml="space">// <![CDATA[
 require([
 'jquery',
 'md/js/rellax'
 ], function ($, script) 
 var rellax = new Rellax('.rellax');
 alert('Here');
 );
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

Please check edit

– Vivek Kumar
Aug 20 '18 at 22:34

The page is still showing the same thing with the same errors on the rellax.js script.

– Gabriel Lemire
Aug 20 '18 at 22:45

Please post the errors

– Vivek Kumar
Aug 20 '18 at 22:46

Please run deploy commands, and fix permissions. Also make sure you are calling js just the way listed in the answer and no other way.

– Vivek Kumar
Aug 20 '18 at 22:50

I have done both and still the same errors for the rellax.js script

– Gabriel Lemire
Aug 20 '18 at 22:58

|
show 3 more comments

I am trying to add custom js to a single CMS page in Magento 2.2.5.

Here is what I got:

I have put the rellax.min.js file at :/app/design/frontend/TemplateMonster/md/web/js

And I want to use that js on my about us CMS page so I invoked it like :

<script src="/app/design/frontend/TemplateMonster/md/web/js/rellax.min.js" type="text/javascript" xml="space"></script>
<script type="text/javascript" xml="space">// <![CDATA[
 var rellax = new Rellax('.rellax');
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

The problem I am facing is that the js doesn't seem to affect the rellax class like it is suppose to do.

Thanks for the help.

var config = 
 map: 
 '*': 
 rellax: 'md/js/rellax'
 
 ,
 shim: 
 rellax: 
 deps: ['jquery']
 ,
 
;

And this is the code in my CMS page

<script type="text/javascript" xml="space">// <![CDATA[
 require([
 'jquery',
 'md/js/rellax'
 ], function ($, script) 
 var rellax = new Rellax('.rellax');
 alert('Here');
 );
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

Please check edit

– Vivek Kumar
Aug 20 '18 at 22:34

The page is still showing the same thing with the same errors on the rellax.js script.

– Gabriel Lemire
Aug 20 '18 at 22:45

Please post the errors

– Vivek Kumar
Aug 20 '18 at 22:46

Please run deploy commands, and fix permissions. Also make sure you are calling js just the way listed in the answer and no other way.

– Vivek Kumar
Aug 20 '18 at 22:50

I have done both and still the same errors for the rellax.js script

– Gabriel Lemire
Aug 20 '18 at 22:58

|
show 3 more comments

I am trying to add custom js to a single CMS page in Magento 2.2.5.

Here is what I got:

I have put the rellax.min.js file at :/app/design/frontend/TemplateMonster/md/web/js

And I want to use that js on my about us CMS page so I invoked it like :

<script src="/app/design/frontend/TemplateMonster/md/web/js/rellax.min.js" type="text/javascript" xml="space"></script>
<script type="text/javascript" xml="space">// <![CDATA[
 var rellax = new Rellax('.rellax');
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

The problem I am facing is that the js doesn't seem to affect the rellax class like it is suppose to do.

Thanks for the help.

var config = 
 map: 
 '*': 
 rellax: 'md/js/rellax'
 
 ,
 shim: 
 rellax: 
 deps: ['jquery']
 ,
 
;

And this is the code in my CMS page

<script type="text/javascript" xml="space">// <![CDATA[
 require([
 'jquery',
 'md/js/rellax'
 ], function ($, script) 
 var rellax = new Rellax('.rellax');
 alert('Here');
 );
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

I am trying to add custom js to a single CMS page in Magento 2.2.5.

Here is what I got:

I have put the rellax.min.js file at :/app/design/frontend/TemplateMonster/md/web/js

And I want to use that js on my about us CMS page so I invoked it like :

<script src="/app/design/frontend/TemplateMonster/md/web/js/rellax.min.js" type="text/javascript" xml="space"></script>
<script type="text/javascript" xml="space">// <![CDATA[
 var rellax = new Rellax('.rellax');
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

The problem I am facing is that the js doesn't seem to affect the rellax class like it is suppose to do.

Thanks for the help.

var config = 
 map: 
 '*': 
 rellax: 'md/js/rellax'
 
 ,
 shim: 
 rellax: 
 deps: ['jquery']
 ,
 
;

And this is the code in my CMS page

<script type="text/javascript" xml="space">// <![CDATA[
 require([
 'jquery',
 'md/js/rellax'
 ], function ($, script) 
 var rellax = new Rellax('.rellax');
 alert('Here');
 );
// ]]></script>
<div class="content">
<div class="rellax slide1"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide2"></div>
<div class="rellax" data-rellax-speed="7">some text</div>
<div class="rellax slide3"></div>
</div>

magento2 javascript requirejs cms-pages

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

edited Aug 21 '18 at 6:25

ABHISHEK TRIPATHI

2,2021828

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

asked Aug 20 '18 at 19:55

Gabriel Lemire

185

Please check edit

– Vivek Kumar
Aug 20 '18 at 22:34

The page is still showing the same thing with the same errors on the rellax.js script.

– Gabriel Lemire
Aug 20 '18 at 22:45

Please post the errors

– Vivek Kumar
Aug 20 '18 at 22:46

Please run deploy commands, and fix permissions. Also make sure you are calling js just the way listed in the answer and no other way.

– Vivek Kumar
Aug 20 '18 at 22:50

I have done both and still the same errors for the rellax.js script

– Gabriel Lemire
Aug 20 '18 at 22:58

|
show 3 more comments

Please check edit

– Vivek Kumar
Aug 20 '18 at 22:34

The page is still showing the same thing with the same errors on the rellax.js script.

– Gabriel Lemire
Aug 20 '18 at 22:45

Please post the errors

– Vivek Kumar
Aug 20 '18 at 22:46

Please run deploy commands, and fix permissions. Also make sure you are calling js just the way listed in the answer and no other way.

– Vivek Kumar
Aug 20 '18 at 22:50

I have done both and still the same errors for the rellax.js script

– Gabriel Lemire
Aug 20 '18 at 22:58

Please check edit

– Vivek Kumar
Aug 20 '18 at 22:34

The page is still showing the same thing with the same errors on the rellax.js script.

– Gabriel Lemire
Aug 20 '18 at 22:45

Please post the errors

– Vivek Kumar
Aug 20 '18 at 22:46

Please run deploy commands, and fix permissions. Also make sure you are calling js just the way listed in the answer and no other way.

– Vivek Kumar
Aug 20 '18 at 22:50

I have done both and still the same errors for the rellax.js script

– Gabriel Lemire
Aug 20 '18 at 22:58

|
show 3 more comments

4 Answers
4

active

oldest

votes

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="MagentoFrameworkViewElementTemplate" 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

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

add a comment |

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']
 ,
 
;

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

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="MagentoFrameworkViewElementTemplate" 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="MagentoFrameworkViewElementTemplate" 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

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

|
show 1 more comment

You can directly add inside of the content. It will work.

<script>
 require(['jquery'],function($) 
 console.log('test');
 );
</script>

But once you saved, you cannot see it on the cms page content , so if you need to edit then go to the table then edit directly.

Table Name: cms_page

select * from cms_page where content regexp 'jquery';

It will only works on particular page. Thanks, thumps up.

answered Apr 2 at 10:38

ManiMaran A

14615

add a comment |

Thanks ManiMaran!! This is indeed the secret for getting more complex javascript to work inside Magento 2.

<script>
 require(['jquery'],function($) 
 //YOUR LOVELY JAVASCRIPT GOES HERE AND WILL NOW WORK IN CMS PAGE
 );
</script>

answered 1 hour ago

Disloxic

New contributor

add a comment |

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f238989%2fmagento-2-add-custom-js-to-a-single-cms-page%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

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="MagentoFrameworkViewElementTemplate" 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

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

add a comment |

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="MagentoFrameworkViewElementTemplate" 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

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

add a comment |

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="MagentoFrameworkViewElementTemplate" 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

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

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="MagentoFrameworkViewElementTemplate" 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

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

answered Aug 21 '18 at 7:03

ABHISHEK TRIPATHI

2,2021828

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

add a comment |

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

You are always welcome on MSE @GabrielLemire

– ABHISHEK TRIPATHI
Aug 21 '18 at 8:53

add a comment |

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']
 ,
 
;

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

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="MagentoFrameworkViewElementTemplate" 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="MagentoFrameworkViewElementTemplate" 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

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

|
show 1 more comment

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']
 ,
 
;

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

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="MagentoFrameworkViewElementTemplate" 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="MagentoFrameworkViewElementTemplate" 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

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

|
show 1 more comment

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']
 ,
 
;

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

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="MagentoFrameworkViewElementTemplate" 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="MagentoFrameworkViewElementTemplate" 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

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

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']
 ,
 
;

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

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="MagentoFrameworkViewElementTemplate" 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="MagentoFrameworkViewElementTemplate" 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

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

edited Aug 20 '18 at 22:34

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

answered Aug 20 '18 at 20:50

Vivek Kumar

2,6642730

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

|
show 1 more comment

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

Hi, thanks for your answer. I tried all the different methods explained by st3phan without any success. What information would you need to further help me.

– Gabriel Lemire
Aug 20 '18 at 22:09

Is rellax.min.js loading in your page?

– Vivek Kumar
Aug 20 '18 at 22:10

It is loading with those errors: Unable to resolve the source file for 'frontend/TemplateMonster/md/en_CA/md/js/rellax.js' #0 /public_html/vendor/magento/framework/App/StaticResource.php(134): MagentoFrameworkViewAssetFile->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): MagentoFrameworkAppStaticResource->launch() #2 /public_html/pub/static.php(13): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppStaticResource)) #3 main

– Gabriel Lemire
Aug 20 '18 at 22:17

I have added rellax.js in /public_html/app/design/frontend/TemplateMonster/md/web/js Then requirejs-config.js in this path /public_html/app/design/frontend/TemplateMonster/md with the following code var config = map: '*': rellax: 'md/js/rellax' , shim: rellax: deps: ['jquery'] , ;

– Gabriel Lemire
Aug 20 '18 at 22:22

Magento's way of serving files is a bit more complex then just stating paths .. Please may want to read up about magento's pipeline deployment here - devdocs.magento.com/guides/v2.2/config-guide/deployment

– Vivek Kumar
Aug 20 '18 at 22:23

|
show 1 more comment

You can directly add inside of the content. It will work.

<script>
 require(['jquery'],function($) 
 console.log('test');
 );
</script>

But once you saved, you cannot see it on the cms page content , so if you need to edit then go to the table then edit directly.

Table Name: cms_page

select * from cms_page where content regexp 'jquery';

It will only works on particular page. Thanks, thumps up.

answered Apr 2 at 10:38

ManiMaran A

14615

add a comment |

You can directly add inside of the content. It will work.

<script>
 require(['jquery'],function($) 
 console.log('test');
 );
</script>

But once you saved, you cannot see it on the cms page content , so if you need to edit then go to the table then edit directly.

Table Name: cms_page

select * from cms_page where content regexp 'jquery';

It will only works on particular page. Thanks, thumps up.

answered Apr 2 at 10:38

ManiMaran A

14615

add a comment |

You can directly add inside of the content. It will work.

<script>
 require(['jquery'],function($) 
 console.log('test');
 );
</script>

But once you saved, you cannot see it on the cms page content , so if you need to edit then go to the table then edit directly.

Table Name: cms_page

select * from cms_page where content regexp 'jquery';

It will only works on particular page. Thanks, thumps up.

answered Apr 2 at 10:38

ManiMaran A

14615

You can directly add inside of the content. It will work.

<script>
 require(['jquery'],function($) 
 console.log('test');
 );
</script>

But once you saved, you cannot see it on the cms page content , so if you need to edit then go to the table then edit directly.

Table Name: cms_page

select * from cms_page where content regexp 'jquery';

It will only works on particular page. Thanks, thumps up.

answered Apr 2 at 10:38

ManiMaran A

14615

answered Apr 2 at 10:38

ManiMaran A

14615

answered Apr 2 at 10:38

ManiMaran A

14615

answered Apr 2 at 10:38

ManiMaran A

14615

add a comment |

Thanks ManiMaran!! This is indeed the secret for getting more complex javascript to work inside Magento 2.

<script>
 require(['jquery'],function($) 
 //YOUR LOVELY JAVASCRIPT GOES HERE AND WILL NOW WORK IN CMS PAGE
 );
</script>

answered 1 hour ago

Disloxic

New contributor

add a comment |

Thanks ManiMaran!! This is indeed the secret for getting more complex javascript to work inside Magento 2.

<script>
 require(['jquery'],function($) 
 //YOUR LOVELY JAVASCRIPT GOES HERE AND WILL NOW WORK IN CMS PAGE
 );
</script>

answered 1 hour ago

Disloxic

New contributor

add a comment |

Thanks ManiMaran!! This is indeed the secret for getting more complex javascript to work inside Magento 2.

<script>
 require(['jquery'],function($) 
 //YOUR LOVELY JAVASCRIPT GOES HERE AND WILL NOW WORK IN CMS PAGE
 );
</script>

answered 1 hour ago

Disloxic

New contributor

Thanks ManiMaran!! This is indeed the secret for getting more complex javascript to work inside Magento 2.

<script>
 require(['jquery'],function($) 
 //YOUR LOVELY JAVASCRIPT GOES HERE AND WILL NOW WORK IN CMS PAGE
 );
</script>

answered 1 hour ago

Disloxic

New contributor

answered 1 hour ago

Disloxic

New contributor

answered 1 hour ago

Disloxic

answered 1 hour ago

Disloxic

New contributor

Disloxic is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Magento Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Dfrnhjy

4 Answers
4

Your Answer

Post as a guest

4 Answers
4

4 Answers
4

Post as a guest

Popular posts from this blog

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

4 Answers 4

4 Answers 4

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

4 Answers
4

4 Answers
4

4 Answers
4