Magento Structural and Content Blocks
Within Magento’s layout files, there are structural and content blocks that are defined. This article will cover the differences between the two.
Structural blocks are, as the name suggests, blocks that define the structure of the page. Examples of structural blocks are: header, left, content, right and footer.
The content structural block is defined with Magento’s page.xml layout file.
<?xml version="1.0"?>
<layout>
<default>
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
....
<block type="core/text_list" name="content" as="content" translate="label">
<label>Main Content Area</label>
</block>
....
</block>
....
</default>
</layout>
We can see the content block is defined under a root block. Structural blocks are also usually defined as the core/text_list block type. There are however exceptions such as the header and footer blocks.
This structural block can then be “referenced” and have content blocks added to it within other xml files such as this example in catalog.xml.
<?xml version="1.0"?>
<layout>
<catalog_category_default translate="label">
....
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
....
</reference>
....
</catalog_category_default>
....
</layout>
So here we have a content block view.phtml being included in the content structural block.
So if we wanted to add a new structural block, for example, a newsletter block that would appear just above the footer on all pages, we should first declare the structural block under the root reference using the core/text_list block type.
<?xml version="1.0"?>
<layout>
<default>
<reference name="root">
<block type="core/text_list" name="newsletter" as="newsletter" />
</reference>
</default>
</layout>
We can then add a content block within this structural block. In this example, we could add a template that will contain the newsletter form.
<?xml version="1.0"?>
<layout>
<default>
<reference name="root">
<block type="core/text_list" name="newsletter" as="newsletter">
<block type="core/template" name="newsletter.subscribe" as="news_subscribe" template="custom/newsletter/subscribe.phtml" />
</block>
</reference>
</default>
</layout>
We won’t go into specifics of adding the form, so the template will just be populated with some text for now.
<div class="subscribe">
<p>Some text to show our content block showing</p>
</div>
Lastly, we need to ensure that the structural block is included within our page template files. If you have had a look at the contents of 1column.phtml, 2columns-left.phtml etc., you will have noticed that there are calls to structural blocks using the getChildHtml() method.
$this->getChildHtml('header')$this->getChildHtml('left')$this->getChildHtml('content')$this->getChildHtml('right')$this->getChildHtml('footer')
So we need to add our structural block similar to the above. Let’s add our block just above the footer as we wanted.
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="<?php echo $this->getLang(); ?>" id="top" class="no-js"> <!--<![endif]-->
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body<?php echo $this->getBodyClass()?' class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('after_body_start') ?>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div class="main-container col1-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div class="col-main">
<?php echo $this->getChildHtml('global_messages') ?>
<?php echo $this->getChildHtml('content') ?>
</div>
</div>
</div>
<?php echo $this->getChildHtml('newsletter'); ?>
<?php echo $this->getChildHtml('footer_before') ?>
<?php echo $this->getChildHtml('footer') ?>
<?php echo $this->getChildHtml('global_cookie_notice') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
</div>
</div>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
If we then go to a page on the website that is set on the 1column.phtml template, we can see that our text shows.
As it turns out, the RWD theme does contain a newsletter in the footer, however the custom structural can be used to display any structured data that your require.
Note: This article is based on Magento Community/Open Source version 1.9.