基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車(chē)效果附源碼下載

更新時(shí)間：2016年08月22日 11:28:31 作者：月光光

這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車(chē)效果附源碼下載的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

我們有很多種方法實(shí)現(xiàn)將商品添加到購(gòu)物車(chē)，通常的做法是點(diǎn)擊“添加到購(gòu)物車(chē)”按鈕，會(huì)跳轉(zhuǎn)到購(gòu)物車(chē)，在購(gòu)物車(chē)?yán)锟梢渣c(diǎn)擊“結(jié)算”按鈕進(jìn)行結(jié)算。而今天我給大家介紹一個(gè)更友好的解決方案。

查看演示下載源碼

默認(rèn)情況下，購(gòu)物車(chē)是隱藏不可見(jiàn)的，當(dāng)用戶點(diǎn)擊添加到購(gòu)物車(chē)按鈕后，商品信息會(huì)添加到購(gòu)物車(chē)，購(gòu)物車(chē)會(huì)以按鈕的形式出現(xiàn)在頁(yè)面右下角，點(diǎn)擊按鈕則會(huì)展開(kāi)購(gòu)物車(chē)，顯示購(gòu)物車(chē)中的商品信息，同時(shí)也可以對(duì)購(gòu)物車(chē)中的商品進(jìn)行刪除或者結(jié)算等操作。用戶也可以暫時(shí)關(guān)閉購(gòu)物車(chē)?yán)^續(xù)購(gòu)物。

HTML結(jié)構(gòu)

HTML結(jié)構(gòu)主要包括兩部分，第一部分是商品列表中的“添加到購(gòu)物車(chē)”按鈕，如下代碼，我們使用data-*屬性將商品的id，圖片、名稱、價(jià)格等信息一并帶上。

<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">添加到購(gòu)物車(chē)</a>

第二部分是購(gòu)物車(chē)，購(gòu)物車(chē)部分包括觸發(fā)購(gòu)物車(chē)以及購(gòu)物車(chē)統(tǒng)計(jì)部分 .cd-cart-trigger和購(gòu)物車(chē)主體內(nèi)容部分.cd-cart。

<div class="cd-cart-container empty"> 
<a href="#0" class="cd-cart-trigger"> 
購(gòu)物車(chē) 
<ul class="count"> <!-- cart items count --> 
<li>0</li> 
<li>0</li> 
</ul> 
</a> 
<div class="cd-cart"> 
<div class="wrapper"> 
<header> 
<h2>購(gòu)物車(chē)</h2> 
<span class="undo">已刪除 <a href="#0">恢復(fù)</a></span> 
</header> 
<div class="body"> 
<ul> 
<!-- 此部分是購(gòu)物車(chē)商品部分，由javascript動(dòng)態(tài)插入 --> 
</ul> 
</div> 
<footer> 
<a href="#0" class="checkout"><em>結(jié)算 - ￥<span>0</span></em></a> 
</footer> 
</div> 
</div> 
</div>

在div.body元素里的ul列表默認(rèn)是空的，它是用來(lái)顯示購(gòu)物車(chē)的商品列表信息的，它的大致結(jié)構(gòu)如下，它是由Javascript動(dòng)態(tài)插入的。

<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 +'">件數(shù)</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

本實(shí)例代碼是基于jQuery，因此需要提前加載jQUery庫(kù)文件。

當(dāng)用戶點(diǎn)擊按鈕.add-button后，觸發(fā)函數(shù)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 +'">件數(shù)</label>'+select+'</div></div></div></li>'); 
cartList.prepend(productAdded); 
}else{ 
quantity = parseInt(quantity); 
$("#cd-product-"+proid).html(quantity+1); 
} 
}

以上所述是小編給大家介紹的基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車(chē)效果附源碼下載，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: