在使用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">

以上兩個樣式文件下載地址如下：

掃一掃，瀏覽關注本文