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.
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']
,
;
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
|
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.
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']
,
;
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
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.
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']
,
;
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
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.
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']
,
;
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
magento2 javascript requirejs cms-pages
edited Aug 21 '18 at 6:25
ABHISHEK TRIPATHI
2,2021828
2,2021828
asked Aug 20 '18 at 19:55
Gabriel LemireGabriel Lemire
185
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
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
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 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
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
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_rootphp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
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']
,
;
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="MagentoFrameworkViewElementTemplate" 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 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
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 addedrellax.js
in/public_html/app/design/frontend/TemplateMonster/md/web/js
Thenrequirejs-config.js
in this path/public_html/app/design/frontend/TemplateMonster/md
with the following codevar 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.
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>
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
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_rootphp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
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_rootphp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
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_rootphp bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
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_rootphp 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 TRIPATHIABHISHEK TRIPATHI
2,2021828
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
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']
,
;
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="MagentoFrameworkViewElementTemplate" 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 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
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 addedrellax.js
in/public_html/app/design/frontend/TemplateMonster/md/web/js
Thenrequirejs-config.js
in this path/public_html/app/design/frontend/TemplateMonster/md
with the following codevar 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']
,
;
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="MagentoFrameworkViewElementTemplate" 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 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
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 addedrellax.js
in/public_html/app/design/frontend/TemplateMonster/md/web/js
Thenrequirejs-config.js
in this path/public_html/app/design/frontend/TemplateMonster/md
with the following codevar 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']
,
;
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="MagentoFrameworkViewElementTemplate" 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 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
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="MagentoFrameworkViewElementTemplate" 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 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 KumarVivek Kumar
2,6642730
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 addedrellax.js
in/public_html/app/design/frontend/TemplateMonster/md/web/js
Thenrequirejs-config.js
in this path/public_html/app/design/frontend/TemplateMonster/md
with the following codevar 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 addedrellax.js
in/public_html/app/design/frontend/TemplateMonster/md/web/js
Thenrequirejs-config.js
in this path/public_html/app/design/frontend/TemplateMonster/md
with the following codevar 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
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
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
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
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
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.
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.
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.
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 AManiMaran A
14615
14615
add a comment |
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>
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>
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>
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>
New contributor
New contributor
answered 1 hour ago
DisloxicDisloxic
1
1
New contributor
New contributor
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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