Have you always wanted to know how to create structural blocks in Magento? Or are you experimenting with various development stuffs on Magento? Well, Structural blocks are the ones that are created for the sole purpose of assigning visual structure for your store’s page. This includes header, left column, main column and footer. Structural blocks are also the ones that define the location of the content blocks on a web page. It declared with “as” ( as=”structuralblock”).
The content blocks are present to represent html block, template = “structuralblock/structuralblock.phtml”. Structural blocks will not have any ‘templates part’. Once we declared the structural block, we can use this name in all default Magento XML file and custom XML files. Layout may contain the following:
1. Label: It defines the label that could be shown on the admin panel.
2. Reference: It has a link with an already created structural block in any layout XML file.
3. Block: It will be used to represent a new block. When we want to create new block, usually it will be inside the reference.
Common Layout XML files:
Some of the default magento layout XML files.
Magento has defined some default block types. However, below mentioned are the ones that can be used for the current purpose alone.
1. core/template: This block type is used to define/link the template file like template=”structuralblock/structuralblock.phtml”.
2. core/text_list: This blocks are used to display content blocks context automatically, We don’t have to call getChildHtml() method.
Below mentioned are the steps to create structural blocks;
Step 1: Named the structural block in structuralblock.xml
<?xml version="1.0" encoding="UTF-8"?> <reference name="root"> <block type="core/text_list" name="structuralblock" as="structuralblock" <label>Structural block</label> <reference name="structuralblock"> <block type="core/template" name="structuralblockname" template="structuralblock/structuralblock.phtml" />
Step 2: Add this code to your theme
<?php echo $this->getChildHtml('structuralblock') ?>
Note: Kindly note that, you should Add this above code to your default design template (.phtml)
Step 3: Create block html page in
<h1 style="background-color:yellow">Hello! Structural block welcomes you...</h1>
Now refresh your homepage. The changes will be displayed on your home page at right side with yellow highlights as shown in the below given screenshot. Try this method of creating structured blocks and share your feedback with us.