基于JavaScript实现添加到购物车效果附源码下载

前端技术 2023/09/04 JavaScript

我们有很多种方法实现将商品添加到购物车，通常的做法是点击“添加到购物车”按钮，会跳转到购物车，在购物车里可以点击“结算”按钮进行结算。而今天我给大家介绍一个更友好的解决方案。

查看演示 下载源码

默认情况下，购物车是隐藏不可见的，当用户点击添加到购物车按钮后，商品信息会添加到购物车，购物车会以按钮的形式出现在页面右下角，点击按钮则会展开购物车，显示购物车中的商品信息，同时也可以对购物车中的商品进行删除或者结算等操作。用户也可以暂时关闭购物车继续购物。

HTML结构

HTML结构主要包括两部分，第一部分是商品列表中的“添加到购物车”按钮，如下代码，我们使用data-*属性将商品的id，图片、名称、价格等信息一并带上。

<a href=\"#0\" class=\"btn btn-success add-button\" data-price=\"3669.00\" data-proid=\"1\" data-proname=\"华为P9\" data-proimg=\"img/huawei_p9.jpg\">添加到购物车</a>

第二部分是购物车，购物车部分包括触发购物车以及购物车统计部分 .cd-cart-trigger和购物车主体内容部分.cd-cart。

<div class=\"cd-cart-container empty\"> 
<a href=\"#0\" class=\"cd-cart-trigger\"> 
购物车 
<ul class=\"count\"> <!-- cart items count --> 
<li>0</li> 
<li>0</li> 
</ul> 
</a> 
<div class=\"cd-cart\"> 
<div class=\"wrapper\"> 
<header> 
<h2>购物车</h2> 
<span class=\"undo\">已删除 <a href=\"#0\">恢复</a></span> 
</header> 
<div class=\"body\"> 
<ul> 
<!-- 此部分是购物车商品部分，由javascript动态插入 --> 
</ul> 
</div> 
<footer> 
<a href=\"#0\" class=\"checkout\"><em>结算 - ￥<span>0</span></em></a> 
</footer> 
</div> 
</div> 
</div>

在div.body元素里的ul列表默认是空的，它是用来显示购物车的商品列表信息的，它的大致结构如下，它是由Javascript动态插入的。

<div class=\"body\"> 
<ul> 
<li class=\"product\"> 
<div class=\"product-image\"> 
<a href=\"#0\"><img src=\"img/pro.jpg\" alt=\"placeholder\"></a> 
</div> 
<div class=\"product-details\"> 
<h3><a href=\"#0\">商品名称</a></h3> 
<span class=\"price\">￥3999.99</span> 
<div class=\"actions\"> 
<a href=\"#0\" class=\"delete-item\">删除</a> 
<div class=\"quantity\"> 
<label for=\"cd-product-\'+ productId +\'\">件数</label> 
<span class=\"select\"> 
<span class=\"select\">x<i id=\"cd-product-\'+proid+\'\">1</i></span> 
</span> 
</div> 
</div> 
</div> 
</li> 
</ul> 
</div>

CSS部分在本文不展示了，大家可以下载源码中的css/style.css查看。

Javascript

本实例代码是基于jQuery，因此需要提前加载jQUery库文件。

当用户点击按钮.add-button后，触发函数addProduct()，将商品信息插入到 .body > ul中。

function addProduct(proname,proid,price,proimg) { 
var quantity = $(\"#cd-product-\"+proid).text(); 
var select=\'\',productAdded=\'\'; 
if(quantity==\'\'){ 
var select = \'<span class=\"select\">x<i id=\"cd-product-\'+proid+\'\">1</i></span>\'; 
var productAdded = $(\'<li class=\"product\"><div class=\"product-image\"><a href=\"#0\"><img src=\"\'+proimg+\'\" alt=\"placeholder\"></a></div><div class=\"product-details\"><h3><a href=\"#0\">\'+proname+\'</a></h3><span class=\"price\">￥\'+price+\'</span><div class=\"actions\"><a href=\"#0\" class=\"delete-item\">删除</a><div class=\"quantity\"><label for=\"cd-product-\'+ proid +\'\">件数</label>\'+select+\'</div></div></div></li>\'); 
cartList.prepend(productAdded); 
}else{ 
quantity = parseInt(quantity); 
$(\"#cd-product-\"+proid).html(quantity+1); 
} 
}

以上所述是小编给大家介绍的基于JavaScript实现添加到购物车效果附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/9693

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案