Magento – Changing the layout of the layered navigation

event-observerlayered-navigationmagento-1

I have a layered navigation, and the customer wants to have <select/> fields instead of a long list of links.

I thought about just changing the template with a observer if the name/id of the filter matches.

Any better ideas or recommendations? Alternatives to changing the template, maybe overwrite/rewrite the block or only change the block class for the two filters?

What event to use for changing the template?

I have then the same problem as here https://stackoverflow.com/questions/14524791/magento-enable-or-disable-a-module-in-code/14529629 because I have an observer who changes layout things. This is only theme relevant. So chechking the theme before running the updates might be a good idea?

Best Answer

Ok, things you need to do: 1. Override the 'catalog/layer_view' block to set your own template. I put my layered nav in the header area as part of a 1 column layout 

<layout>
    <catalog_category_layered>        
        <reference name="header">
            <block type="catalog/layer_view" name="mylayered"  template="mymodule/catalog/layer/view.phtml"/>
        </reference>    
    </catalog_category_layered>
</layout>

In that template file you need to specify the overridden template for your individual elements. 

<?php if($this->canShowBlock()): ?>
<div class="block block-layered-nav">
    <div class="block-title">
        <strong><span><?php echo $this->__('Shop By') ?></span></strong>
    </div>
    <div class="block-content">
        <?php echo $this->getStateHtml() ?>
        <?php if ($this->getLayer()->getState()->getFilters()): ?>
            <div class="actions"><a href="<?php echo $this->getClearUrl() ?>"><?php echo $this->__('Clear All') ?></a></div>
        <?php endif; ?>
        <?php if($this->canShowOptions()): ?>
            <p class="block-subtitle"><?php echo $this->__('Shopping Options') ?></p>
            <dl id="narrow-by-list">
                <?php $_filters = $this->getFilters() ?>
                <?php foreach ($_filters as $_filter): ?>
                <?php /* !!! HERE !!! */ ?>
                <?php if(some_condition == true){ $_filter->setTemplate('path/to/your/new/filter.phtml'); } ?>
                <?php if($_filter->getItemsCount()): ?>
                    <dt><?php echo $this->__($_filter->getName()) ?></dt>
                    <dd><?php echo $_filter->getHtml() ?></dd>
                <?php endif; ?>
                <?php endforeach; ?>
            </dl>
            <script type="text/javascript">decorateDataList('narrow-by-list')</script>
        <?php endif; ?>
    </div>
</div>
<?php endif; ?>

Finally, you need to create the drop down filter.phtml. That should be straight forward. This is poorly formatted as I am having trouble with this editor, but the general idea is here. Some Javascript will be needed as well. 

<ol>

    <li><select>
    <?php foreach ($this->getItems() as $_item): ?>
        <option value="<?php echo $this->urlEscape($_item->getUrl()); ?>">
        <?php if ($_item->getCount() > 0): ?>
        <a href="<?php echo $this->urlEscape($_item->getUrl()) ?>"><?php echo $_item->getLabel() ?></a>
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
        (<?php echo $_item->getCount() ?>)
        <?php endif; ?>
    </option>
<?php endforeach ?>
</select></li>
</ol>
Related Topic