Menu

Injecting JavaScript and CSS Into Magento Admin Panel Page Head

JavaScript and CSS

Injecting JavaScript and CSS Into Magento Admin Panel Page Head

The Magento Admin panel is controlled by the Adminhtml module, which does not have a strict layout mapping. This is a problem when we want to add our own JavaScript and CSS to create a new module or improve old modules.

(This post is a developer’s guide.)

For pages lacking .xml layout, the common method like the following will not work:

[codesyntax lang=”javascript” lines=”fancy”]<action method=”addJs”><script>jquery/jquery.js</script></action>[/codesyntax]

Instead, we should directly inject the JS into the ‘blocks’ given by .php files.

For example, we want to load js/test_folder/test.js in an admin page,  then we can add the following:

[codesyntax lang=”php” lines=”fancy”]

$headBlock = $this->getLayout()->getBlock('head');
$items = $headBlock->getItems();
$items['js/test_folder/test.js'] = array(
        'type'=>'js',
        'name'=>'test_folder/test.js',
        'params'=>'',
        'if'=>null,
        'cond'=>null,
);

[/codesyntax]

The above above example can be easily applied for CSS too.

Related Posts