-
- ohminu
 -
Total Posts: 173
Joined: 2007-08-07
Portland, OR
|
Hi there stevefink,
Let’s take it step by step.
1. Layout your Structural Blocks (aka Determine your page layouts)
When you begin the implementation process, first ask yourself this question: What are the layout needs of my store?
What this simply means is: “Will my store always have a left column? Or will some pages have a left, main and a right column? Or perhaps some of the pages will just one column?”. These questions are imperative because the variations of page structure will directly determine the number of skeleton templates you will need to create - For instance, if you have a one column and a 3 column layout, you will need to create two skeleton template accordingly. But before we go further, let’s first look at what a skeleton template looks like.
<html>
<head></head>
<body>
<div class="header"><?=$this->getChildHtml('header')?></div>
<div class="middle">
<div class="col-left"><?=$this->getChildHtml('left')?></div>
<div class="col-main"><?=$this->getChildHtml('content')?></div>
</div>
<div class="footer"><?=$this->getChildHtml('footer')?></div>
</body>>
</html>
Pretty straight forward. This type of templates are what we call “skeleton templates” because it exists for the purpose of positioning structural blocks within a page. Such templates are located in app/design/frontend/default/default/template/page/, and you can name it anything you want - mycolumns.phtml, 2columns-left.phtml, whatever suits your fancy. “Wait a minute!!! What is all this <?=$this->getChildHtml('')?> business?” you say. Ok, let’s move along.
If you examine the method <?=$this->getChildHtml('header')?>, you will see that there’s an identifier called “header” being assigned to the area encased by the XHTML <div class="header">. What getChildHtml does, is it grabs all the content blocks(see step 2 below) that is assigned to “header” via something called a layout (see step 3 below), and places it inside <div class="header"></div>
2. Distribute your Content Blocks (aka Let’s cut up some real meat of the page)
Content blocks are the ones that actually parse your store’s data into visually appealing format using XHTML. Unlike other eCommerce solutions you may be used to, Magento supplies separate content blocks per separate functionalities. What this means is, your col_left.tpl (or whatever else you may be used to working with), no longer contains ALL the XHTML to be shown in the left column but rather, the functionality used in the left column will recruit its own template for use. Let’s take the demo Magento as an example. If you open a category page on your browser, you will see in the right column the following functionalities: mini-cart, compare products, newsletter and community poll. Each of these content blocks comes with its own template file. Because mini-cart is a separate functionality, as is the compare products, newsletter...etc, mini-cart has it’s own template file, compare products has its own template file, and newsletter has its own template file. The XHTMLyou create should be cut up accordingly on per functionality basis.
3. Let’s recap and comprehend
In this step, let’s take a breather and do a quick recap.
When working in the visual aspect of a store running on Magento, there’re three things you will use to visually parse your store data.
Structural Blocks
Structural blocks are the visual skeleton of a store page. These blocks exist for the sole reason of creating visual structure. Example structural blocks are header, left column, main column, footer...etc.
Content Blocks
Content blocks are the blocks that constructs the makeup of a structural block. Each content block represents distinct functionalities such as Mini-cart, mini-wishlist, compare products, newsletter signup...etc, and they comes with it’s own template.
Layouts
Located in app/design/frontend/your_package/your_theme/layout, layout is the one that puts all the pieces together. When a page loads in your store, the following things happen:
a. The layout first grabs the base skeleton template of the site.
b. It grabs all the content blocks that are assigned to the structural blocks of a page, and loads them.
Basically the layout says “Grab these content blocks and nest them inside these structural blocks.” The layout can be updated on a per page basis, so you can conveniently change the functionalities being loaded into each page of you store with just one file.
This is the absolute quick idea of how the templates work in Magento. We’re working on a full documentation and it will be released with the stable version of Magento. In the mean time, the best thing to do is read through the threads of the forum, stay active in the community and ask a lot of questions! I hope this reply gave you some understanding of how things work in Magento.
Cheers 
Minu
|
Enterprise Sales: +1.310.775.2674 (N. America) +44 20.3286.4137 (UK)
