An Introduction to Magento Design Terminology and Concepts

Are you a Magento beginner? Want to create theme of your own? If so, this article is written specifically for you.

In order to start with Magento theme design and customization, it is very important that you have a strong understanding of Magento design terminology and the basic concepts which are strictly followed by Magento’s front-end.

Before we start its worth to clear some of important things related to Magento versions. Because Magento comes in two different flavors Community version and Enterprise edition. On that basis, this article supports the following versions of Magento.

• Community version 1.4+

• Enterprise edition version 1.8+

To catch every bit of the article you need to have already installed and a working copy of Magento. You can get it from here. It will be more beneficial if you have basic knowledge of magento admin panel.

A Survey of the Magento Hierarchy

Before going deep into actual design terminology, it’s very important to know understand the store-hierarchy concept. One of the main feature of Magento is that it supports the creation and manipulation of multiple stores and store views in single setup.

Let’s understand these basic terms and go further in detail.

• Global refers to your entire Magento installation.
• Website refers to group of stores or only one store which can share customer information, order information and shopping cart information or not share any of information.
• Stores are children of website and collection of store views. The main use of stores is to manage logically related store views together, allowing multiple stores under website to setup individual catalog structure.
• Store Views are children of store. Each store has one store view or multiple store views. Store views are mainly used for multiple representation of same data. Most of time they are use for representation of store with multiple languages.

Here, you can see that one website can have one store or multiple stores and one store can have one store view or multiple store views. A default scenario would be the Main Website, Main Website Store and Default Store View.

If you have already installed Magento setup then go to Magento Admin Panel > System Tab. In that page on the top left part under top menu you can see the Current Configuration Scope drop down which displayed default scenario of your Magento store.

Let’s take different scenarios to get a clearer understanding with website, stores, and store views.

First Scenario: Only One Store

Let’s say you want to sell apparel for men and women. As a startup, you don’t want to create separate catalog and multiple language support for your store. In that case, the scenario would include one website, store, and default store view.

Second Scenario: Multiple Store

Now say that you want to sell apparel for men and women in separate store and want to share customer, order, and shopping cart information so customers can create account in any of one store and able to access the second store with same information.

The thing is, you still you don’t want to give multiple language support. In that case, this scenario would be the one website: A men’s apparel store, a women’s apparel store, and a default store view.

Third Scenario: Multiple Website, Multiple Store Views

As your business is grows, you will ultimately want to expand to setup an accessories store to compliment your apparel store.

Within each store you want to share customer information and want to give multiple language support in both stores. In that case scenario would be the two websites: Apparel and accessories. There would also be two stores: The apparel store and the accessories store. Finally, this results in two store views: An English store view and a Spanish store view.

Possibilities

Possibilities of creating the instance of website, store, and store views depends on your needs. You can set up as many or as few websites, stores, and store views as you want from Magento Admin Panel > System menu > Manage Stores.

Magento Design: Interfaces & Themes

We have seen that Magento allows us to setup multiple stores in single Magento setup. Based on that, it also allows us to give a different look and feel to different website, store and store views. This is possible through the Themes. We can create as many of themes as we want and we can also apply different themes to different stores.

A Design Package refers to collection of various themes. Go to your Magento directory > app > design > frontend. Here you can see the package “Base”. This is the default package comes with Magento setup. This package named is different with different versions. For example, in Community Edition, this package named is “Base”, in Pro Edition, this package named is “Pro,” and in Enterprise Edition its named is “enterprise”.

Other than this you can add your own package under frontend directory, but you must have at least one. In earlier version of Magento design packages are referred to interfaces.

Themes are collection of files – that is, templates and skins – which will render the actual layout on frontside. Based on our needs we can change the layout by editing and creating new templates files in particular themes.

One design package can have multiple related themes, but it’s recommended that each package must have a default theme which will render by default when Magento could not find an assigned theme.

More About Themes

Each theme in Magento have a two types of directory.

1. The Template Directory contains layout, template and local subdirectory under app > design > frontend > your theme package > your theme.
   
   The Layout directory contains theXML files which are use to create the basic block structure of themes.
   
   The Template directory contains all the PHTML (PHP + HTML) files which are use to create the actual HTML of themes. Template files also allows PHP code so that we may create dynamic HTML pagesThe Locale directory contains CSV files which are mainly used for storing multiple languages related strings to support multiple languages to store.
