Change order of blocks via local.xml file

Pieter Hoste picture Pieter Hoste · Dec 10, 2010 · Viewed 30.4k times · Source

Is it possible to change the order of already existing blocks via the local.xml file? I know you can change the order of a block with the after or before attribute, but how can one change those attributes of existing blocks.

For example, if I want to place the layered navigation block underneath the newsletter subscription block in the left column, how would I do that?

Answer

Ivan Chepurnyi picture Ivan Chepurnyi · Dec 10, 2010

You need to perform a small trick, remove child block and add it in new position:

<reference name="parent.block.name">
    <action method="unsetChild">
        <alias>child_block_alias</alias>
    </action>
    <action method="insert">
        <blockName>child.block.name</blockName>
        <siblingName>name_of_block</siblingName>
        <after>1</after>
        <alias>child_block_alias</alias>
    </action>
</reference>

This Layout XML instruction does what you want. Look at this short reference of parameters for insert method:

  • blockName is your block unique name across the layout, product.view for example
  • siblingName is an block unique name, that is already exists in insertion target block, used for positioning of your block. Leave empty to display it at the top or at the bottom.
  • after is a boolean identifier of block position. If equals to 1, then the block will be added after siblingName or in the bottom of the children list if siblingName is empty
  • alias is the alias of your block, if it is empty the name of block will be used.

Some Examples:

Move cart sidebar block after recently viewed products

<reference name="right">
    <action method="unsetChild">
        <alias>cart_sidebar</alias>
    </action>
    <action method="insert">
        <blockName>cart_sidebar</blockName>
        <siblingName>right.reports.product.viewed</siblingName>
        <after>1</after>
    </action>
</reference>

Move cart sidebar block before recently viewed products

<reference name="right">
    <action method="unsetChild">
        <alias>cart_sidebar</alias>
    </action>
    <action method="insert">
        <blockName>cart_sidebar</blockName>
        <siblingName>right.reports.product.viewed</siblingName>
        <after>0</after>
    </action>
</reference>

Move cart sidebar block at the end of the right block

<reference name="right">
    <action method="unsetChild">
        <alias>cart_sidebar</alias>
    </action>
    <action method="insert">
        <blockName>cart_sidebar</blockName>
        <siblingName></siblingName>
        <after>1</after>
    </action>
</reference> 

Move cart sidebar block at the top of the left block

<reference name="right">
    <action method="unsetChild">
        <alias>cart_sidebar</alias>
    </action>
</reference>
<reference name="left">
    <action method="insert">
        <blockName>cart_sidebar</blockName>
    </action>
</reference>

Enjoy working with Magento!