商品加入购物车jq代码（将商品加入购物车代码）

本篇文章给大家谈谈商品加入购物车jq代码，以及将商品加入购物车代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、ecshop的加入购物车功能怎么实现
• 2、如何实现ecshop批量添加商品到购物车
• 3、jquery 实现加入购物车功能
• 4、javascript+jsp实现在1.html把商品放购物车,在2.html显示购物车内的信息.看问题补充
• 5、很奇怪的js,ajax的问题，关于添加到购物车及点击删除的，就类似京东商城的那样。
• 6、jquery实现购物车物品加减 没效果，求解

ecshop的加入购物车功能怎么实现

默认的ecshop中只能单件点击“添加到购物车”，没有办法批量添加，其实很简单，我们68ecshop可以用函数 addToCart()来实现。下面我们就来讲一下具体的操作方法。

第一，修改商品列表模板 /themes/default/library/goods_list.lbi，在每个商品的前面增加一个复选框按钮。在74行的样子增加以下的代码：

input type="checkbox" value="{$goods.goods_id}" /

第二，随便找个位置，增加可以添加选定商品到购物车的链接。代码如下：

a href="javascript:addSelectedToCart('goodslist')"Add selected products to cart/a

第三，添加循环将选定商品加入购物车的函数，打开/js/common.js文件，在第36行，加入下面的代码：

/*

*添加选定商品到购物车

*/

function addSelectedToCart(p)

{

for ( var i=0; idocument.getElementById(p).elements.length; i++ )

{

var e = document.getElementById(p).elements[i];

if ( (e.type=='checkbox')(!e.disabled) )

{

if ( e.checked )

{

addToCart(e.value) ;

}

}

}

}

如何实现ecshop批量添加商品到购物车

第一步：

找到主机根目录下 /themes/default/library/goods_list.lbi 文件，在其中每个商品的前面增加一个复选框按钮。即默认模板大约第74行，增加代码：

input type=”checkbox” value=”{$goods.goods_id}” /

第二步：

增加可以添加选定商品到购物车的链接。位置任选，添加的代码如下：

a href=”javascript:addSelectedToCart(‘goodslist’)”Add selected products to cart

第三步：

添加循环将选定商品加入购物车的函数，打开/js/common.js文件，在第36行，加入如下代码：

/*

*添加选定商品到购物车

*/

function addSelectedToCart(p)

{

for ( var i=0; idocument.getElementById(p).elements.length; i++ )

{

var e = document.getElementById(p).elements[i];

if ( (e.type==’checkbox’)(!e.disabled) )

{

if ( e.checked )

{

addToCart(e.value) ;

}

}

}

}

按照以上三个步骤即可实现，其实Ecshop这款开源的商城系统在客户下单时添加商品到购物车使用的就是一个JS函数调用来提交数据的，在这里我们添加一个封装好的函数addToCart()来实现批量添加就可以实现啦。按照以上步骤修改好之后到网站后台更新下缓存就可以完美实现批量添加商品到购物车了。

jquery 实现加入购物车功能

参考以下代码：

注意需要导入jquery.js.

!DOCTYPE html  

