当前位置: 首页 > 技术库 > ECSHOP 商品详情页购买数量 添加加减按钮 实用版

ECSHOP 商品详情页购买数量 添加加减按钮 实用版

淘金建站-临沂网站建设-潍坊网站建设-企业网站-商城网站-微信商城-三级分销商城-电脑端+手机端+微信端+app+微信小程序五合一网站建设 / 2015-01-21

打开模板文件goods.dws 查找代码

<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>

修改为

<span class="goods_cut" onclick="goods_cut();changePrice();"><img src="images/plus1.gif" alt="减少" width="15" height="15" /></span>
<input name="number" type="text" id="number" value="1" size="4" onblur="changePrice()" style="border:1px solid #ccc; "/>
               <span class="goods_add" onclick="goods_add();changePrice();"><img src="images/plus2.gif" alt="增加" width="15" height="15" /></span>

 

再添加js脚本

<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>

再添加CSS样式

/*--------------商品详情页增加减少-------------*/
.goods_gds {
    height:35px;
    display:block;
    overflow:hidden;
}
.goods_font {
    display:block;
    float:left;    
    height:15px;
    margin:8px 3px 0;
    font-size:12px;
}
.goods_cut {
    border:0 none;
    cursor:pointer;
    display:block;
    float:left;
    font-size:0;
    height:15px;
    line-height:0;
    margin:8px 3px 0;
    width:15px;
    padding-right:0px;
    _padding-right:0px;
}
input.goodsBuyBox,input.number {
    border:1px solid #DDDDDD;
    float:left;
    font-size:10px;
    height:18px;
    line-height:18px;
    margin:5px 5px 5px 5px;
    padding:0;
    text-align:center;
}
.goods_add {
    border:0 none;
    cursor:pointer;
    display:block;
    float:left;
    font-size:0;
    height:15px;
    line-height:0;
    margin:8px 3px 0;
    width:15px;
}
.goods_number_tit{
    display: block;
    background:none;
    text-align:left;
    padding-left:5px; 
}

把下面的图片放进模板的图片文件夹,注意图片名称。

 

下一篇:DEDE织梦上传图片集出现FILEID和302错误
上一篇:ECSHOP商品详情页颜色、尺码 选择仿淘宝效果

潍坊公司地址:山东省临沂市河东区兰亭路国际电子商务产业园3楼

鲁公网安备 37070002370748号

诚信网站 智慧零售 一站式建站 淘宝店铺装修 免费领券网 宝贝回家

淘金互联
QQ在线咨询
咨询热线
400-967-1786