Using Dropdowns for Attribute and Category Selection in Magento Catalog

There have been a few developers/ users on the Magento boards asking about alternative ways of selecting attributes, such as price or colour in the attribute filters on product catalog pages, so here is a really quick solution to convert the <ol> and <li> objects to a dropdown menus using <select> and <option>.

A quick warning though, this simple solution does rely on JavaScript.

Add the following file to: /app/design/frontend/default/_your_theme_name/template/catalog/layer

?Download filter.phtml
1
2
3
4
5
6
7
<select onchange="if(!options[selectedIndex].defaultSelected)
location=options[selectedIndex].value">
<option value="">Please Select...</option>
<?php foreach ($this->getItems() as $_item): ?>
    <option value="<?php echo substr($_item->getUrl(),stripos($_item->getUrl(),"?")) ?>"><?php echo $_item->getLabel() ?> (<?php echo $_item->getCount() ?>)</option>
<?php endforeach ?>
</select>

Any other methods/ improvements welcome!

Leave a Reply