opencart技巧-简单几步让筛选模块横排(类似淘宝)

今天，我们来说说opencart的筛选功能，这个功能是什么？从字面含义我们可以看出这是分类下筛选产品用的！比如品牌筛选，价格筛选，颜色筛选等！关于如何使用，自己在opencart后台琢磨下就懂了，以后我也会放出教程！已经使用的请看这里！重新定义这个排版！

找到 catalog/view/theme/主题/template/module/filter.tpl 这个文件

我看过几个模板的这个文件，默认代码都如下（需要修改部分1-27行）：

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<ul class="box-filter">
<?php foreach ($filter_groups as $filter_group) { ?>
<li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
<ul>
<?php foreach ($filter_group['filter'] as $filter) { ?>
<?php if (in_array($filter['filter_id'], $filter_category)) { ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } else { ?>
<li>
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } ?>
<?php } ?>
</ul>
</li>
<?php } ?>
</ul>
<a id="button-filter" class="button"><?php echo $button_filter; ?></a>
</div>
</div>

在这里，我们要横排怎么办呢？我尝试过不少CSS定义，由于CSS基础不扎实，我没定义好横排的完美样式，总是欠缺，于是我想改了代码，再加定义，就应该OK了，如下：

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<table class="box-filter">
<?php foreach ($filter_groups as $filter_group) { ?>
<tr><td><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span></td></tr>
<tr><td>
<ul class="saxu">
<?php foreach ($filter_group['filter'] as $filter) { ?>
<?php if (in_array($filter['filter_id'], $filter_category)) { ?>
<li class="saxui">
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } else { ?>
<li class="saxui">
<input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
<label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
</li>
<?php } ?>
<?php } ?>
</ul>
</td></tr>
<?php } ?>
</table>
<div style="float:right;">
<a id="button-filter" class="button"><?php echo $button_filter; ?></a></div><br /><br />
</div>
</div>

然后，我们在样式里面，或者在这个文件最上面加上样式定义

.saxu{list-style-type:none; margin:0;width:100%; }
.saxui{ padding:10px; float:left;}

然后替换文件，OK！效果如下：

版权声明：本站原创文章，于10年前，由yumanutong发表，共 2973字。
转载请注明：opencart技巧-简单几步让筛选模块横排(类似淘宝) | SDT技术网 +复制链接

目前评论：1 其中：访客 0 博主 0

绿软吧（lvr8.com） 1
回复 2020年04月10日 03:04 -9楼

感谢分享，谢谢站长！！

评论加载中...

发表评论取消回复