All about Magento E-commerce Store.......MagentoForum: layout
Showing posts with label layout. Show all posts
Showing posts with label layout. Show all posts

Friday, September 16, 2011

Layouts, Blocks and Templates


Update: In researching No Frills Magento Layout it became apparent that this article contains incorrect and misleading information. Specifically, the sections on block and reference tags is incorrect. The article still contains useful context (handles, layout XML, etc.), so I'm letting it stand, but proceed with caution.
Continuing along with Magento, we're going to skip models for the time being, and jump to the right side of our flowchart to look at Layouts and Blocks.
Unlike many popular PHP MVC systems, Magento's Action Controller does not pass a data object to the view or set properties on the view object. Instead, the View component of Model, View, Controller directly references system models to get the information it needs for display.
One consequence of this design decision is that the View has been separated into Blocks and Templates. Blocks are PHP objects, Templates are "raw" PHP files that contain a mix of HTML and PHP (where PHP is used as a template language). Each Block is tied to a single Template file. Inside a phtml file, PHP's $this keyword will contain a reference to the Template's Block object.
A quick example. Take a look a the default product Template at
File: app/design/frontend/base/default/template/catalog/product/list.phtml //.. 
You'll see the following PHP template code.
<?php $_productCollection=$this->getLoadedProductCollection() ?>    <?php if(!$_productCollection->count()): ?> <div class="note-msg">     <?php echo $this->__("There are no products matching the selection.") ?>    </div> <?php else: ?>   
The getLoadedProductCollection method can be found in the Template's Block, Mage_Catalog_Block_Product_List
File: app/code/core/Mage/Catalog/Block/Product/List.php ... public function getLoadedProductCollection() {     return $this->_getProductCollection(); }    ... 
The block's _getProductCollection then instantiates models and reads their data, returning a result to the template.

Nesting Blocks

The real power of Blocks/Templates come with the getChildHtml method. This allows you to include the contents of a secondary Block/Template inside of a primary Block/Template.
Blocks calling Blocks calling Blocks is how the entire HTML layout for your page is created. Take a look at the one column layout Template.
File: app/design/frontend/base/default/template/page/1column.phtml  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>"> <head> <?php echo $this->getChildHtml('head') ?> </head> <body class="page-popup <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>">     <?php echo $this->getChildHtml('content') ?>     <?php echo $this->getChildHtml('before_body_end') ?>     <?php echo $this->getAbsoluteFooter() ?> </body> </html>  
The template itself is only 11 lines long. However, each call to $this->getChildHtml(...) will include and render another Block. These Blocks will, in turn, use getChildHtml to render other Blocks. It's Blocks all the way down.