shopping cart templates, oscommerce templates, cre loaded 
templates, zencart templates, magento templates

Ecommerce Products KnowledgeBase

shopping cart templates, oscommerce templates, cre loaded 
templates, zencart templates, magento templates

Magento template system explained

Print | Bookmark
Bookmark and Share
Magento Logo

 

Welcome to Algozone.com's Magento templating documentation. Here, the author will try to explain how to modify Algozone.com's Magento templates. Please note, however, that this document was not written with the intent of teach beginners how to use HTML, CSS, Javascript or PHP. It is assumed by the author that the reader already understands, and can code HTML, CSS, and PHP. Knowledge in Javascript, however, is not necessary to be able to understand the things that are discussed below.

 

Directory Structure

Magento Directory Structure
Figure 1.0 Magento default directory structure

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.

az_template

This folder contains the main framework of the template. It also contains the template-specific language translations, configuration, CSS, javascript files, and images.

skin/frontend/default/MG04A00380

This folder contains the CSS, Javascript and images for each specific block component (i.e., block, menu, etc.)

 

*Notes:

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)

Magento Theme Directory
Figure 2 Subfolders of the theme directory

The theme files are stored in this folder. As such, it contains most of the frontend's markup.

Layout folder

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.

Locale folder

This is where you upload one of the parts of the language pack. To learn more about language pack installation, click here.

Template

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) .

Template Folder

Frequently Modified
Fig. 3. Frequently modified files

Commonly template files

Shaded in blue contain the most frequently modified files.

  • catalog

    Most of the template files that is related to the product listing and category blocks are stored here.

  • catalogsearch

    Holds the template files for the blocks that are related with the product search (including the search results).

  • page

    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.

 

 

 

 

 

 

 

 

 

 

 

 

Catalog Folder

Contents of the catalog folder
Figure 4 Contents of the catalog folder

Category Folder

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.

Layer

Contains the .phtml files that control the Magento's layered navigation feature. Click here to view a screen shot.

Navigation

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.

 

Product

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.

SEO

This folder contains the template for the sitemap. Algozone.com templates rarely have modified versions of this.

 

Catalogsearch Folder

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.

Contents of the catalogsearch folder
Figure 5 Contents of the catalogsearch folder

Advanced folder

Contains the template for the advanced search form and advanced search result page.

 

 

 

 

 

 

MG03Cxxxx Templates

 

Contents of the page folder
Figure 6 Contents of the page folder

Page Folder

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.

 

Figure 2.1 Recent Version File Structure
Figure 7 Contents of the az_template folder (Click Here to view full sized image)

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.

HTML Folder

Files under the page/html folder

Figure 8 shows the usual contents of the page/html folder

Algozone.com <a href=Template Specific Files" width="150" height="253" />

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:

Figure 2.3 Language folder inside Az_template

........................................

Figure 2.3 Language folder inside Az_template

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:

http://yourwebsite.com/magento_cart/skin/frontend/default/MG03C20024/images/header/az_marker100.jpg

 

$this->__(string $text)

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 &amp 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:

http://yourwebsite.com/magento_cart/index.php/shipping-MG03C20024

 

$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)

Magento az_template folder
Figure 9: Recent Version File Structure
Figure 2.2 Contents of the az_template folder
Figure 2.2 Contents of the az_template folder

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.

CSS Folder

This folder contains the code to modify the font colors, size, background colors and images, width, height etc. Files here have .css extension.

Images Folder

All graphical content used in the template, from background to patterns and animated gif, are stored in this folder.

JS Folder

Javascript interaction and other javascript related features are stored here. Files here must have .js extension.

templ_product_box.php

This file contains the markup for each of the product boxes that are being displayed inside a product listing.

template_main.php

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

Figure 2.3 Language folder inside Az_template

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.

Figure 2.3 Language folder inside Az_template

Languages and menu.php (AZ Template)

Figure 2.3 Language folder inside Az_template
Figure 10 Language folder inside 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.

  1. Goto az_template > includes > languages
  2. Create a duplicate of folder English and rename the copied folder into Spanish (or other language you wish to add).
  3. 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.

Figure 2.1 Recent Version File Structure
Figure 11: some parts of the page.xml file (Click Here to view full sized image)

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.

 

Was this article helpful?

Yes No
Bookmark and Share

Category: MAGENTO

17350 views