Magento template system explained
The image shown on Figure 1.0 is the default folder structure of Magento. Those shaded in blue are the folders you will get involved more often. As most of the template customization are done inside these folders. Each of these folders will be discussed below.
app/design/frontend/default/MG04A00380 (theme directory)
This directory contains the theme files which includes layout, translation (locale) and template materials.
1. MG04A00380 is the name of the template that you have installed
2. In the path "app/design/frontend/default/MG04A00380", "default" is the name of the interface, while "MG04A00380" is the theme name.
app/design/frontend/MG04A00380 (theme directory)
The theme files are stored in this folder. As such, it contains most of the frontend's markup.
This folder contains XML files that dictates the layout of the theme. These layout files act as "bridges" between the modules (which are found under the app/code directory), and the template files.
Modifying these XML files is quite complicated, and requires knowledge with the internal workings of Magento's modules. Thus, modifying these files is strongly discouraged for inexperienced people. If you want to know more about Magento layouts, click here.
This is where you upload one of the parts of the language pack. To learn more about language pack installation, click here.
This folder contains the template files for the theme. These template files hold the markup for each Magento blocks that are being displayed in the frontend (i.e., language selection box, category navigation, search box, etc. ).
The word template means a little bit differently in Magento. In most shopping carts, the template defines how the frontend of cart is being displayed. This is partly true in Magento, but Magento templates are only a part of the whole theme. It only contains the markup for each blocks, but it doesn't have any hold on how these blocks are being arranged as a whole (as this part is controlled by the layout) .
Commonly template files
Shaded in blue contain the most frequently modified files.
Most of the template files that is related to the product listing and category blocks are stored here.
Holds the template files for the blocks that are related with the product search (including the search results).
Holds the most essential parts of the theme (i.e., HTML Head, header, footer, main menu, etc.)
Note: Algozone.com has two(2) template set versions. The previous version with prefix of OS03Cxxxx (i.e.MG03C00318) and the recent version MG04Axxxx (i.e.MG04A00371). In the "03" versions, most the main containers (i.e., the outer most divs in the HTML) are stored in the main page files (e.g., 1column.phtml, 2columns.phtml, etc). In the "04" versions, however, these divs were transfered in the az_template/template_main.php file.
Contains 2 files, page.phtml and view.phtml. Page.phtml is not used in algozone.com templates. View.phtml, however, contains the markup for the category page. Click here to view an illustration showing the part of the page that the view.phtml controls.
Contains the .phtml files that control the Magento's layered navigation feature. Click here to view a screen shot.
Contains 2 files, left.phtml and top.phtml. Left.phtml is not used in algozone.com templates. Left.phtml, however, contains the markup for the category navigation box. Click here to view an illustration the part of the page that the left.phtml controls.
Contains template files that control how blocks directly related to the products are being displayed. The template files under the "compare" folder controls the "compare products" side box. The template files under the "list" folder controls the "related products" sidebox , product listing toolbar, and the product suggestions section.
This folder contains the template for the sitemap. Algozone.com templates rarely have modified versions of this.
Form.mini.phtml, form.top.phtml, and term.phtml are rarely modified for Algozone.com templates. Resut.phtml holds the markup for the search result.
Contains the template for the advanced search form and advanced search result page.
The page folder contains the most frequently modified template files as they control the most basic parts of the theme (i.e., header, footer, main menu, etc.) . Also, in the MG03C Algozone.com template series, the files 1.column.phtml, 2columns-left.phtml, 2columns-right.phtml, and 3columns.phtml contain the markup for the frontend's main layout.
Modifying the main containers
Before you can modify the main layout of the theme, you must first know which layout is being used for a certain page. To do this, you must logon to your Magento admin panel, then go to CMS, and click Manage Pages. Figure 7 shows the an example of how the "Manage Pages" panel.
The highlighted (in red) section in figure 7 shows which layout is used for each CMS pages. Notice the names of the layouts that are being used. 1 column, 3 columns and "2 columns with right bar". Those names represent which file in the "page" folder is used for each of the CMS pages. 1 column represents "1column.phtml" . 2 columns with right bar represents "2columns-right.phtml". And so on.
Now, notice the row highlighted in green. That CMS page represents the home page for the current theme. When you install Algozone.com templates, a CMS page representing the home page will automatically be created. As you can see, the layout assigned for this page is "3 columns". So, if you want to modify the main page, you may want to take a look at the file page/3columns.phtml.
Figure 8 shows the usual contents of the page/html folder
Figure 8.1 shows algozone.com template specific files
This folder holds the basic parts of the theme (i.e., the header, footer, main menu, etc.). Figure 8 shows the most common files that you may see inside the HTML folder. However, there might be some instances where you will find other files inside the HTML folder aside from those that are shown. In some of Algozone.com's templates, you may find some files under the HTML folder that start with "az_". These files are Algozone.com's template specific overrides. In most cases (if not all the time), these files are the ones that are being used instead of their default counterpart. For example, in figure 8.1, there are two versions of the footer template, the az_footer.phtml, and footer.phtml. The one that is being used in these theme would be az_footer.phtml. Footer.phtml, in this scenario, is not being used at all. This is Algozone.com's way of marking the files that were modified for a specific theme.
Modifying the theme's header
You might be wondering what's the difference between head.phtml and header.phtml. Header.phtml contains the markup for the theme's header. On the other hand, head.phtml defines the contents of the HTML header of the whole frontend. Since we want to modify the theme's header, we'll take a look at the header.phtml file.
Please don't forget that this section is only about the Algozone.com's MG03Cxxxx templates. MG04Axxxx templates work differently and will be discussed later in this document.
Before you start modifying the header (or any Magento template files), there are 4 basic methods that you should be familiar with. The getSkinUrl method, getUrl method, getChildHtml method, and Magento's translation method ( $this->__ ).
Magento was programmed using Zend Framework, and as such, is strongly Object Oriented. Anyone who wishes to understand the internal workings of Magento must understand Object Oriented Programming first. If you have absolutely no idea what Object Oriented Programming is all about, you may want to research about it first before moving on with this document. For more information regarding Object Oriented Programming in PHP, please click here.
The code below shows the 4 methods that were mentioned above:
For the explanations and examples below, let us assume that Magento was installed in a websites called "yourwebsite.com", and in a folder called "magento_cart". Let us also assume that the Algozone Template installed is called MG03C20024.
$this->getSkinUrl ([string $file = null], [ $params = array()])
This method was defined in Mage_Core_Block_Abstract class, which is defined in the file app/code/core/Mage/Core/Block/Abstract.php. As its name suggests, it "gets" the skin url for the specified file. In other words, it generates the full URL of the specified file based on the skin directory of the active theme. So, the code above (echo $this->getSkinUrl('images/header/az_marker100.jpg')) will output:
Like getSkinUrl, this method was defined in the Mage_Core_Block_Abstract class. It translates the text based on the current locale. So, if the active locale is set to spanish, the code above may output the phrase Envios & Devoluciones, but this depends on the language pack that was installed.
$this->getUrl([string $route = ''], [array $params = array()])
Like the methods above, this method was also defined in the Mage_core_Block_Abstract class. It generates a URL based on the specified route and parameters. This method simply adds the specified route to the "base url". So, the sample code above will output:
$this->getChildHtml([string $name = ''], [boolean $useCache = true], [ $sorted = false])
This method outputs the specified child HTML block based on the layout of the page. This method will be discussed in detail in the Magento Theme Layouts section.
MG04Axxxxx Templates (AZ Template)
In the MG04A Algozone.com template series, most of the control over the header, footer and the sidebars were moved from the layout files in the page folder (e.g., 1column.phtml, 3 columns.phtml, etc), to the template_main.php file that can be found inside the az_template folder. This template_main.php file acts like a "master template file", and most parts of the theme are loaded here.
This folder contains the code to modify the font colors, size, background colors and images, width, height etc. Files here have .css extension.
All graphical content used in the template, from background to patterns and animated gif, are stored in this folder.
This file contains the markup for each of the product boxes that are being displayed inside a product listing.
If you want to modify the HTML code for the header, footer, and other parts of the template, this is the file to be edited. This file unified the "FRAME" of the template such as header, footer and the sidebox panel.
Customizing Header, Footer etc.
Goto: magento installation directory > az_template > template_main.php
Notice the comment //#### HEADER_HTML ##### ? It hints where you start editing codes. Let's think of a book-end. The comment above is the beginning the books are the codes inside it while the comment on the image below ( //#### END HEADER HTML ) marks the end of the whole header block.
Languages and menu.php (AZ Template)
Shown in figure 2.3 is a folder named 'English', it contains a file named 'menu.php'. For now, only English is available since this is the default language that came with your template.
If you plan to install another language, after downloading and installing language packs, you have to do another translation.
- Goto az_template > includes > languages
- Create a duplicate of folder English and rename the copied folder into Spanish (or other language you wish to add).
- Find 'menu.php' inside the Spanish folder and do the translation inside it.
IMPORTANT: without menu.php, the template will not work and will an give error stating that a file is missing.
Magento Theme Layouts
Magento was programmed using the Model-View-Controller (MVC) software architecture. But unlike most PHP software out there that are attempting to follow this architecture, Magento has another layer that acts as "bridges" between Views and Controllers. These are called blocks. Blocks are the brains behind Magento’s templating scheme. Blocks form a nested set of objects that coordinate the models with the template files. Each block controls one template file: a simple HTML and PHPmixed file with a .phtml extension. What this means is that for any page request on Magento, you are dealing with an equal, but large, number of Block objects and .phtml template files.
Having said that, we may raise another question: How do we know which block controls which template file?
This is where the theme layout files come in. These files are XML files that are found inside the app/design/frontend/THEME_NAME/layout directory. These files control the structure of the any final page rendering. The most important XML file is page.xml since it specifies the default page structure.
Notice the second line in the code above. That line defines a block called "root", and specifies that its block type is "page/html", and its template file is "templates/page/3columns.phtml". This means that whenever you reference the pseudo variable $this inside the 3columns.phtml file, you are referring to an instance of the Mage_Page_Block_Html class. Thus, the block called "HTML" is now connected with the template file called 3columns.phtml.
Now, notice how an "inner block" named "head" is defined inside the "root" block. This "inner block" is now a "child" of the root block, and it can be accessed from the 3columns.phtml file by invoking the $this->getChildElement("head") method.