商品详情页如何添加购买数量加减按钮

更新时间: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;
}


支付宝扫码打赏 微信打赏

如果文章对您有帮助,就打赏一个吧

在线客服

客户服务

热线电话:

13128985956 服务时间:

周一到周六:9:00-18:00

在线QQ客服

在线微信客服

关于我们 常见问题

支付方式 加盟合作

提交需求
优惠红包 购物车0 反馈留言 返回顶部