html  

  head  

    title购物车----jQuery/title  

    meta charset="utf-8" /  

    style type="text/css"  

      h1 {  

        text-align:center;  

      }  

      table {  

        margin:0 auto;  

        width:60%;  

        border:2px solid #aaa;  

        border-collapse:collapse;  

      }  

      table th, table td {  

        border:2px solid #aaa;  

        padding:5px;  

      }  

      th {  

        background-color:#eee;  

      }  

    /style  

    script type="text/javascript" src="./js/jquery.js"/script  

    script type="text/javascript"  

      function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象  

        //先获取商品名字和单价还有库存以备后面使用  

        var $tds = $(btn).parent().siblings();  

        //$tds.eq(0)是jQuery对象  $tds[0]是DOM对象  

        var name = $tds.eq(0).html();//string  

        var price = $tds.eq(1).html();//string  

        var stock = $tds.eq(3).html();//string  

        //查看库存是否还有=0  

        if(stock = 0){  

          return;     

        }  

        //无论购物车中是否有该商品,库存都要-1  

        $tds.eq(3).html(--stock);  

        //在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行  

        var $trs = $("#goodstr");  

        for(var i=0;i$trs.length;i++){  

          var $gtds = $trs.eq(i).children();  

          var gName = $gtds.eq(0).html();  

          if(name == gName){//若存在  

            var num = parseInt($gtds.eq(2).children().eq(1).val());  

            $gtds.eq(2).children().eq(1).val(++num);//数量+1  

            //金额从新计算  

            $gtds.eq(3).html(price*num);  

            return;//后面代码不再执行  

          }  

        }  

        //若不存在,创建后追加  

        var li =  

          "tr"+  

            "td"+name+"/td"+  

            "td"+price+"/td"+  

            "td align='center'"+  

              "input type='button' value='-' onclick='decrease(this);'/ "+  

              "input type='text' size='3' readonly value='1'/ "+  

              "input type='button' value='+' onclick='increase(this);'/"+  

            "/td"+  

            "td"+price+"/td"+  

            "td align='center'"+  

              "input type='button' value='x' onclick='del(this);'/"+  

            "/td"+  

          "/tr";  

        //追加到#goods后面  

        $("#goods").append($(li));  

        //总计功能  

        total();  

      }  

      //辅助方法--单击购物车中的"+"  "-"  "x"按钮是找到相关商品所在td,以jQuery对象返回  

      function findStock(btn){  

        var name = $(btn).parent().siblings().eq(0).html();//获取商品名字  

        //注意table默认有行分组,若此处使用 $("#table1tr:gt(0)")则找不到任何tr  

        var $trs = $("#table1tbodytr:gt(0)");  

        for(var i=0;i$trs.length;i++){  

          var fName = $trs.eq(i).children().eq(0).html();  

          if(name == fName){//找到匹配的商品  

            return $trs.eq(i).children().eq(3);  

          }  

        }  

      }  

      //增加"+"功能  

      function increase(btn){  

        //获取该商品库存看是否=0  

        var $stock = findStock(btn);  

        var stock = $stock.html();  

        if(stock = 0){  

          return;  

        }  

        //库存-1    

        $stock.html(--stock);  

        //购物车数据改变  

        var $td = $(btn).prev();  

        var num = parseInt($td.val());//number  

        //num此时为number类型(在计算时会自动转换为number类型)  

        $td.val(++num);  

        //获取单价,再加计算前要先转换为number类型  

        var price = parseInt($(btn).parent().prev().html());  

        $(btn).parent().next().html(num*price);  

        //总计功能  

        total();  

      }  

      //减少"-"功能  

      function decrease(btn){  

        //该商品数量=1时候不能再减少  

        var num = parseInt($(btn).next().val());  

        if(num = 1){  

          return;     

        }  

        var $stock = findStock(btn);  

        //库存+1  

        var stock = $stock.html();  

        $stock.html(++stock);  

        //商品数量-1  

        $(btn).next().val(--num);  

        //从新计算金额  

        var price = parseInt($(btn).parent().prev().html());  

        $(btn).parent().next().html(price*num);  

        //总计功能  

        total();  

      }  

      //"x"删除按钮功能  

      function del(btn){  

        //将商品数量归还库存  

        var $stock = findStock(btn);  

        var stock = parseInt($stock.html());  

        var num = parseInt($(btn).parent().prev().prev().children().eq(1).val());  

        $stock.html(num + stock);  

        //清空改行商品列表  

        $(btn).parent().parent().remove();  

        //总计功能  

        total();  

      }  

    //总计功能  

    function total(){  

      //获取所有购物车中的trs  

      var $trs = $("#goods tr");  

      var amount = 0;  

      for(var i=0;i$trs.length;i++){  

        var money = parseInt($trs.eq(i).children().eq(3).html());  

        amount += money;  

      }  

      //写入总计栏  

      $("#total").html(amount);  

    }  

    /script  

  /head  

  body  

    h1真划算/h1  

    table id="table1"  

      tr  

        th商品/th  

        th单价(元)/th  

        th颜色/th  

        th库存/th  

        th好评率/th  

        th操作/th  

      /tr     

      tr  

        td罗技M185鼠标/td  

        td80/td  

        td黑色/td  

        td5/td  

        td98%/td  

        td align="center"  

          input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/  

        /td  

      /tr  

      tr  

        td微软X470键盘/td  

        td150/td  

        td黑色/td  

        td9028/td  

        td96%/td  

        td align="center"  

          input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/  

        /td  

      /tr  

      tr  

        td洛克iphone6手机壳/td  

        td60/td  

        td透明/td  

        td672/td  

        td99%/td  

        td align="center"  

          input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/  

        /td  

      /tr  

      tr  

        td蓝牙耳机/td  

        td100/td  

        td蓝色/td  

        td8937/td  

        td95%/td  

        td align="center"  

          input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/  

        /td  

      /tr  

      tr  

        td金士顿U盘/td  

        td70/td  

        td红色/td  

        td482/td  

        td100%/td  

        td align="center"  

          input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/  

        /td  

      /tr  

    /table  

    h1购物车/h1  

    table  

      thead  

        tr  

          th商品/th  

          th单价(元)/th  

          th数量/th  

          th金额(元)/th  

          th删除/th  

        /tr  

      /thead  

      tbody id="goods"  

      /tbody  

      tfoot  

        tr  

          td colspan="3" align="right"总计/td  

          td id="total"/td  

          td/td  

        /tr  

      /tfoot  

    /table      

  /body  

/html

最终效果图:

javascript+jsp实现在1.html把商品放购物车,在2.html显示购物车内的信息.看问题补充

一般来说，购物车信息是放在数据库的。不建议放在session。添加购物车就向数据库添加一条数据，另外一个页面刷新自然就可以获取数据

很奇怪的js,ajax的问题，关于添加到购物车及点击删除的，就类似京东商城的那样。

初步怀疑你的删除事件绑定有问题：新加入的DOM元素未绑定到事件。这种情况应该使用事件委派来做，你用 jQuery 吗？假设你的购物车列表的 HTML 结构如下：

ul id="cartList"

    li

        购物车商品1

        button删除/button

    /li

    li

        购物车商品2

        button删除/button

    /li

    ……

/ul

则删除购物车商品的代码为（用了 jQuery）：

$('#cartList').on('click', 'button', function() {  // 委派 button 的点击事件

    $(this).parent().remove();  // 移除购物车里当前商品

});

jquery实现购物车物品加减 没效果，求解

你选择器取错了，没取到两个按钮：

注意看，＃是 id选择器，class选择器是以“.”开头的。

你的代码里面 加减两个按钮的 id分别为：add1 和 min1 而它们的class为： add和min

所以正确的做法是

$("#add") --- $("#add1") 、 $("#min") --- $("#min1")

或者

$("#add") --- $(".add") 、 $("#min") --- $(".min")

有不明白的欢迎追问^_^

商品加入购物车jq代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于将商品加入购物车代码、商品加入购物车jq代码的信息别忘了在本站进行查找喔。