Apart from giving you the power to add and remove blocks from templates, the Magento layout gives you the power to reorder blocks within your pages too. There are a few ways you could rearrange the blocks in your theme's sidebar, for instance, by moving a specific block:
- Below another block
- To the very top of the list of blocks
- To the very bottom of the list of blocks
As an example, take the current right sidebar in your theme, which will look similar to what is shown in the following screenshot:
Firstly, you can add some simple styling to the sidebar blocks to help us distinguish them from each other. Open your theme's styles.css file in the /skin/frontend/default/m18/css/ directory and add the following CSS:
.block {
background: #fff;
border-radius: 10px;
box-shadow: #CCC 0 10px 20px;
margin-bottom: 20px;
}
.block-title {
background: #e57d04;
color: #fff;
font-weight: bold;
}
.block-content,
.block-title {
padding: 10px;
}
.block-banner .block-content {
padding: 0;
}If you now refresh your store, the blocks in the sidebar will look more distinct from each other:
Next, you will need to open your theme's local.xml file in the /app/design/frontend/default/m18/layout/ directory of your Magento installation. If you want to move the Compare Products block above the My Cart callout block, you will use the after attribute in Magento layout to specify the block it appears after.
In Magento, the typical way to do this is to first unset the Compare Products block and then reinsert the block below the My Cart block:
<reference name="right"> <action method="unsetChild"> <name>catalog.compare.sidebar</name> </action> <block type="catalog/product_compare_sidebar" after="cart_sidebar" name="catalog.compare.sidebar.replacement" template="catalog/product/compare/sidebar.phtml"/> </reference>
The after value which blocks the repositioned block appears below while the template attribute defines which Magento template file should be used to render this block's content (in relation to the /app/design/frontend/your-package/your-theme/template/ directory).
If you now refresh a page on your store with the right sidebar enabled, you will see the blocks' ordering has been changed:
Once again, if you can't see the change on your store, ensure that you have refreshed or disabled Magento's caches by navigating to System | Cache Management in your Magento store's control panel.
Alternatively, you can move blocks within regions of your Magento templates to the top of all other blocks. Open your theme's local.xml file and add the layout XML:
<reference name="right"> <action method="unsetChild"> <name>catalog.compare.sidebar</name> </action> <block type="catalog/product_compare_sidebar" before="-" name="catalog.compare.sidebar.replacement" template="catalog/product/compare/sidebar.phtml"/> </reference>
Note the similarities with the preceding snippet; though in the previous example, you replace the after attribute with before and assign this attribute the value of -, which indicates it should be shown before all other blocks. If you refresh your page with the right sidebar visible, you will now see the blocks have reordered once again to show Compare Products at the top of the sidebar:
It is also possible to use this method to render blocks in your Magento template regions to position a specific block below all other blocks. Once again, open your local.xml file and use the following Magento layout XML to reorder the Compare Products block to the bottom of the blocks in the sidebar:
<reference name="right"> <remove name="catalog.compare.sidebar" /> <block type="catalog/product_compare_sidebar" after="-" name="catalog.compare.sidebar.replacement" template="catalog/product/compare/sidebar.phtml"/> </reference>
Note that the preceding XML uses the after attribute with a value of - (hyphen) to tell Magento to place this block after all others in this region. Refresh your screen once again to see the change take effect:
