The Main Magento Design Areas and More… (Magento Certified Developer Exam)

March 21, 2012 / Posted in Certification, Magento by Sergei Guk

We suppose you continue following our Magento certification-dedicated posts in our blog. This week we turn to another pack of Basics questions, concerning main Magento design areas; the structure of a complete theme and Magento templates, layout, skin and javascript files location.

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)

 

 magento_design_areas_1

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

install

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

adminhtml

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.

frontend

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

 

What does the structure of a complete theme look like?

 

 

Package

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.

Themes

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 data of the default theme are stored in separate files 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.

 

magento_design_areas_2

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.

 

 magento_design_areas_3

 

Read our previous posts.

Magento Codepools

Magento Module Structure



6 comments

  1. Since this is my first comment on your blog, I must start this out with this: Awsome information you guys have here. My certification exam date is this following Monday morning and when I pass I must give credit to your blog for making that possible.

    My question is this: Is there an appropriate method for modules that may not be site specific (community code pool) to store JS/css/image files, so that manual installation (i.e. unzipping the module into the site) doesn’t require renaming of the skin’s package name?

    Adding them to /skin/frontend/base/ would work however my understanding is that base should be left alone (at least, the existing files already in there).

  2. “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.”

    Has this changed in later versions of magento? because in CE 1.7 and EE 1.12 the layout files are not stored in separate folders. Excluding a pair of layout files for sales, they all recide directly under /package/theme/layout.

  3. Thanks Glenn for reading and for the comment. You’re absolutely right and it’s weird that no one mentioned that before. What should be there is:
    “Because of Magento modularity, all XML data of the default theme are stored in separate files with the name of the module to which they belong to.”

Post a new comment