纯前端实现商品筛选功能页面,罗列所有过滤条件,最直观最高效,效果参考京东及淘宝

需求:

实现类似京东及淘宝的商品筛选模式,直观,操作简便。

e.g

现状:

  1. 系统没有设置一个标志性的搜索栏;
  2. 商品数量不超过1000个;
  3. 页面用于商品快捷管理,而非商品买卖,故数据的即时性要求不像京东淘宝那么高;

方案:

  1. 选择筛选条件后执行表单提交操作,直接进行页面刷新;(前端开发难度最小,需要后端实现筛选,可能需考虑缓存,数据即时,用户体验差)
  2. 选择筛选条件后通过 AJAX 方式提交表单,获取后端筛选后的商品 JSON 集合,遍历显示;(前端开发难度中等,需要后端实现筛选,可能需考虑缓存,数据即时,用户体验好)
  3. 页面加载时把全部商品集合储存于 JS 变量中作为前端商品池,选择筛选条件后直接在前端商品池中筛选,把筛选得到的商品集合遍历显示;(前端开发难度最高,不需要后端实现筛选,数据为首次打开页面时加载,非即时,用户体验好)

结合现状来说,方案2和方案3都是可取的,作为一个前端开发,我更加愿意尝试用方案3来实现,为了更友好地展示商品,避开全选按钮的歧义,我决定去掉分页,改用图片延迟加载的方式来减少浏览器和服务器压力。

实现:

  1. 商品池初始化:

     <c:forEach items="${arr}" var="item">
         totalProduct.push({
             id:${item.id},
             code:"${item.code}",
             name:"${item.name}",
             icon:"${item.icon}",
             price:${item.price},
             stock:${item.stock},
             status:${item.status},
             tags:"${item.tags}"
         });
     </c:forEach>
    

    通过jstl循环把所有商品放进 js 数组中,作为商品池

  2. 筛选方法定义:

     checkCondition(item,condition(){
         //检查条件是否符合
         //符合则返回true,否则返回false
         //代码略
         //这里相对复杂,因为根据条件不同的条件要进行不同的筛选方法,包括相等,比较大小,模糊搜索等
     }
     
     //conditions 是筛选条件集合
     getProducts(conditions){
         for(var i=0;i<totalProducts.length;i++){
             //遍历商品池,找出符合条件的商品并append到显示容器中
             flag=true;
             for(var j=0;j<conditions.length,flag==true;j++){
                 flag=checkCondition(totalProducts[i],conditions[j])
             }
              
             if(flag){
                 //如果flag还是true,则该商品符合所有过滤条件
                 //append商品
                 //代码略
             }
         }
     }
    
  3. 筛选条件的更新和点击监听:

    首先,给所有可点击的条件定义对应属性和取值;

     <span class="l_condition" data-param="status" data-value="0">下架</span>
     <span class="l_condition" data-param="status" data-value="1">上架</span>
    

    然后,写条件监听方法

     $('.l_condition').click(function(){
         var $tmpDom=$(this);
         condition_add($tmpDom.data('param'),$tmpDom.data('value'));
     });
    

    这里只写了最简单的方式,除了这种选择性,还有价格区间要读取input.val(),商品名称要模糊搜索等,其实可以举一反三。

  4. 商品操作方法定义:

    用于快速修改商品池中的商品信息,主要用于ajax修改完成后的静默同步

    (代码略)

  5. 图片延迟加载:

    传送门:图片延迟加载的实现

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