Magento 2 : add custom JavaScript to CMS page create/edit in admin

Question 1

I would like to add some custom JavaScript to the CMS page create/edit pages in Magento 2 admin. So basically when you want to create a new page or edit an existing one, it should load some JavaScript preferably before body closing tag.

How would I go about doing this? I've already looked at the following posts:

Adding custom CSS to admin backend (thought it might similarly for js)
How to add custom css for adminhtml (same as previous)
http://alanstorm.com/magento_2_and_requirejs/
Magento 2 override amin js file
Unable to run custom js to admin backend

The one by Alan Storm did work, but it loaded my js on all admin pages, but that's not the idea, I just want to load my js for the CMS page create and edit pages.

Does anyone know how to do this?

Question 2

Try following way:

Vendor/Module/view/adminhtml/layout/cms_page_edit.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block class="Vendor\Module\Block\Cms\Custom" name="info" before="before.body.end" template="Vendor_Module::cms/custom.phtml" />
 </referenceContainer>
 </body>
</page>

Vendor/Module/Block/Cms/Custom.php


namespace Vendor\Module\Block\Cms;
class Custom extends \Magento\Framework\View\Element\Template
{
}

Vendor/Module/view/adminhtml/templates/cms/custom.phtml


Custom Block
<script>
 require([
 'jquery'
 ], function($){
 $(document).ready(function() {
 console.log('here')
 } );
 })
</script>

Question 3

There's still a problem, the page seems to be rendered via Ajax I think, so whenever I try to log a value from one of the inputs from 'cms_page_form.xml' I get an undefined. How do I make it load after all form fields have rendered?

Question 4

So after some more messing around, I found it is not Ajax, the fields just don't get renered until you click the parent fieldset (open the fieldset). That makes things a bit difficult. I'm still trying to figure out how to go about this.

Question 5

What you actually want? This code added custom block as well as template with JS.

Question 6

I think I found out what happens: apparently Magento 2 load all "fieldsets" on the admin pages, but doesn't load the underlying fields until clicked on the fieldset, that's why my js couldn't find the values, because they were not yet set. Now I'm checking if they are already set and if not, listen on the openining of the fieldset before trying again. What I want to do is be able to link CMS pages to other pages (which I got working), but exclude the current page from the list of selectable pages to link to.

Question 7

Try to set timeout for 5sec, then you can able to catch field.

Question 8

After quite a lot of messing around with it, I've finally found a solution quite similar to what @SohelRana suggested, except I didn't create my own block, but used Magento's default template block instead.

Basically what I did was create two layout rewrites: app/code/Vender/Module/view/adminhtml/layout/cms_page_edit.xml and .../cms_page_new.xml with both the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="before.body.end">
 <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::js.phtml" name="custom_cms_js"/>
 </referenceContainer>
 </body>
</page>

After that I created the following file app/code/Vendor/Module/view/adminhtml/templates/js.phtml with the following content:

<script>
 require([
 'jquery'
 ], function ($) {
 $(document).ready(function () {
 console.log('This is it, success!');
 });
 })
</script>

Sohel Rana Sohel Rana 36.2k3 gold badges74 silver badges94 bronze badges · Answer 1 · 2017-09-25 13:44:55Z

2

Try following way:

Vendor/Module/view/adminhtml/layout/cms_page_edit.xml


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="content">
 <block class="Vendor\Module\Block\Cms\Custom" name="info" before="before.body.end" template="Vendor_Module::cms/custom.phtml" />
 </referenceContainer>
 </body>
</page>

Vendor/Module/Block/Cms/Custom.php


namespace Vendor\Module\Block\Cms;
class Custom extends \Magento\Framework\View\Element\Template
{
}

Vendor/Module/view/adminhtml/templates/cms/custom.phtml


Custom Block
<script>
 require([
 'jquery'
 ], function($){
 $(document).ready(function() {
 console.log('here')
 } );
 })
</script>

Share

Improve this answer

answered Sep 25, 2017 at 13:44

Sohel Rana's user avatar

Sohel Rana Sohel Rana

36.2k3 gold badges74 silver badges94 bronze badges

7

There's still a problem, the page seems to be rendered via Ajax I think, so whenever I try to log a value from one of the inputs from 'cms_page_form.xml' I get an undefined. How do I make it load after all form fields have rendered?

Nico V
– Nico V

2017年09月29日 08:45:49 +00:00
Commented Sep 29, 2017 at 8:45
So after some more messing around, I found it is not Ajax, the fields just don't get renered until you click the parent fieldset (open the fieldset). That makes things a bit difficult. I'm still trying to figure out how to go about this.

Nico V
– Nico V

2017年09月29日 11:25:51 +00:00
Commented Sep 29, 2017 at 11:25
What you actually want? This code added custom block as well as template with JS.

Sohel Rana
– Sohel Rana

2017年09月29日 11:36:32 +00:00
Commented Sep 29, 2017 at 11:36
I think I found out what happens: apparently Magento 2 load all "fieldsets" on the admin pages, but doesn't load the underlying fields until clicked on the fieldset, that's why my js couldn't find the values, because they were not yet set. Now I'm checking if they are already set and if not, listen on the openining of the fieldset before trying again. What I want to do is be able to link CMS pages to other pages (which I got working), but exclude the current page from the list of selectable pages to link to.

Nico V
– Nico V

2017年09月30日 14:06:05 +00:00
Commented Sep 30, 2017 at 14:06
Try to set timeout for 5sec, then you can able to catch field.

Sohel Rana
– Sohel Rana

2017年09月30日 14:17:48 +00:00
Commented Sep 30, 2017 at 14:17

| Show 2 more comments

Nico V Nico V 872 silver badges14 bronze badges · Answer 2 · 2017-09-29 07:29:21Z

After quite a lot of messing around with it, I've finally found a solution quite similar to what @SohelRana suggested, except I didn't create my own block, but used Magento's default template block instead.

Basically what I did was create two layout rewrites: app/code/Vender/Module/view/adminhtml/layout/cms_page_edit.xml and .../cms_page_new.xml with both the following content:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="before.body.end">
 <block class="Magento\Framework\View\Element\Template" template="Vendor_Module::js.phtml" name="custom_cms_js"/>
 </referenceContainer>
 </body>
</page>

After that I created the following file app/code/Vendor/Module/view/adminhtml/templates/js.phtml with the following content:

<script>
 require([
 'jquery'
 ], function ($) {
 $(document).ready(function () {
 console.log('This is it, success!');
 });
 })
</script>

Stack Exchange Network

Magento 2 : add custom JavaScript to CMS page create/edit in admin

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Magento 2 : add custom JavaScript to CMS page create/edit in admin

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions