Magento: 左栏筛选条件 Select Box / Button / Dropdown List on Layered Navigation

1. 下拉框 Select Box
You have plain text and link to those text in Magento Layered Navigation section. You can easily change the display of Layered Navigation links into a selection box / dropdown list. To do so, you need to edit the following file:

app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/layer/filter.phtml

filter.phtml file contains code something like below:

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li>		
        <?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; ?>
    </li>
<?php endforeach ?>
</ol>

 

Here is the edit to filter.phtml that will display selection box / dropdown list in layered navigation. You just need to replace the code of your filter.phtml file with the code shown below:

<select name="layered-nav-select" onChange="setLocation(this.value)">
	<option selected="selected" value="#">Please Select</option>
	<?php foreach ($this->getItems() as $_item): ?>				
			<?php if ($_item->getCount() > 0): ?>
				<option value="<?php echo $this->urlEscape($_item->getUrl()) ?>">
					<?php
					echo $_item->getLabel();
					if ($this->shouldDisplayProductCount()):
						echo '(' . $_item->getCount() . ')';
					endif; 
					?>
				</option>				
			<?php else: ?>
				<option value="#">
					<?php
					echo $_item->getLabel();
					if ($this->shouldDisplayProductCount()):
						echo '(' . $_item->getCount() . ')';
					endif; 
					?>
				</option>
			<?php endif; ?>		
	<?php endforeach ?>
</select>

Now, you should be able to view selection list in your layered navigation section in frontend.

 

2. 按钮 Button

 

<?php foreach ($this->getItems() as $_item): ?>
<?php $_label      = str_replace(array('"',"'",' '), array('','','-'), strtolower($_item->getLabel())) ?>
<?php $_url        = $this->urlEscape($_item->getUrl()) ?>
<?php $_remove_url = $this->urlEscape($_item->getRemoveUrl()) ?>
<?php $_get_attr   = $_item->getFilter()->getRequestVar() ?> 
<?php //echo 'tester:<pre>'; print_r($_item->getFilter()->getResetValue()); echo '</pre>';?> 

    <button type="button" class="btn btn-default btn-size filter-button<?php echo $_item->getMSelected() ? ' active-button' : '' ?>" data-url="<?php echo $_remove_url ?>" data-remove-url="<?php echo $_url ?>">
    	<?php echo $_item->getLabel() ?>
    </button>
<?php endforeach ?>

 

 

3. 复选框 checkbox

 

<?php foreach ($this->getItems() as $_item): ?>
<?php $_label      = str_replace(array('"',"'",' '), array('','','-'), strtolower($_item->getLabel())) ?>
<?php $_url        = $this->urlEscape($_item->getUrl()) ?>
<?php $_remove_url = $this->urlEscape($_item->getRemoveUrl()) ?>
<?php $_get_attr   = $_item->getFilter()->getRequestVar() ?> 
<?php //echo 'tester:<pre>'; print_r($_item->getFilter()->getResetValue()); echo '</pre>';?> 

          <div class="checkbox"> 
		<input type="checkbox" <?php echo $_item->getMSelected() ? 'checked="checked"' : '' ?> class="filter-button<?php echo $_item->getMSelected() ? ' active-button' : '' ?>" data-url="<?php echo $_url ?>" data-remove-url="<?php echo $_remove_url ?>" data-count="<?php echo $_item->getCount() ?>" value="" /> 
		<label><?php echo $_item->getLabel() ?></label>
	</div>
	
<?php endforeach ?>

 

 

4. 色彩框 color

 

<?php foreach ($this->getItems() as $_item): ?>
<?php $_label      = str_replace(array('"',"'",' '), array('','','-'), strtolower($_item->getLabel())) ?>
<?php $_url        = $this->urlEscape($_item->getUrl()) ?>
<?php $_remove_url = $this->urlEscape($_item->getRemoveUrl()) ?>
<?php $_get_attr   = $_item->getFilter()->getRequestVar() ?> 
<?php //echo 'tester:<pre>'; print_r($_item->getFilter()->getResetValue()); echo '</pre>';?> 

	<span 
		class="btn btn-default filter-button btn-color btn-circle-micro<?php echo $_item->getMSelected() ? ' active-button' : '' ?>"
		data-url="<?php echo $_url ?>" 
		data-remove-url="<?php echo $_remove_url ?>" 
		style="background-color:<?php echo $_label ?>;
				<?php if(!in_array($_label, array('white','#fff','#ffffff'))) echo 'border:none;'?>
				<?php if(isset($_GET[$_get_attr]) AND $_GET[$_get_attr]) echo $_item->getMSelected() ? '' : 'display:none;' ?>
			  "
	>
	</span>	
	
<?php endforeach ?>

 

 

 

转自：Magento: 左栏筛选条件 Select Box / Button / Dropdown List on Layered Navigation