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

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

具体实现方法如下:

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

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

  1. <div class=“fo-section fo-padding-top fo-padding-bottom filter section-filterproduct” data-section=“filter”>
  2. <div class=“container” data-filter-section=“filterproduct”>
  3. <div class=“row row-small-gutter fo-neighbor”>
  4. {pboot:nav parent=5 num=21}
  5. <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>
  6. {/pboot:nav}
  7. </div>
  8. <div class=“filter-params fo-neighbor” data-filter-params=“filterproduct”></div>
  9. <div class=“filter-goods fo-neighbor” data-filter-goods=“filterproduct”></div>
  10. </div>
  11. <script type=“text/html” id=“filterParams”>
  12. {{each column o index}}
  13. <div class=“filter-params-content” dataproperty=“{{index}}”>
  14. <label class=“filter-params-item primary”>
  15. {{o.title}}
  16. </label>
  17. <label class=“filter-params-item all”>
  18. 全部
  19. </label>
  20. {{each o.value sub}}
  21. <label class=“filter-params-item”>
  22. {{sub}}
  23. </label>
  24. {{/each}}
  25. </div>
  26. {{/each}}
  27. </script>
  28. <script type=“text/html” id=“filterGoods”>
  29. <div class=“table-responsive d-md-block d-none”>
  30. <table class=“table table-bordered table-hover”>
  31. <thead class=“thead-dark”>
  32. <tr>
  33. <th>
  34. 产品名称
  35. </th>
  36. {{each column o}}
  37. <th>
  38. {{o.title}}
  39. </th>
  40. {{/each}}
  41. </tr>
  42. </thead>
  43. <tbody>
  44. {{each items o}}
  45. {{if o.active}}
  46. <tr>
  47. <td>
  48. <a href=“{{o.url}}” target=“_blank”>{{o.name}}</a>
  49. </td>
  50. {{each column p}}
  51. <td>
  52. {{o.params[p.title] || }}
  53. </td>
  54. {{/each}}
  55. </tr>
  56. {{/if}}
  57. {{/each}}
  58. </tbody>
  59. </table>
  60. </div>
  61. <div class=“filter-slides d-block d-md-none”>
  62. {{each items o}}
  63. {{if o.active}}
  64. <div class=“filter-slide”>
  65. <h3 class=“text-heading fo-icon-down”>
  66. {{o.name}}
  67. </h3>
  68. <a href=“{{o.url}}”>
  69. <div class=“filter-slide-content”>
  70. <p>{{o.name}}</p>
  71. {{each column p}}
  72. {{if o.params[p.title]}}
  73. <p>
  74. {{p.title}}: {{o.params[p.title]}}
  75. </p>
  76. {{/if}}
  77. {{/each}}
  78. </div>
  79. </a>
  80. </div>
  81. {{/if}}
  82. {{/each}}
  83. </div>
  84. </script>
  85. </div>

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

第二步、前端实例化解析

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

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

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

  1. <script src=“{pboot:sitetplpath}/js/vue.js”></script>
  2. <script src=“{pboot:sitetplpath}/js/fo.js”></script>
  3. <script src=“{pboot:sitetplpath}/js/fo.regular.js”></script>

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

2021121414382646

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

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

  1. <link rel=“stylesheet” href=“/images/fo.css”>
  2. <link rel=“stylesheet” href=“/images/base.css”>

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

2021121414400745

发表评论

您的电子邮箱地址不会被公开。