Your message has been sent.
This article has been saved to your account.
Go to my account
This article has been emailed to your Kindle.
Send this article
Magento has a wonderful architecture behind its system. It's a very strict architecture that relies on us knowing where the files should be placed and how to structure our templates and modules. But this is part of what makes Magento a great system, in that it enforces these standards.
Here in this two-part article by Jamie Huskisson, we will learn about this architecture and how it applies to development with Magento. We will learn:
- Where everything is within Magento
- What all the base directory files and folders do
- The basics of how the template system works
- How modules work within the system
- How the Zend Framework fits into the equation
- The best methods for backing up Magento
Magento's base structure
The fundamental knowledge of Magento's architecture begins with its file structure. It's important to know what goes where by default, so that we may position our new files accordingly, especially in terms of ensuring that our development doesn't overwrite core files.
The default installation contains the following files and directories in the base directory:
- 404 (directory)
- app (directory)
- downloader (directory)
- js (directory)
- lib (directory)
- media (directory)
- pkginfo (directory)
- report (directory)
- skin (directory)
- var (directory)
Each of these files and directories has a different purpose. We'll go through them to ensure that we understand the function of each. This will help us later, if ever we need to find something specific, or when developing. It will also be helpful when we'll be looking to place the files coming out of our new module into the appropriate directory.
The function of each of the files in the base directory
The following is a run through of all the files in the base directory, to show us what they do:
- .htaccess—This file controls mod_rewrite for fancy URLs and sets configuration server variables (such as memory limit) and PHP maximum execution time, so that Magento can run better.
- .htaccess.sample—Works as a backup for .htaccess, so that we know the default .htaccess file (if ever we edit it and need to backtrack).
- cron.php—The file that should be executed as a cron job every few minutes to ensure that Magento's wide caching doesn't affect our server's performance.
- favicon.ico—Magento's default favicon; it's the small icon that appears in the toolbar of our browser.
- index.php—The main loader file for Magento and the file that initializes everything.
- index.php.sample—The base template for new index.php files, useful when we have edited the index.php file and need to backtrack.
- LICENSE_AFL.txt—It contains the Academic Free License that Magento is distributed under.
- LICENSE.txt—It contains the Open Software License that Magento is distributed under.
- pear—This controls all automatic updating via the downloader and SSH. This file is initialized and handles the updating of each individual module that makes up Magento.
- php.ini—A sample php.ini file for raw PHP server variables recommended when setting up Magento on our server. This should not be used as a complete replacement, but only as a guide to replace certain lines of the php.ini server file. It is useful when overriding these variables when .htaccess isn't enabled on our server.
The function of each of the folders in the base directory
The following is a run through of all the folders in the base directory to show us their contents:
- 404—The default 404 template and skin storage folder for Magento.
- app—All code (modules), design (themes), configuration, and translation files are stored in this directory. This is the folder that we'll be working in extensively, when developing a Magento powered website. Also contained in this folder are the template files for the default administration theme and installation.
- downloader—The web downloader for upgrading and installing Magento without the use of SSH.
- lib—All PHP libraries used to put together Magento. This is the core code of Magento that ties everything together. The Zend Framework is also stored within this directory.
- media—All media is stored here. Primarily for images out of the box, this is where all generated thumbnails and uploaded product images will be stored. It is also the container for importing images, when using the mass import/export tools.
- pkginfo—Short form of package information, this directory contains text files that largely operate as debug files to inform us about changes when modules are upgraded in any way.
- report—The skin folder for the reports that Magento outputs when any error occurs.
- var—Typically where we will find all cache and generated files for Magento. We can find the cache, sessions (if storing as files), data exports, database backups, and cached error reports in this folder.
The template system architecture
The template architecture is broken into three areas—two for development of the theme and one for the containment of the assets:
- layout/—For all the XML files declaring which module tied functions should be called to which template files
- template/—For all the templates processing the output that is passed from functions called from layout/ and structured into the final output to the user.
Structural blocks and content blocks
Each theme contains structural and content blocks. Structural blocks are the ones that lay out the theme into sections. Let's take a look at a three-column layout. The following are the structural blocks in a three-column layout:
Here's a visual representation of those structural blocks laid over the Magento demo store:
In each of the structural blocks, we then have content blocks that give each structural block its content for output to the browser. Let's take the right column; our content blocks set for this column on a standard theme could be:
- mini cart
- recently viewed products
- newsletter subscription block
eBook Price: $23.99
Book Price: $39.99
Here we have a visual representation of these content blocks on top of the Magento demo store:
On receiving a request from a user connecting to our site to view the page:
- Magento will load the structural areas
- Each structural area will be processed through
- Magento will gather the content blocks assigned to each structural area
- It will then progress through the content block template for each structural area, to process the output
- It sends all of this back as final output to the user, who then views the Magento page that was requested
XML layout files
To assign blocks to each of these structural blocks, Magento loads an XML layout file for each request. This XML layout file is called by the URL that the user is accessing on the site. It declares all modules that are to be loaded in each structural area of the site. On top of this, we have a page.xml file, which is the default loader for all pages on the site.
A layout XML file is typically structures as follows:
<block type="page/html_header" name="header" as="header">
<block type="page/template_links" name="top.links"
<block type="page/switch" name="store_language"
<block type="core/text_list" name="top.menu" as="topMenu"/>
In the above code, we have:
- <default>—The handler for the URL, in this case default will load no matter what other handler is being initialized
- <reference>—The reference structure which calls the blocks in our theme
- <block>—A content block which defines the type of block and the template which will process the block's outgoing data in the system
In addition to this, Magento uses actions within blocks for functions which need to process the data that is input to them, for example adding CSS stylesheets:
<block type="page/html_head" name="head" as="head">
<stylesheet> css/menu.css </stylesheet>
<stylesheet> css/clears.css </stylesheet>
<if>lt IE 7</if>
<stylesheet> css/print.css </stylesheet>
<params> media="print" </params>
We'll notice that there are several tags within the action method tag. These are processed into an array and then passed through the action method="" parameter, in this case addCss. This function then places the input into an output, ready for its appropriate template.
Layouts are fully explained online in Magento's designer guide: http://www.magentocommerce.com/design_guide/articles/intro-to-layouts.
Hierarchical file processing
When creating new themes, we do not have to worry about copying all the theme and skin files from the default theme over to our new one. Let's presume that we have an additional theme called new_theme, alongside our default theme. Our theme calls files called logo.gif and image.gif on one of its pages.
The themes that we have contain the following files in their skin's images directory:
Magento would process this main requesting logo.gif and image.gif. As new_theme is our current active theme, it will pull logo.gif from there., However, as image.gif does not exist in new_theme, Magento would grab that from default. So now, it works like this:
Theme it will come from
Similarly, if test.gif were called in our template then it would come from the default theme. If we upload an image called test.gif to the image directory of new_theme, then it would immediately come from there instead.
This applies to all files for themes in Magento, which include the following:
- Layout XML files
- Anything in the theme skin folders
Magento's template architecture and hierarchy is also explained online in the designer's guide to Magento: http://www.magentocommerce.com/design_guide.
If you have read this article you may be interested to view :
eBook Price: $23.99
Book Price: $39.99
About the Author :
A passionate 23-year old freelance developer from Nottingham, Jamie Huskisson has been working with Magento for the past two years since the very early Beta versions. His development client list features names such as the NHS, Volkswagen, and Nike building everything from web applications to e-commerce stores and small business sites. He also trains groups of developers and provides consulting on adopting open source technologies over closed systems for clients when required.