A-A+

给ecshop购物车页面添加一个加减符号

2016年01月03日 PHP开源系统 暂无评论 阅读 10 views 次

ecshop 商品详情页和购物车的页面,是没有数量添加与减少按钮的,这就导致我们想要添加一件商品的时候,只能重头再开始选择,无疑增加了购买的时间,参照了一下淘宝网的购物车页面,在数量框的两侧都有“+、-”号可以时时的进行添加商品与计算商品的价格,对于用户的体验很好,哪么在 ecshop 中这样的功能肯定不能少了,下面夏日博客就来把这样的功能给添加上去。

第一步,打开 /js/common.js 文件,在最后面的代码中添加如下代码:

  1. /** 
  2. * 购物车加减按钮 
  3. * @param txt_id 数量的ID 
  4. * @param type 加 + 减 - 
  5. * @param num 添加或者减少的数量 默认为一 
  6. */  
  7. function cart_number(txt_id, type, num)  
  8. {  
  9. num = num || 1;  
  10. var txt = document.getElementById(txt_id);  
  11. var source_num = parseInt(txt.value);  
  12. if (source_num == 1 && type == '-')  
  13. {  
  14. alert('请最少购买一个商品');  
  15. return;  
  16. }  
  17. var to_num = source_num;  
  18. if (type == '+')  
  19. {  
  20. to_num += num;  
  21. }  
  22. else if (type == '-')  
  23. {  
  24. to_num -= num;  
  25. }  
  26.    
  27. txt.value = to_num;  
  28. showdiv(txt);  
  29. }  

第二步,打开模板文件 flow.dwt,查找 goods_number 的 input,在input的两侧添加加减符号或者直接添加图片也可以,如下所示:

  1. <a href="javascript:cart_number('goods_number_{$goods.rec_id}', '-');">-</a>  
  2. <a href="javascript:cart_number('goods_number_{$goods.rec_id}', '+');">+</a>  

提示:目前的这个修改是在购物车的页面,同样也可以适用于商品详情页面,这里就不在叙述了,这个方法有个小小的缺点,就是不能实现 ajax 的增删,修改数量之后需要重新更新一下购物车才可以,另外商品详情页面的代码跟上面的修改差不多,只是第二步中的代码有个小小的不同,如下所示:

  1. <a href="javascript:cart_number('number', '-');">-</a>  
  2. <a href="javascript:cart_number('number', '+');">+</a>  

好了,这就给 ecshop 添加了商品增加与减少时时计算的符号了,我们可以在此基础上进行完善,比如 ajax 的实现等。

标签:

给我留言