Select more than one item in layered navigation (multiple select/checkboxes)

Question

How do you convert the standard layered navigation to use checkboxes or multiple select inputs for attributes of type dropdown or multiselect?

For example if a user selects blue and red for the color attribute, the layered navigation shows all items matching either blue OR red.

See example in toolbar on this page:

Answer 1

There are many extensions out there that will give you this functionality (search for "enhanced layered navigation"). I have tried all of the extensions listed below but my favourite is by Ecommerce Team - I like it for its minimalistic nature, it doesn't try to do too much but is very powerful and works well out of the box. It also has support for color swatches like you described.

Some others in no particular order:

1. http://amasty.com/improved-navigation.html
2. http://www.aitoc.com/en/magentomods_layered_navigation_pro.html
3. http://www.manadev.com/seo-layered-navigation-plus
4. http://www.gomage.com/extensions/gomage-advanced-navigation.html

Be aware these may cause conflicts with other third party modules.

---

If you are mainly looking to do this with color swatches I suggest you check out this extension by Chad Morgan.

---

Here's an article by Inchoo about keeping the unused filters visible.

---

If you're looking to code this yourself then I think the answer to your question might be too long for this forum. I don't have a link to a blog post/tutorial teaching you how to do this but I suggest starting with extending the layered navigation blocks.

Answer 2

If you are only interested in converting default layered navigation to check boxes the solution is very easy and placing it here.

Edit the code of app/design/frontend/ourpackage/ourtheme/template/catalog/layer/filter.phtml file as follows:

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>
        <?php if ($_item->getCount() > 0): ?>
            <form>
                <span class="check-box">
                    <input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $this->urlEscape($_item->getUrl()) ?>")'/>
                </span>
                <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>">
                    <?php echo $_item->getLabel() ?>
                    <?php if ($this->shouldDisplayProductCount()): ?>
                    <span class="count">(<?php echo $_item->getCount() ?>)</span>
                    <?php endif; ?>
                </a>
            </form>
        <?php else: ?>
            <form>
                <span class="check-box">
                    <input type="checkbox" name="vehicle" onclick='window.location.assign("<?php echo $this->urlEscape($_item->getUrl()) ?>")'/>
                </span>
                <span>
                    <?php echo $_item->getLabel(); ?>
                    <?php if ($this->shouldDisplayProductCount()): ?>
                        <span class="count">(<?php echo $_item->getCount() ?>)</span>
                    <?php endif; ?>
                </span>
            </form>
        <?php endif; ?>
    </li>
<?php endforeach ?>
</ol>

The solution is improved version of this. So the credit goes to this person as well.