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 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.
Read our previous posts.