opencart 如何筛选模块横向排列

今天，我们来说说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>

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

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