Create a custom structural and content block in Magento

Magento is the top eCommerce framework. It offers great flexibility at this level. First of all you need to know how your theme files are used to structure a page.

When I started with Magento I often get confused with the files and new elements like observer, block, blocks, template, layout, skins, theme and interface.

So You will see in this small tutorial which files are dedicated to design and layout. ­

Files in a theme

The files that manage the design of your site is separated into two parts.

1. Layout file

2.Template files

Concept of theme and interface.

1 .Templates and layout files :

app ­> design ­> frontend ­> default ­>template ­

There are 3 folders in the theme folder (template, layout, Locale)

1. layout : Layout files are basically xml file that are responsible to create structure of page.

2.locale : Compatible translation files

3.template:These files are the combination of php and html.

2. Images,CSS and js files :

skin ­> frontend ­>default ­> template ­

There are 3 folders in the theme folder (css, images, js) and also contains favicon.ico icon of site.

Understand how a Magento page is created :

A Magento page is a combination of Structural Block and Content Block that make it more flexible to change the design of page.

Structural Blocks :

As the name suggest Blocks will structure page by cutting them into blocks.

A. Header

B. Body

C. Footer

D. Sidebar (left, right)

app ­> design­> frontend­> default­>template­name­>template­>page

Content blocks :

The content blocks are actually represent the data inside the structural block in the page layout. A content block is a template, a mixture of html and PHP code.

Now, you know the difference between the structural and content block, you’re probably wondering how these are loaded and arranged ? The answer is because of the layout.

Magento load the layout files (All .xml files) and render the page according to configuration on these layout files. These layout files have the template file path “mixture of html and php” that are actually having the content to show.

How templates have access to the kernel code? How the kernel code is linked to the template with the layout in defining block?

Lets See how …

Example : Lets create a Structural block and call a content block inside that.

Step 1: First of all open your theme and open the page layout file / page.xml.

Block: theme­>layout­>page.xml

Location : app design frontend default theme layout page.xml

you can add the code just like highlighted in the below screenshot.

<block type="core/text_list" name="custom" as="custom" translate="label">
<block type="core/template" name="customchild" as="customchild" template="page/custom.phtml"/>
</block>

This block is associated with the template “page/custom.phtml”

Step 2. Now Create a template file for content block custom child.

Path-template/page/custom.phtml

In this file you can create form or whatever you want to show with this content block.

location => app design frontend default theme template page custom.phtml

The blocks correspond to the templates, a block is a mixture of html and php code.

Now you have created a structural Block with name “custom” and called a content block inside this custom structural block.

Now finally call this structural block in the page template file so that you can see the added block and content.

$this->getChildHtml(‘custom’);

Block Design on page :

Finally, You will see your newly added block on your Magento store like above image. You can also checkout our blog on below topics.

1. Create a custom package for magento

2.Create different Home page for logged-In User

For more Information click here