A-A+
给ecshop购物车页面添加一个加减符号
ecshop 商品详情页和购物车的页面,是没有数量添加与减少按钮的,这就导致我们想要添加一件商品的时候,只能重头再开始选择,无疑增加了购买的时间,参照了一下淘宝网的购物车页面,在数量框的两侧都有“+、-”号可以时时的进行添加商品与计算商品的价格,对于用户的体验很好,哪么在 ecshop 中这样的功能肯定不能少了,下面夏日博客就来把这样的功能给添加上去。
第一步,打开 /js/common.js 文件,在最后面的代码中添加如下代码:
- /**
- * 购物车加减按钮
- * @param txt_id 数量的ID
- * @param type 加 + 减 -
- * @param num 添加或者减少的数量 默认为一
- */
- function cart_number(txt_id, type, num)
- {
- num = num || 1;
- var txt = document.getElementById(txt_id);
- var source_num = parseInt(txt.value);
- if (source_num == 1 && type == '-')
- {
- alert('请最少购买一个商品');
- return;
- }
- var to_num = source_num;
- if (type == '+')
- {
- to_num += num;
- }
- else if (type == '-')
- {
- to_num -= num;
- }
- txt.value = to_num;
- showdiv(txt);
- }
第二步,打开模板文件 flow.dwt,查找 goods_number 的 input,在input的两侧添加加减符号或者直接添加图片也可以,如下所示:
- <a href="javascript:cart_number('goods_number_{$goods.rec_id}', '-');">-</a>
- <a href="javascript:cart_number('goods_number_{$goods.rec_id}', '+');">+</a>
提示:目前的这个修改是在购物车的页面,同样也可以适用于商品详情页面,这里就不在叙述了,这个方法有个小小的缺点,就是不能实现 ajax 的增删,修改数量之后需要重新更新一下购物车才可以,另外商品详情页面的代码跟上面的修改差不多,只是第二步中的代码有个小小的不同,如下所示:
- <a href="javascript:cart_number('number', '-');">-</a>
- <a href="javascript:cart_number('number', '+');">+</a>
好了,这就给 ecshop 添加了商品增加与减少时时计算的符号了,我们可以在此基础上进行完善,比如 ajax 的实现等。