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

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

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

我看过几个模板的这个文件,默认代码都如下(需要修改部分1-27行):

  1. <div class="box">
  2.   <div class="box-heading"><?php echo $heading_title; ?></div>
  3.   <div class="box-content">
  4.     <ul class="box-filter">
  5.       <?php foreach ($filter_groups as $filter_group) { ?>
  6.       <li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span>
  7.         <ul>
  8.           <?php foreach ($filter_group['filter'] as $filter) { ?>
  9.           <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
  10.           <li>
  11.             <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
  12.             <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
  13.           </li>
  14.           <?php } else { ?>
  15.           <li>
  16.             <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
  17.             <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
  18.           </li>
  19.           <?php } ?>
  20.           <?php } ?>
  21.         </ul>
  22.       </li>
  23.       <?php } ?>
  24.     </ul>
  25.     <a id="button-filter" class="button"><?php echo $button_filter; ?></a>
  26.   </div>
  27. </div>

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

  1. <div class="box">
  2.   <div class="box-heading"><?php echo $heading_title; ?></div>
  3.   <div class="box-content">
  4.     <table class="box-filter">
  5.       <?php foreach ($filter_groups as $filter_group) { ?>
  6.       <tr><td><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span></td></tr>
  7.       <tr><td>
  8.         <ul class="saxu">
  9.           <?php foreach ($filter_group['filter'] as $filter) { ?>
  10.           <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
  11.           <li class="saxui">
  12.             <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" />
  13.             <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
  14.           </li>
  15.           <?php } else { ?>
  16.           <li class="saxui">
  17.             <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
  18.             <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
  19.           </li>
  20.           <?php } ?>
  21.           <?php } ?>
  22.         </ul>
  23.      </td></tr>
  24.       <?php } ?>
  25.     </table>
  26.     <div style="float:right;">
  27.     <a id="button-filter" class="button"><?php echo $button_filter; ?></a></div><br /><br />
  28.   </div>
  29. </div>

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

  1. .saxu{list-style-type:nonemargin:0;width:100%; }
  2. .saxui{ padding:10pxfloat:left;}

然后替换文件,OK!效果如下:

filter-opencart

 

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情