<i id="tzb7r"><ruby id="tzb7r"><font id="tzb7r"></font></ruby></i>

      <output id="tzb7r"><strike id="tzb7r"><cite id="tzb7r"></cite></strike></output><ol id="tzb7r"><var id="tzb7r"><b id="tzb7r"></b></var></ol>

      <i id="tzb7r"><output id="tzb7r"><var id="tzb7r"></var></output></i>

          十五年風雨路 · 一心鑄精品

          一個官網 留一件精品 做一個項目 樹一塊樣板

          Pbootcms自定義產品參數實現多級自由篩選

          上一篇我們提到: 非常簡單粗暴的方式直接在后臺頁面修改后綴后就可進入有以下兩種鏈接方式1admin.php?p=/Menu/index或者1admin.php/Menu/index修改進入后可以在右側看到如下內容,此時可以看到導航菜單選項是關閉的,我們只需要將其打開即可打開后需要注銷后重新登錄才可以看到左側新打開的導航菜單,此處也可以用于在給客戶交付前隱藏部分意

          接下來我們進入今天的正文:
          2022-03-15 09:58:42

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

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


          二維碼

          掃一掃,瀏覽關注本文

          主營業務

          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制
          • 高端網站定制

          TAGS

          隨機案例

          • 天翊裝飾網站建設

            天翊裝飾網站建設

          • 修柏建筑幕墻工程網站建設

            修柏建筑幕墻工程網站建設

          • 高鐵乘務/成都職業學校/四川高鐵職業技術學校/網站建設

            高鐵乘務/成都職業學校/四川高鐵職業技術學校/···

          • 嬰之皇/孕嬰/母嬰連鎖加盟/網站建設

            嬰之皇/孕嬰/母嬰連鎖加盟/網站建設

          • 阿杰美容美發培訓網站建設

            阿杰美容美發培訓網站建設

          • 宏冠服飾網站建設

            宏冠服飾網站建設

          • 康偉管業/PP超靜音排水管材/網站建設

            康偉管業/PP超靜音排水管材/網站建設

          • 晉沙匯川服裝定制網站建設

            晉沙匯川服裝定制網站建設

          案例展示 / CASE

          宏冠服飾網站建設

          查看詳情

          高鐵乘務/成都職業學校/四川高鐵職業技術學校/網站建設

          查看詳情

          伊卡璐服飾/服裝網站建設?

          網站以定制,訂制服裝網站建設為主的關鍵詞,網站全新的以HTML5框架定制設計,整站目錄清新明了,利于網站優化,搜索引擎蜘蛛爬行···

          查看詳情

          嬰之皇/孕嬰/母嬰連鎖加盟/網站建設

          查看詳情

          晉沙匯川服裝定制網站建設

          查看詳情

          五菱電動觀光車網站建設

          網站以HTML5制作,pc+wap網站制作自動跳轉。關鍵詞:五菱觀光車網站建設,五菱巡邏車網站建設,封閉電動巡邏車網站建設,封閉電動觀···

          查看詳情

          康偉管業/PP超靜音排水管材/網站建設

          查看詳情

          修柏建筑幕墻工程網站建設

          查看詳情

          新文必生印務、印刷網站建設、包裝網站建設

          成都印刷網站建設,成都印刷廠網站設計,成都畫冊印刷網站制作,成都畫冊制作網站建設,成都印刷廠家網站建設,四川印刷網站建設,四川···

          查看詳情

          阿杰美容美發培訓網站建設

          查看詳情

          明霆基礎工程網站建設

          查看詳情

          金鹿凱斯服飾/服裝網站建設

          金鹿凱斯服飾/服裝網站建設以html5響應式一體化設計制作,手機端自動響應,高端大氣上次,關鍵詞:成都職業裝網站建設,成都職業裝···

          查看詳情
          ?

          聯系我們 / CONTACT US

          • 四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903
          • 服務熱線:028-86088588  18080432432(微信同號)
          • 總機:028-62322623-0
          • QQ:3575114  107086147

          掃碼訪問手機網站

          版權所有 Copyright ? 2007-2022 四川冠辰科技開發有限公司    川公安網備案:51010602001006號     

          地址:四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903  蜀ICP備11012605號-1

          始于2007年,十五年品牌網站建設,值得信賴!  xml地圖txt地圖

          欧美日韩国产精品自在自线

            <i id="tzb7r"><ruby id="tzb7r"><font id="tzb7r"></font></ruby></i>

              <output id="tzb7r"><strike id="tzb7r"><cite id="tzb7r"></cite></strike></output><ol id="tzb7r"><var id="tzb7r"><b id="tzb7r"></b></var></ol>

              <i id="tzb7r"><output id="tzb7r"><var id="tzb7r"></var></output></i>