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.
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.
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:
local.xml
file.leftnav.phtml
and place it inside catalog/navigation
.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"/>
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.
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:
13.59.136.170