Magento - Layered Navigation Custom

If you want your layered navigation to be customized like the image above follow me... :)

We need to edit 3 files..

• styles.css
• template/catalog/layer/filter.phtml
• template/catalog/layer/view.phtml

filter.phtml

<select onchange="setLocation(this.value)" class="layer-nav-homepage">
<option value="" selected="true">

<?php if($GLOBALS['filtername'] == "Category"): ?>
<span>Kunstenaars</span>
<?php else: ?>
<?php echo $GLOBALS['filtername']; ?>
<?php endif; ?>
</option>

<?php foreach ($this->getItems() as $_item): ?>
<?php if ($_item->getCount() > 0): ?>
<option value="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?>&nbsp;(<?php echo $_item->getCount() ?>)</option>
<!--<a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>-->
<?php else: echo $_item->getLabel() ?>
<?php endif; ?>


<?php endforeach ?>
</select>

Remarks:
The list was changed into <select> for dropdown, then a default (no value) option was placed - this will get the name of the filter.. eg. category, price and style..., then the option..


view.phtml

<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
<div class="block-title">
<span><?php echo $this->__('Filter kunst op: ') ?></span>
</div>
<div class="block-content">
<?php echo $this->getStateHtml() ?>
<?php if($this->canShowOptions()): ?>
<!--<p class="block-subtitle"><?php // echo $this->__('Shopping Options') ?></p>-->
<dl id="narrow-by-list">

<?php $_filters = $this->getFilters() ?>
<?php $i=0; ?>
<?php foreach ($_filters as $_filter): ?>
<?php if($_filter->getItemsCount()): ?>

<?php $GLOBALS['filtername'] = $_filter->getName(); ?>

<!--<dt><?php // echo $this->__($_filter->getName()) ?></dt>-->
<dd><?php echo $_filter->getHtml() ?></dd>

<?php if($i==2): ?>
<?php else: ?>
<span> of </span>
<?php endif; $i++; ?>

<?php endif; ?>
<?php endforeach; ?>

</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<?php endif; ?>
</div>
</div>
<?php endif; ?>

Remarks:
The global var is for the filter name to be passed on the filter.phtml, then the condition if == 2 is for the OF... :)

Then to be able to put this on the homepage, you should enable isAnchor property of Default category... Also make the style attribute... That's IT! Hope this helps! Godbless!