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

最新推荐文章于 2025-12-05 12:53:34 发布

原创最新推荐文章于 2025-12-05 12:53:34 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php

WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra 专栏收录该内容

275 篇文章

订阅专栏

本文介绍如何在Magento中将左侧栏的筛选条件从默认的链接形式转换为SelectBox、Button、Checkbox及Color Swatch等样式，并提供了详细的代码示例。

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