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?

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

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.