十五年风雨路 · 一心铸精品

一个官网 留一件精品 做一个项目 树一块样板

Pbootcms自定义产品参数实现多级自由筛选

上一篇我们提到: 非常简单粗暴的方式直接在后台页面修改后缀后就可进入有以下两种链接方式1admin.php?p=/Menu/index或者1admin.php/Menu/index修改进入后可以在右侧看到如下内容,此时可以看到导航菜单选项是关闭的,我们只需要将其打开即可打开后需要注销后重新登录才可以看到左侧新打开的导航菜单,此处也可以用于在给客户交付前隐藏部分意

接下来我们进入今天的正文:
2022-03-15

在使用PBOOTCMS建设网站的时候出现一个客户特殊需求,在众多产品分类且每个分类都有大量自定义参数前提下,进行目标产品的自由筛选;实现效果如下:

具体实现方法如下:

第一步、制作前端筛选模板;

在所需要设置筛选的模板里面进行添加以下代码:

<div class="fo-section fo-padding-top fo-padding-bottom filter section-filterproduct" data-section="filter"> <div class="container" data-filter-section="filterproduct"> <div class="row row-small-gutter fo-neighbor"> {pboot:nav parent=5 num=21}<div class="col-md-3 col-6"><div class="filter-item text-body text-truncate {pboot:if([nav:i]==1)}active{/pboot:if}" data-mcode="[nav:mcode]" data-scode="[nav:scode]"> [nav:name] </div></div> {/pboot:nav}</div> <div class="filter-params fo-neighbor" data-filter-params="filterproduct"></div> <div class="filter-goods fo-neighbor" data-filter-goods="filterproduct"></div></div><script type="text/html" id="filterParams">{{each column o index}}<div class="filter-params-content" data-property="{{index}}"><label class="filter-params-item primary">{{o.title}}</label><label class="filter-params-item all">全部</label>{{each o.value sub}}<label class="filter-params-item">{{sub}}</label>{{/each}}</div>{{/each}}</script><script type="text/html" id="filterGoods"><div class="table-responsive d-md-block d-none"><table class="table table-bordered table-hover"><thead class="thead-dark"><tr><th>产品名称</th>{{each column o}}<th>{{o.title}}</th>{{/each}}</tr></thead><tbody>{{each items o}}{{if o.active}}<tr><td><a href="{{o.url}}" target="_blank">{{o.name}}</a></td>{{each column p}}<td>{{o.params[p.title] || ''}}</td>{{/each}}</tr>{{/if}}{{/each}}</tbody></table></div><div class="filter-slides d-block d-md-none">{{each items o}}{{if o.active}}<div class="filter-slide"><h3 class="text-heading fo-icon-down">{{o.name}}</h3><a href="{{o.url}}"><div class="filter-slide-content"><p>{{o.name}}</p>{{each column p}}{{if o.params[p.title]}}<p>{{p.title}}: {{o.params[p.title]}}</p>{{/if}}{{/each}}</div></a></div>{{/if}}{{/each}}</div></script> </div>

在以上的代码中已经包括了数据封闭;

第二步、前端实例化解析

在第一步代码所在文件中添加以下解析代码:

<script>fo.init({siteId:"1363654298283708417",title:"{pboot:companyname}",lang:"cn",design:false,rootURL:"/",env:"test",pageId:"1363654408820396034",pageType:"productDetail",collectionId:""});</script>

第三步、调用封闭数据对应的JS文件

<script src="{pboot:sitetplpath}/js/vue.js"></script><script src="{pboot:sitetplpath}/js/fo.js"></script><script src="{pboot:sitetplpath}/js/fo.regular.js"></script>

以上三个JS文件下载地址如下:

2021121414382646

第四步、调用前端页面展示样式

将以下样式调用添加至上述步骤所在文件中:

<link rel="stylesheet" href="/images/fo.css"> <link rel="stylesheet" href="/images/base.css">

以上两个样式文件下载地址如下:


二维码

扫一扫,浏览关注本文

主营业务

  • 高端网站定制
  • SEO网站优化
  • 手机网站建设
  • 网站维护
  • 网页设计制作
  • 微信小程序开发

TAGS

随机案例

  • 婴之皇/孕婴/母婴连锁加盟/网站建设

    婴之皇/孕婴/母婴连锁加盟/网站建设

  • 宏冠服饰网站建设

    宏冠服饰网站建设

  • 伊卡璐服饰/服装网站建设​

    伊卡璐服饰/服装网站建设​

  • 阿杰美容美发培训网站建设

    阿杰美容美发培训网站建设

  • 功夫蚂蚁餐饮火锅加盟网站建设

    功夫蚂蚁餐饮火锅加盟网站建设

  • 修柏建筑幕墙工程网站建设

    修柏建筑幕墙工程网站建设

  • 金鹿凯斯服饰/服装网站建设

    金鹿凯斯服饰/服装网站建设

  • 新文必生印务、印刷网站建设、包装网站建设

    新文必生印务、印刷网站建设、包装网站建设

案例展示 / CASE

五菱电动观光车网站建设

网站以HTML5制作,pc+wap网站制作自动跳转。关键词:五菱观光车网站建设,五菱巡逻车网站建设,封闭电动巡逻车网站建设,封闭电动观···

查看详情

康伟管业/PP超静音排水管材/网站建设

查看详情

伊卡璐服饰/服装网站建设​

网站以定制,订制服装网站建设为主的关键词,网站全新的以HTML5框架定制设计,整站目录清新明了,利于网站优化,搜索引擎蜘蛛爬行···

查看详情

功夫蚂蚁餐饮火锅加盟网站建设

功夫蚂蚁是一家专注于麻辣烫,火锅,串串香行业的优质餐饮连锁加盟公司。提供火锅串串香加盟免费指导、火锅加盟店选址等,让您在加盟···

查看详情

宏冠服饰网站建设

查看详情

晋沙汇川服装定制网站建设

查看详情

阿杰美容美发培训网站建设

查看详情

婴之皇/孕婴/母婴连锁加盟/网站建设

查看详情

金鹿凯斯服饰/服装网站建设

金鹿凯斯服饰/服装网站建设以html5响应式一体化设计制作,手机端自动响应,高端大气上次,关键词:成都职业装网站建设,成都职业装···

查看详情

修柏建筑幕墙工程网站建设

查看详情

高铁乘务/成都职业学校/四川高铁职业技术学校/网站建设

查看详情

蜀丰食品包装网站建设

实力让我们引领行业为您锁住健康,让食品更安全,让生活更健康!成都市都江堰市蜀丰食品包装有限公司成立于2014年初,是一家集研···

查看详情

联系我们 / CONTACT US

  • 四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903
  • 服务热线:028-86088588  18080432432(微信同号)
  • 总机:028-62322623-0
  • QQ:3575114  107086147

扫码访问手机网站

版权所有 Copyright © 2007-2024 BOB在线登录(中国)BOB有限公司    川公安网备案:51010602001006号     

地址:四川省成都市金牛区五福桥东路229号龙湖北城天街28栋903  蜀ICP备11012605号-1

始于2007年,十五年品牌网站建设,值得信赖!  xml地图txt地图