JS+HTML5實(shí)現(xiàn)的前端購物車功能插件實(shí)例【附demo源碼下載】
本文實(shí)例講述了JS+HTML5實(shí)現(xiàn)的前端購物車功能插件。分享給大家供大家參考，具體如下：
最近做一個(gè)商城，需要用到一個(gè)簡答的購物車功能，當(dāng)然，后端實(shí)現(xiàn)比較容易，，這里重點(diǎn)還是講一下前端的JS插件。
從源代碼里面沒看出來，它叫啥，好像叫：ctshop .js，不管啦，反正我提供下載就好，我做了一些簡單的修復(fù)，支持了中文
這個(gè)插件使用了HTML5的新特效：storage ，就是游覽器數(shù)據(jù)庫的功能，這跟之前把數(shù)據(jù)存在cookies里面原理是相識(shí)的，這樣的好處在于用戶刷新頁面，數(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:{ //我新增的屬性，主要是用來支持多語言
clear:'清空',
checked:'結(jié)算'
},
};
實(shí)例化
$('body').ctshop({
currency: '$',
paypal: {
currency_code: 'RMB'
},
empty_text:'您敢信，你的購物車居然是空的！',
});
很簡單的吧。。
運(yùn)行效果圖如下：
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《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購物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺不錯(cuò))
- js實(shí)現(xiàn)簡單的購物車有圖有代碼
- Javascript操縱Cookie實(shí)現(xiàn)購物車程序
- JavaScript編寫一個(gè)簡易購物車功能
- 原生js模擬淘寶購物車項(xiàng)目實(shí)戰(zhàn)
- js實(shí)現(xiàn)仿購物車加減效果
- 使用Angular.js實(shí)現(xiàn)簡單的購物車功能
- 基于JavaScript實(shí)現(xiàn)添加到購物車效果附源碼下載
- JS高仿拋物線加入購物車特效實(shí)現(xiàn)代碼
- JavaScript面向?qū)ο缶帉戀徫镘嚬δ?/a>
- js繪制購物車拋物線動(dòng)畫
- JS實(shí)現(xiàn)的簡單拖拽購物車功能示例【附源碼下載】
相關(guān)文章
js快速與任意QQ號(hào)碼建立臨時(shí)對(duì)話
那時(shí)候在群里討論的，吸納很多人的方法與意見，修改而成的2008-10-10
作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域2013-08-08
今天小編就為大家分享一篇關(guān)于js序列化和反序列化的使用講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
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
下面小編就為大家?guī)硪黄狫S輸出空格的簡單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)小米輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-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),本文通過實(shí)例代碼項(xiàng)目截圖給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11