商品详情页如何添加购买数量加减按钮
更新时间:2016-08-19 点击量:1925
找到模板文件中的good.dwt,查找类似 <input name="number" type="text"
的数量文件输入控件(有的模板可能整合到了类似goods_info.lib库文件中)。
将这一整段<input …… />修改为
<script language="javascript" type="text/javascript"> function goods_cut(){ var num_val=document.getElementById('number'); var new_num=num_val.value; var Num = parseInt(new_num); if(Num>1)Num=Num-1; num_val.value=Num; } function goods_add(){ var num_val=document.getElementById('number'); var new_num=num_val.value; var Num = parseInt(new_num); Num=Num+1; num_val.value=Num; } </script> <span class="goods_cut"></span> <input name="number" type="text" class="goodsBuyBox" id="number" value="1" size="4"/> <span class="goods_add"></span> 添加css样式: .goods_cut { background: url("../images/plus.gif") no-repeat scroll 0 0 transparent; border: 0 none; cursor: pointer; display: block; float: left; font-size: 0; height: 15px; line-height: 0;margin: 8px 3px 0; width: 15px; } input.goodsBuyBox { border: 1px solid #DDDDDD; float: left; font-size: 10px; height: 18px; line-height: 18px; margin: 5px 6px 0; padding: 0; text-align: center; width: 32px; } .goods_add { background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent; border: 0 none; cursor: pointer; display: block; float: left; font-size: 0; height: 15px; line-height: 0; margin: 8px 3px 0; width: 15px; }
如果文章对您有帮助,就打赏一个吧