Magento Themes and Magento Extensions

Magento – Layered Navigation Custom

Share

Magento – Layered Navigation Custom

If you want you 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)”>
<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>
<div>
<span><?php echo $this->__(‘Filter kunst op: ‘) ?></span>
</div>
<div>
<?php echo $this->getStateHtml() ?>
<?php if($this->canShowOptions()): ?>
<!–<p><?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!

Leave a Reply

You must be logged in to post a comment.