Changing the layout of the layered navigation

Question

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?

Answer 1

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>

Answer 2

You can use core_block_abstract_prepare_layout_after event on Mage_Catalog_Block_Layer_View block to change the template of your particular attribute filter.

It could be something like this:

public function yourObserver($observer) 
{
    $block = $observer->getBlock();
    if ($block instanceof Mage_Catalog_Block_Layer_View) {
        $block->getChild($yourAttributeCodeGoesHere . '_filter')
           ->setTemplate('your/template.phtml');
    }
}

Summary:

Every child filter block has alias in layered navigation block as [attribute_code]_filter, and all of them created in _prepareLayout() method so you can easily modify its template on core_block_abstract_prepare_layout_after event.

Also you can check within your observer that current theme is the same as expected one by calling:

$design = Mage::getSingleton('core/design_package')
$design->getPackageName(); // Returns current design package
$design->getTheme('layout'); // Returns current design layout

Sincerely, Ivan