Magento Expert Forum - Improve your Magento experience

Results 1 to 6 of 6

Magento template design and development - Part 3 - Advanced Layouts

  1. #1
    Junior Member jaredovi's Avatar
    Join Date
    Mar 2013
    Thanked 12 Times in 9 Posts

    Default Magento template design and development - Part 3 - Advanced Layouts

    Reference Blocks: Add Child, Function calls, Remove Block

    Reference blocks were already explained in the previous part. Here are some more operation that we can do on a block by taking reference of a block.

    Add Child

    This is how it is done.

    HTML Code:
    <reference name='left'>
       <block type='core/template' name='child' template='child.phtml'/>
    In this “left” is name of another block, in our case it’s defined in page.xml. So basically here we are adding a child block to another block using reference. The main purpose of using child blocks, is to make code neat and clean i.e we are able to divided layout into many xml files and still have it inter related.

    Function Call

    Now if you want to call a function on another block using reference, this is how we do it, In customer.xml you will find this.

    HTML Code:
    <reference name="top.links">
    <action method="addLink"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>10</position></action>
    So the, <action> tag is used to call a function on a block which has name as “top.links”. “top.links “ block is define in page.xml. There is the block declaration

    HTML Code:
    <block type="page/template_links" name="top.links" as="topLinks"/>
    As we can see the block class of top.links block is Mage_Page_Block_Template_Links. What the <action> tag does it that, it calls the addLink function in the class Mage_Page_Block_Template_Links and pass it parameters.

    If you open the Links.php file, this is the definition of the addLinks function

    PHP Code:
    public function addLink($label$url=''$title=''$prepare=false$urlParams=array(), $position=null$liParams=null$aParams=null$beforeText=''$afterText=''); 
    so you can clearly see how parameters are passed using xml.

    Remove Block

    You can remove a child block from a parent block using reference. This is done in many places in magento e.g

    HTML Code:
    <reference name="left">
        <remove name="block1"/>
    What this does is obvious, it simply removes the block with name “block1” from the parent block left.

    Update Tag

    You will find update tag used in various place in magento especially in customer.xml e.g

    HTML Code:
    <update handle="customer_account"/>
    What this does is simple, it simply copies all blocks and other tag from the parent tag <customer_account> to the block inside which we are calling the <update> tag.

    Block Ordering

    As we know, we can add as many child block as we want to a parent block. But in case of blocks like left,right and content where the child blocks gets displayed automatically and we don’t need to call the $this->getChildHtml() function. But now the question comes, how do we set which blocks get displayed first and which later. So, to solve this we have before and after attributes that we can set in the block we created.

    HTML Code:
    <block type='core/template' template='page/test.phtml' before='block_name' name='test'/>
    So our test block will show before ‘block_name’ similarly we can use after=’block_name’ as well.

    Now, before=”-” means, it will display before all other blocks, so this would be first block. And after=’-’ means, this would be the last block.

    View more threads in the same category:

  2. #2
    Administrator david's Avatar
    Join Date
    Nov 2012
    Thanked 39 Times in 32 Posts


    Nice tutorial, it 's very useful. Thanks for sharing.

  3. #3
    New member
    Join Date
    May 2013
    Thanked 0 Times in 0 Posts


    I am working as Magento Developers in Rightway Solution only but I just started this. So I only have basic knowledge so didn't know about this. I found you post very informative for me as it helpful to me to grow my knowledge.

  4. #4
    New member
    Join Date
    Oct 2015
    Thanked 0 Times in 0 Posts


    I need to change city text box to dropdown in magento backend as i have already done in frontend but not able to change in backend would really appreciate if anyone can help me out on this.

  5. #5

  6. #6
    Junior Member
    Join Date
    Sep 2018
    United Kingdom
    Thanked 2 Times in 2 Posts


    To begin with Magento 2 theme development, you may want to know the detail of Magento 2 theme structure and Magento 2 theme layout like base layout and theme layout.

Similar Threads

  1. Magento template design and development - Part 1 - Introduction
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 11
    Last Post: 12-03-2019, 05:43 AM
  2. Magento Module Development - Part 4 - Database and SQL
    By rocker in forum Programming & Development
    Replies: 2
    Last Post: 14-08-2018, 11:38 AM
  3. Magento template design and development - Part 2 - Layouts
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 8
    Last Post: 13-11-2015, 03:40 AM
  4. Replies: 1
    Last Post: 18-03-2015, 08:09 AM
  5. How I can get started with magento template design?
    By phuc2x in forum HTML, XHTML, CSS, Design Questions
    Replies: 5
    Last Post: 04-03-2014, 10:17 AM

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts