JS+HTML5實現(xiàn)的前端購物車功能插件實例【附demo源碼下載】
本文實例講述了JS+HTML5實現(xiàn)的前端購物車功能插件。分享給大家供大家參考,具體如下:
最近做一個商城,需要用到一個簡答的購物車功能,當(dāng)然,后端實現(xiàn)比較容易,,這里重點還是講一下前端的JS插件。
從源代碼里面沒看出來,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下載就好,我做了一些簡單的修復(fù),支持了中文
這個插件使用了HTML5的新特效:storage ,就是游覽器數(shù)據(jù)庫的功能,這跟之前把數(shù)據(jù)存在cookies里面原理是相識的,這樣的好處在于用戶刷新頁面,數(shù)據(jù)還在,,又不需要跟后端進行數(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>") } },
需要兼容老版的游覽器,需要在上面進行修改。下面是插件的配置文件
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é)算' }, };
實例化
$('body').ctshop({ currency: '$', paypal: { currency_code: 'RMB' }, empty_text:'您敢信,你的購物車居然是空的!', });
很簡單的吧。。
運行效果圖如下:
完整實例代碼點擊此處本站下載。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
使用ImageMagick進行圖片縮放、合成與裁剪(js+python)
由于需要在服務(wù)器端處理,使用就研究使用imagemagick來進行。同時準(zhǔn)備封裝了一個Node.js和Python的方法,主要還是講一下然后使用imagemagick來對圖片進行縮放、合成后進行裁剪吧2013-09-09webpack5?import動態(tài)導(dǎo)入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置方法
這篇文章主要介紹了webpack5?import動態(tài)導(dǎo)入實現(xiàn)按需加載并給文件統(tǒng)一命名的配置,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11javascript代碼在ie8里報錯 document.getElementById(...) 為空或不是對象的解決方
今天更升級了ie8,發(fā)現(xiàn)原來在ie7下可以運行的代碼,不能運行了,發(fā)現(xiàn)了一些細節(jié),附臨時修改辦法。2009-11-11數(shù)據(jù)分析軟件之FineReport教程:[5]參數(shù)界面JS(全)
表格軟件FineReport在設(shè)計報表時經(jīng)常會用到,這篇文章主要介紹數(shù)據(jù)分析軟件之FineReport教程:[5]參數(shù)界面JS,需要的朋友可以參考下2015-08-08