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

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

初步怀疑你的删除事件绑定有问题:新加入的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()  // 移除购物车里当前商品

})

第一步:

找到主机根目录下 /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=0i<document.getElementById(p).elements.lengthi++ )

{

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

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

{

if ( e.checked )

{

addToCart(e.value)

}

}

}

}

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


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11789849.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-18
下一篇2023-05-18

发表评论

登录后才能评论

评论列表(0条)

    保存