By default, Magento includes some blocks on the left sidebar that could be useless; for example, the tags block. Therefore, we are going to replace them. However, before replacing, let’s see how to remove the default blocks if we don’t need them.
1. Removing the default blocks from the sidebar
To remove a default block from the left sidebar or from another core/text_list block, we can use the remove tag in our local.xml file. We already used the remove tag in the previous chapter when we removed the newsletter block from the sidebar to place it in the footer. The following is a reminder of that line of code:
<remove name=”left.newsletter”/>
Let’s suppose that you want to remove the left tags block and the default callouts block; you can do this with the following lines:
<remove name=”left.permanent.callout”/>
<remove name=”tags_popular”/>
To find the name attribute of each block that you want to remove, explore every single XML file of the base theme. In this case, I found the name tags_popular in the tags.xml file, and left.permanent.callout in the catalog.xml file.
As you can see in the layout folder of the base/default theme, there are many XML files and each of them is named with a particular name that refers to a particular section.
Note: Remember to put the remove action inside the reference block left.
2. Creating a vertical navigation menu on the sidebar
Now that we removed some blocks from the left sidebar, we create a new vertical navigation that generates some useful links to navigate the Magento store.
What we are going to do is quite easy to implement in three simple steps:
- Add a new block type in the local.xml file.
- Create a new PHTML file and name it leftnav.phtml and place it inside catalog/navigation.
- Add a new block type in the local.xml file.
Let’s suppose you want to have the vertical category menu that shows up on every page of the theme. If you want to do this, place the code in the <default> handle, inside the <reference name=”left”> block; we want it to always stay on the top, so we add before=”-“ as shown in the following code snippet:
<block type=”catalog/navigation” before=”-” name=
“leftNav as=”leftNav” template=
“catalog/navigation/leftnav.phtml”/>
- Create the leftnav.phtml file in pp/design/frontend/bookstore/ default/template/catalog/navigation with the following code:
<div class=”block block-leftnav”>
<div class=”block-title”>
<strong><?php echo $this-> (‘Browse Category’)
?></strong>
</div>
<div class=”block-content”>
<ul>
<?php foreach ($this->getStoreCategories() as
$_category): ?>
<?php if($_category->name!=””): ?>
<?php echo $this->drawItem($_category) ?>
<?php endif?>
<?php endforeach ?>
</ul>
</div>
</div>
This code will return the full category tree with all the classes needed for the customization.
- Customize the
Now, if you take a look at the generated code, you can see that each element has a class, so it’s easy to customize it with a little bit of CSS in the following manner:
/* Left Menu */
.block-leftnav { margin-top: 35px; }
.block-leftnav .block-title {
font-size:16px;
border- bottom: 1px solid #E1E1E1;
padding-bottom:10px;
}
.block-leftnav .block-content { }
.block-leftnav .block-content ul { padding: 0; list-style- position: inside;}
.block-leftnav .block-content ul li { }
.block-leftnav .block-content ul li.active { background: #333; color: #fff; padding-left: 10px; }
.block-leftnav .block-content ul li.active a {color: #FA9221; }
.block-leftnav .block-content ul li a { font-size: 13px; color: #333 }
.block-leftnav .block-content ul li a:hover { color: #FA9221; }
.block-leftnav .block-content > ul > li.level0 { border- bottom: 1px solid #E1E1E1; padding: 10px;}
.block-leftnav .block-content > ul > li.level0:last-child { border-bottom: 0; }
.block-leftnav .block-content > ul > li.level0:hover { background-color: #efefef}
.block-leftnav .block-content > ul > li.level0 > a { font- weight: bold; }
.block-leftnav .block-content ul ul { padding-left: 15px; }
.block-leftnav .block-content ul ul ul a { color: #999 }
And the final results will look like the following screenshot:
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.