4

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>
Improve this question
8
  • 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
8

You can do this by two ways as described below.

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

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

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

1st Way

Just traverse to the below location

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

Put the below code there in that section

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

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

2nd Way

Just traverse to the below location

Admin > Content > Elements > Pages > Content

Put the below code there in that section

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

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

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

Put the below code there

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

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

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

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
Improve this answer
1
  • You are always welcome on MSE @GabrielLemire – Abhishek Tripathi Aug 21 '18 at 8:53
3

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

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

You must quit what you have done so far in the XML layout.

You need requirejs-config.js in this path app/design/frontend/VendorName/Theme/ with bellow content: 

var config = {
    map: {
        '*': {
            custom_js: 'VendorName_Theme/js/js_file_name'
        }
    },
    shim: {
        custom_js: {
            deps: ['jquery']
        },
    }
};


OR

You need requirejs-config.js in this path /app/design/frontend/VendorName/Theme/web/js/ with bellow content: 

var config = {
    map: {
        '*': {
            custom_js: 'VendorName_ModuleName/js/js_file_name'
        }
    }
}; In a template you can call it:

<script>
    require([
        'jquery',
        'custom_js'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
</script> <br/>

OR

In a template you can call it:

<script>
    require([
        'jquery',
        'VendorName_ModuleName/js/js_file_name'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
</script> <br/> <hr/> <br/> You can add for any CMS Pages (from admin) a template file in `Layout Update XML`

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

You can add for a test in test.phtml file from Magento_Theme in your current theme:

<pre>11111111</pre>
<script>
  require([
    'jquery',
    'Magento_Theme/js/js_file_name'
  ], function ($, script) {
    //Your code here
    alert('js_file_name - test');
  });
</script>


You can add for a test in js_file_name.js file from Magento_Theme in your current theme:

console.log(1234567890987654321); <br/> After seeing your test work, you can change how you want it.

EDIT :

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

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

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

Feel free to ask in case of any confusion

Improve this answer
6
  • 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): Magento\Framework\View\Asset\File->getSourceFile() #1 /public_html/vendor/magento/framework/App/Bootstrap.php(256): Magento\Framework\App\StaticResource->launch() #2 /public_html/pub/static.php(13): Magento\Framework\App\Bootstrap->run(Object(Magento\Framework\App\StaticResource)) #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
0

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>
Improve this answer
0

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

<script type="text/javascript" xml="space">
// <![CDATA[
require([ "jquery" ], function( $ ) {
 console.log('working...');
});
// ]]>
</script>

Thanks, thumps up.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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