Magento – Why is the default js files outside the theme package

adminadminhtmljavascriptmagento-1.7theme

I am developing a new admin module and needs to customize the magento admin panel. i've created a new theme in default package of adminhtml. In the skin folder (skin/default/mytheme) i've included my css files and js files. And i've included them via my layout xml file

<?xml version="1.0"?>
<layout>
  <default>        
    <reference name="head">
      <action method="addJs"><script>main.js</script></action>
      <action method="addJs"><script>bootstrap/bootstrap.min.js</script></action>
      <action method="addCss"><stylesheet>css/bootstrap.min.css</stylesheet></action>
    </reference>
  </default> 
</layout>

Although the css files are loaded, the js files returns 404.

`js/` folder

I've found that magento saves most of the js files in the js/ folder in root. On moving my files here, it works perfectly.

Why does magento save js files here?

How can i save my js files in my package and still include in the header?

Best Answer

The js/ folder in the root is more for supporting libraries than scripts directly relating to your project or extension. Kind of like the lib/ folder in the root for PHP libraries.

To include javascript from the skin folder (either frontend or adminhtml) use the following XML snippet

<action method="addItem"><type>skin_js</type><name>js/yourfile.js</name><params/><if/></action>

This will include the javascript from the template folder. In my opinion placing your extensions Javascript in the js/ folder is back practice.

Related Solutions

Magento – Multiple local.xml layout files in a package

You are correct, and this is a valid & used approach for sites with multiple themes. There are a couple of additional (little-known, seldom-used) options which can be used for layout updates which apply to different store scopes: the store handle and the theme handle.

From the action controller superclass Mage_Core_Controller_Varien_Action (link):

public function addActionLayoutHandles()
{
    $update = $this->getLayout()->getUpdate();

    // load store handle
    $update->addHandle('STORE_'.Mage::app()->getStore()->getCode());

    // load theme handle
    $package = Mage::getSingleton('core/design_package');
    $update->addHandle(
        'THEME_'.$package->getArea().'_'.$package->getPackageName().'_'.$package->getTheme('layout')
    );

    // load action handle
    $update->addHandle(strtolower($this->getFullActionName()));

    return $this;
}

For a store with the code 'deutsch' and a theme configuration of 'default' package, 'german' theme, the following handles would apply to almost every view, as most views use them:

<STORE_deutsch>
<THEME_frontend_default_german>

By implementation these handles can be utilized in much the same way as <default />.

Magento – Change the order of CSS files. Load module’s CSS before theme’s CSS

@benmarks has a great approach from this SO thread - though his example is for Javascript it can be adapted for CSS, too:

https://stackoverflow.com/questions/12610949/magento-module-layout-xml-load-order

Another option to try would be to use an directive in your custom module layout XML, as the directives in an are processed before the other directives. This means that jQuery will load before all other files.

<?xml version="1.0" encoding="UTF-8"?>
<layout>
    <default>
        <update handle="add_css_first" />
    </default>

    <add_css_first>
        <action method="addCss" block="head">
            <link>css/custom-styles.css</link>
        </action>
    </add_css_first>
</layout>

There are also community modules which exist to allow you to set an explicit sort-order with a rewrite of page/html_head:

https://github.com/drewhunter/ItemPosition

Which allows you to do this sort of customization:

 <reference name="head">
        <action method="setLast">
            <last>css/custom-styles.css</last>
        </action>
 </reference>

`js/` folder

Best Answer

Related Solutions

Magento – Multiple local.xml layout files in a package

Magento – Change the order of CSS files. Load module’s CSS before theme’s CSS

Related Topic