JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件實(shí)例【附demo源碼下載】
本文實(shí)例講述了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件。分享給大家供大家參考,具體如下:
最近做一個(gè)商城,需要用到一個(gè)簡(jiǎn)答的購(gòu)物車(chē)功能,當(dāng)然,后端實(shí)現(xiàn)比較容易,,這里重點(diǎn)還是講一下前端的JS插件。
從源代碼里面沒(méi)看出來(lái),它叫啥,好像叫:ctshop .js,不管啦,反正我提供下載就好,我做了一些簡(jiǎn)單的修復(fù),支持了中文
這個(gè)插件使用了HTML5的新特效:storage ,就是游覽器數(shù)據(jù)庫(kù)的功能,這跟之前把數(shù)據(jù)存在cookies里面原理是相識(shí)的,這樣的好處在于用戶(hù)刷新頁(yè)面,數(shù)據(jù)還在,,又不需要跟后端進(jìn)行數(shù)據(jù)交互。
create_storage_cart: function() {
for (var t = this, e = t.storage_get(), a = 0, n = e.items.length; n > a; a++) {
var i = e.items[a].id,
r = e.items[a].name,
s = e.items[a].price,
c = e.items[a].input;
t.cart.append('<li class="animated ' + t.settings.animation + '" data-id=' + i + "><span class=" + t.settings.cart + "-name>" + r + "</span><span class=" + t.settings.cart + "-price>" + s + '</span><input type="number" min="1" value="' + c + '" class=' + t.settings.cart + "-input><button class=" + t.settings.cart + "-remove>x</button></li>")
}
},
需要兼容老版的游覽器,需要在上面進(jìn)行修改。下面是插件的配置文件
s = {
currency: "$",
currency_after_number: "false",
permanent_cart_buttons: "false",
display_total_value: "true",
permanent_total_value: "false",
animation: "fadeIn",
empty_disable: "false",
empty_text: "Your cart is empty",
paypal: {
business: "office@createit.pl",
currency_code: "USD",
lc: "EN",
cpp_cart_border_color: "",
cpp_payflow_color: "",
no_note: "0",
no_shipping: "0",
"return": "",
cancel_return: ""
},
lang:{ //我新增的屬性,主要是用來(lái)支持多語(yǔ)言
clear:'清空',
checked:'結(jié)算'
},
};
實(shí)例化
$('body').ctshop({
currency: '$',
paypal: {
currency_code: 'RMB'
},
empty_text:'您敢信,你的購(gòu)物車(chē)居然是空的!',
});
很簡(jiǎn)單的吧。。
運(yùn)行效果圖如下:

完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js購(gòu)物車(chē)實(shí)現(xiàn)思路及代碼(個(gè)人感覺(jué)不錯(cuò))
- js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)有圖有代碼
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車(chē)程序
- JavaScript編寫(xiě)一個(gè)簡(jiǎn)易購(gòu)物車(chē)功能
- 原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
- js實(shí)現(xiàn)仿購(gòu)物車(chē)加減效果
- 使用Angular.js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能
- 基于JavaScript實(shí)現(xiàn)添加到購(gòu)物車(chē)效果附源碼下載
- JS高仿拋物線加入購(gòu)物車(chē)特效實(shí)現(xiàn)代碼
- JavaScript面向?qū)ο缶帉?xiě)購(gòu)物車(chē)功能
- js繪制購(gòu)物車(chē)拋物線動(dòng)畫(huà)
- JS實(shí)現(xiàn)的簡(jiǎn)單拖拽購(gòu)物車(chē)功能示例【附源碼下載】
相關(guān)文章
js快速與任意QQ號(hào)碼建立臨時(shí)對(duì)話
那時(shí)候在群里討論的,吸納很多人的方法與意見(jiàn),修改而成的2008-10-10
javascript+HTML5 canvas繪制時(shí)鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript+HTML5 canvas數(shù)值運(yùn)算、圖形繪制與時(shí)間顯示相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
上傳圖片前預(yù)覽圖片這種效果應(yīng)用比較廣泛,實(shí)現(xiàn)的方也大同小異,下面為大家介紹下,在javascript中是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-10-10
JS輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
基于Bootstrap里面的Button dropdown打造自定義select
這篇文章主要介紹了基于Bootstrap里面的Button dropdown打造自定義select的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05
JavaScript使用百度ECharts插件繪制餅圖操作示例
這篇文章主要介紹了JavaScript使用百度ECharts插件繪制餅圖操作,結(jié)合實(shí)例形式分析了JavaScript使用百度ECharts插件繪制餅圖的原理、步驟及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn)
這篇文章主要介紹了d3.js 地鐵軌道交通項(xiàng)目實(shí)戰(zhàn),本文通過(guò)實(shí)例代碼項(xiàng)目截圖給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11

