0

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:

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?

Improve this question

2 Answers 2

Reset to default
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>
Improve this answer
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
    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
    Commented Sep 29, 2017 at 11:25
  • What you actually want? This code added custom block as well as template with JS.
    – Sohel Rana
    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
    Commented Sep 30, 2017 at 14:06
  • Try to set timeout for 5sec, then you can able to catch field.
    – Sohel Rana
    Commented Sep 30, 2017 at 14:17
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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