ECSHOP 商品详情页购买数量 添加加减按钮 实用版 _技术库 - 云建站超市

历史记录

清除

    热门搜索

    关注 提问

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

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

    云建站超市 / 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; 
    }

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

     

    上一篇:ECSHOP商品详情页颜色、尺码 选择仿淘宝效果

    云建站超市

    诚信网站 可信网站 可信网站 实名认证 财付通