本文介绍一种友好的动态购物车实现方案。用户点击“添加到购物车”按钮后，商品信息通过JavaScript动态插入列表，购物车以浮动按钮形式出现在页面右下角。点击按钮可展开查看商品详情、调整数量或删除商品，并支持结算功能。文章提供了HTML结构、CSS样式说明及基于jQuery的核心JavaScript代码，帮助开发者快速实现类似电商网站的交互体验。
动态购物车效果概述
实现商品添加到购物车的功能有多种方式，常规做法是点击“添加到购物车”按钮后跳转至购物车页面，用户可在其中点击“结算”完成支付。今天介绍一种更友好的交互方案。
查看演示 下载源码
默认状态下购物车处于隐藏状态。当用户点击“添加到购物车”按钮时，商品信息被添加至购物车，并以按钮形式显示在页面右下角。点击该按钮可展开购物车，展示其中商品详情，同时支持删除商品或执行结算操作。用户也可暂时关闭购物车继续浏览其他商品。
HTML结构搭建
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逻辑实现
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实现动态购物车效果的完整流程及源码下载，希望能对大家有所帮助。如有疑问请留言，小编会及时回复。感谢大家对本站的支持！