基于JavaScript實(shí)現(xiàn)添加到購物車效果附源碼下載
我們有很多種方法實(shí)現(xiàn)將商品添加到購物車,通常的做法是點(diǎn)擊“添加到購物車”按鈕,會(huì)跳轉(zhuǎn)到購物車,在購物車?yán)锟梢渣c(diǎn)擊“結(jié)算”按鈕進(jìn)行結(jié)算。而今天我給大家介紹一個(gè)更友好的解決方案。
默認(rèn)情況下,購物車是隱藏不可見的,當(dāng)用戶點(diǎn)擊添加到購物車按鈕后,商品信息會(huì)添加到購物車,購物車會(huì)以按鈕的形式出現(xiàn)在頁面右下角,點(diǎn)擊按鈕則會(huì)展開購物車,顯示購物車中的商品信息,同時(shí)也可以對(duì)購物車中的商品進(jìn)行刪除或者結(jié)算等操作。用戶也可以暫時(shí)關(guān)閉購物車?yán)^續(xù)購物。
HTML結(jié)構(gòu)
HTML結(jié)構(gòu)主要包括兩部分,第一部分是商品列表中的“添加到購物車”按鈕,如下代碼,我們使用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">添加到購物車</a>
第二部分是購物車,購物車部分包括觸發(fā)購物車以及購物車統(tǒng)計(jì)部分 .cd-cart-trigger和購物車主體內(nèi)容部分.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">恢復(fù)</a></span> </header> <div class="body"> <ul> <!-- 此部分是購物車商品部分,由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)是空的,它是用來顯示購物車的商品列表信息的,它的大致結(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庫文件。
當(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)添加到購物車效果附源碼下載,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼
這篇文章主要介紹了微信小程序修改swiper默認(rèn)指示器樣式的實(shí)例代碼,代碼塊是從微信開發(fā)文檔中心復(fù)制的代碼塊,在此基礎(chǔ)上修改官方swiper樣式,需要的朋友可以參考下2018-07-07Webpack框架核心概念(知識(shí)點(diǎn)整理)
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識(shí)點(diǎn)整理),需要的朋友可以參考下2017-12-12js 針對(duì)html DOM元素操作等經(jīng)驗(yàn)累積
這篇文章主要介紹了js 針對(duì)html DOM元素操作等經(jīng)驗(yàn)累積,需要的朋友可以參考下2014-03-03Javascript 數(shù)組添加 shuffle 方法的實(shí)現(xiàn)代碼
PHP 里面有個(gè)非常方便的打亂數(shù)組的函數(shù) shuffle() ,這個(gè)功能在許多情況下都會(huì)用到,但 javascript 的數(shù)組卻沒有這個(gè)方法,沒有不要緊,可以擴(kuò)展一個(gè),自己動(dòng)手,豐衣足食嘛。2009-09-09javascript replace()正則替換實(shí)現(xiàn)代碼
javascript-replace()基礎(chǔ),一次完成將"<,>"替換"<>"實(shí)例2010-02-02JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03