添加到购物车效果基于JavaScript与源代码下载

有许多方法可以将商品添加到购物车中。通常的方式是点击“添加到购物车”按钮跳转到购物车，在这里可以点击“结算”按钮进行结算。今天，我将向您介绍一个更友好的解决方案。

查看演示下载源代码

默认情况下，购物车是隐藏和不可见的。当用户点击“添加到购物车”按钮时，商品信息将被添加到购物车中，购物车将以按钮的形式出现在页面右下角。点击按钮将展开购物车，显示购物车中的商品信息，删除或结算购物车中的商品。用户也可以暂时关闭购物车继续购物。

HTML结构

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

A href=' # 0 ' class=' btnbtn-success add-button ' data-price=' 3669.00 ' data-proid=' 1 ' data-proname=' Huawei p9 ' data-proig=' img/Huawei _ p9 . jpg '添加到购物车/A第二部分是购物车，其中包括触发购物车、购物车统计部分。CD-cart-触发器和购物车主要内容部分。cd车。

div=' CD-cart-容器空' a href=' 0 ' class=' CD-cart-trigger '购物车ul class='count '！-购物车项目数-li0/li0/Li/ul/a div class=' CD-cart ' div class=' wrapper ' header H2购物车/h2 span class='undo '已删除a href=' 0 ' restore/a/span/header div class=' body ' ul！-此部分为购物车商品部分，由JavaScript-/ul/div footer a href=' # 0 ' class=' check out ' em settle-yut span 0/span/em/a/footer/div/div/div动态插入。div.body元素中的UL列表默认为空，用于显示购物车的商品列表信息。

Div class=' body ' ul Li class=' product ' Div class=' product-image ' A href=' # 0 ' img src=' http : img/pro . jpg ' alt=' placeholder '/A/Div class=' product-details ' h3a href=' # 0 '商品名称/A/H3 Span class=' price '3999.99/Span Div class=' actions ' A href=' # 0 ' class=' delete-item ' delete/A Div class='你可以从源代码下载css/style.css来查看。

java描述语言

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

当用户点击按钮时。add-button，则触发函数addProduct()将商品信息插入。身体ul。

函数addProduct(proname，proid，price，provig){ var quantity=$(' # CD-ProducT-' proid)。text()；var select=' '，productAdded=if(quantity==' '){ var select=' span class=' select ' Xi id=' CD-product-' proid ' 1/I/span '；var ProductAdded=$(' Li class=' product ' Div class=' product-image ' a href=' # 0 ' img src=' http : ' proi mg ' ' alt=' placeholder '/a/Div class=' product-details ' h3a href=' # 0 ' ' PronAme '/a/H3 span class=' price 'price '/span Div class=' actions ' a href=' # 0 ' class=' delete-item ' delete/Adiv class=' quantity '标签为=' CD-cart list . prepend(ProductAdded)；}else{ quantity=parseInt(数量)；$(“# CD-product-”proid)。html(数量1)；}}以上是基于边肖推出的JavaScript添加到购物车的效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！