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

adminadminhtmljavascriptrequirejs

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?

Best Answer

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>

Related Solutions

Magento – Add input fields as grid structure in cms page edit form

Take a look at the way you can specify a custom option for a product (Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option) and the assigned template file (catalog/product/edit/options/option.phtml in adminhtml). Here you can see how to setup a row (var firstStepTemplate) that and the needed javascript to add/remove rows.

Magento Admin – How to Add Custom AJAX JavaScript to Product Add/Edit Tabs

Since you have already created the attribute, you can add some layout XML to inject a helper script:

<adminhtml_catalog_product_edit>
    <reference name="head">
        <action method="addJs">
            <script>path/to/your/script.js</script>
        </action>
    </reference>
</adminhtml_catalog_product_edit>

For the product edit area only. You can place this in your related module's layout XML or else in app/design/adminhtml/default/default/layout/local.xml. So in the JS, I presume you'll be observing the change event of the target select element. On trigger, you'll make an AJAX call to ... ? I don't know that either, but if it's going to route back through Magento to get that information, you will likely need to also setup a controller.

Alternate Method

Another way to get the JS in place is to specify an "input renderer" when installing your attribute. Here's an article on how to do that: http://inchoo.net/magento/adding-magento-attribute-with-custom-input-renderer/

To summarize the article, install your attribute like so:

..
$installer->addAttribute(Mage_Catalog_Model_Product::ENTITY, 'example_field', array(
    'group'             => 'General',
    'type'              => 'text',
    'backend'           => '',
    'input_renderer'    => 'test/catalog_product_helper_form_example',
..

Notice the input_renderer field. This maps to a block which renders the form field for your attribute, like so:

class Namespace_Test_Block_Catalog_Product_Helper_Form_Example 
    extends Varien_Data_Form_Element_Text
{
    public function getAfterElementHtml()
    {
        $html = parent::getAfterElementHtml();

        return $html . "<script>//your script here</script>";
    }
...

You might not want to do this because your attribute is already installed, but I tend to prefer this method because of how tightly it couples the JS with the attribute.

Best Answer

Related Solutions

Magento – Add input fields as grid structure in cms page edit form

Magento Admin – How to Add Custom AJAX JavaScript to Product Add/Edit Tabs

Related Topic