2. The Skin Directory contains CSS, JavaScript, and images subdirectories under skin > frontend > your theme package > your theme.
   
   CSS contains all css files related to that particular theme.
   
   JS contains all js files related to that particular theme.Images contains all images related to particular theme.

Theme Variations

Magento allows us to create as many theme variations as per our needS. When you are working with multiple stores, you can assign different theme variations to different stores. You can create theme variations by copied default theme into new theme and apply minor CSS variations to that new theme.

For example, let’s say you have created two stores which share the same information but you want the customer to feel some difference in terms of colors and layout in both stores. In that case, you can create two theme variations, give different css, js, and images to both theme variations and apply it to individual store.

 

Default Theme: A Sensitive Theme

As mentioned in an earlier section, it’s recommended to have a default theme in every design package. Because when you have not assigned any theme to your store, Magento will look for default theme as per the theme fall back system – which we will cover in next section – and if it will not find default theme then it will give 404 rendering error.

When you install any fresh Magento setup, it comes with tge “Base” package which also contains the “Default” theme. For any required files that are not found in your default theme it will look in base package’s default theme. It’s very important that your default theme must contains all required files.

Theme Fallback System

When you are working with Magento theme creation or theme customization, it’s very important that you understand the Magento theme fallback system very clearly; otherwise, you may get wrecked inside the Magento themes directory to find which blocks are render from which themes files.

Let’s take one example to understand the Magento theme fallback system. If your own custom theme calls for a file, say “header.phtml,” which will render your header part, you can see how Magento will search for the file using the following diagram:

As per the diagram, the fallback system will look first in your custom theme directory, if it will not found, will look into default theme that is in same design package where your custom theme is reside, if it will not found in your design package’s default theme too, will look into base package’s default theme. After finding particular file in this fall back panel if its still not found it, it will give rendering error at last.

Another way of looking at it is this way:

1. app/design/frontend/your_package/your_theme/template/(header.phtml?)
2. app/design/frontend/your_package/default_theme/template/(header.phtml?)
3. app/design/frontend/base_package/default_theme/template/(header.phtml?)
4. Still not found, give rendering error

In earlier versions of Magento, the theme fallback system was not included base package as a final panel of fallback system. In earlier versions, fallback system would only look for a specific theme design package.

By including base package in theme fallback system, Magento allows us to maintain our theme more easily with only required files. For example, say that you want to apply a completely different look and feel of your two stores except customer account pages share same look and feel for both stores. This is possible by creating two themes variations and effectively use of fallback system.

To achieve this you need to create two theme variations and one default theme which contains all required files. So your design package contains one default theme and two theme variations.

Your two theme variations contains all files which you have customize with different look and feel, but it will not contain customer account pages because they are common in both themes.

At the time of rendering, Magento will render all files from particular theme directory, but at the time of rendering, customer account pages it will not found its in any of theme variations so it will render it from default theme. This way you can use fall back system very effectively so you never need to include more files in your custom themes.

Blocks And Layouts

Block and Layout may be new terms for you. To be successful magento designer you must understand these two concepts.

Blocks

Blocks are the main entity through which Magento renders the frontend layout. With the use of blocks, Magento differentiates various parts of layouts. Basically, there are two types of blocks.

Structural Blocks are the main outline of any front end layout in Magento. It basically contains the Header, Left, Right, Main and Footer Section of layout.

Content Blocks are the actual blocks that reside inside the structural blocks to produce the final visual output. These blocks presents the block specific functionality in particular page through HTML. The Category List, Product List, Sub-category List, Product Tags, Homepage product sections, etc. are the content blocks inside structural block.

Layouts

Layouts are the XML files which maps your page with structural block and content block. Each layout files contains the tags, through which you can control particular blocks. Each Magento module have their separate layout files, so you can easily manage the module specific layouts.

To give more flexibility to Magento design parts, Magento developers have added some of new terms, which we have seen in this article which are may be confusing to you at first sight.

Conclusion

Hopefully this article will provide a comprehensive start on where to begin with Magneto theme development.

Still have questions? Don’t hesitate to leave any comments, questions, or other general feedback in the comments!

Source: Nettuts+