Monday, 30 April 2012

MCD: The Main Magento Design Areas and More

In classical MVC architecture view files are html code with output of the logic in templates via php or  any template engine, for example, Smarty (in Prestashop, Oxid) or Twig, Dwoo, Calypso, etc. Working with Magento, you may fall into delusion that everything is extremely complicated, but this complexity allows you to maintain flexibility and modularity.

In Magento there are three components of the template system. As we discussed in a previous article, there are php classes that are stored in modules folder called Block. They load the data from database and transfer it to the PHP/HTML templates in your theme (.phtml files). There are also XML layout configuration files that act as application guides on how to build a page, what to build it with and the behavior of each building block.

 Identifying ad explaining the main Magento design areas (adminhtml and frontend)

All frontend files are stored in three main Magento design areas.


Files from this area will be displayed during the installation process.


Everything that you will observe while working in the admin panel can be found here. In other words, if module performs anything related to admin panel, all templates and layouts will be there.


Everything that can be observed on your webstore by any customer is stored there.

What does the structure of a complete theme look like?


There are two basic packages that come with Magento installation – base and default for Community Edition, base and enterprise for Enterprise Edition and base and pro for deprecated Professional Edition.


Theme is a set of layout, template, locale and skin files, i.e. visual representation of your store. Magento is built with the option of loading multiple themes which can be divided into two major types:

  • Default theme

Each package has a ‘default’ theme, i.e. the main theme of this interface. Magento automatically searches the default theme and loads it to the front-end. There are two ways of changing a store appearance: either by bringing changes directly to the theme, or, which I personally find better, creating an individual non-default theme.

  • Non-default theme

Non-default theme can be completely different from the default theme or may contain some images of them. Corrections in CSS file, layout file and all the rest will be loaded from the interface default theme. Dig more about creation of a non-default theme here.

Describe Magento templates and layout files location

A theme consists of the following elements:

Layout folder includes XML files that define the layout of the theme. Layout files work as a “glue” between the modules (which are found under the app/code directory), and the template files. For more information read Intro to Layouts.

Because of Magento modularity, all XML files of the default theme are stored in separate folders with the name of the module to which they belong to. A non-default theme, contrariwise, should have a single layout file, named local.xml, where all layout updates are placed.

Template folder contains of .phtml files that have HTML and PHP code for each Magento blocks which will be displayed in the frontend.

Locale folder contains .of CSV files organized on a per language basis that provide translations in format of languagecode_COUNTRTYCODE (en_US or en_UK)/translate.csv. More detailed information about internationalization will come in the future articles.

Describe Magento skin and javascript files location

Skin folder includes Javascript, CSS and image files that are used in .phtml files in template folder, i.e. all the files in this folder vary from theme to theme. From the given picture you can see that there are three main folders – CSS for style-sheets of your theme, images (for media files that are used in your theme) and JS for the templates javascript files.

JS folder embodies JS files, libraries and frameworks that are used via frontend and backend. If you need to add a new Javascript/AJAX library or your module from Local code pool requires special scripts, they should be placed here.


1 comment :

  1. The blog posted is very interesting from all aspects and it will surely benefit the readers by all means.
    Magento ecommerce Developer