TShopping
標題:
jsorder基於jquery的購物車實現,實現訂單的本地cookie存儲
[打印本頁]
作者:
woff
時間:
2012-9-29 00:29
標題:
jsorder基於jquery的購物車實現,實現訂單的本地cookie存儲
代碼一共6k,基於jquery的購物車實現,實現訂單的本地cookie存儲,支持購物車自定義樣式,金額的計算。通過json與後台交互。實現可配置化的購物車系統,可應用於電子商務平台。
1.下載地址:
http://code.google.com/p/jsorder/downloads/list
2.demo地址:
http://wuzhi.me/jsorderdemo.php
文檔地址:
http://wuzhi.me/?p=33
3.配置說明: jsorder 支持多參數配置,自定義購物車樣式,設置是否記錄cookie,提交方式 等。
$.fn.jsorder.defaults = { //作為訂單數據存儲的瀏覽器端全局變量,通過jquery綁定在
body staticname : 'jsorder', //訂單class,確保在頁面class唯一不重複,否則將導致錯誤
jsorderclass : 'jsorder', //是否保存cookie
savecookie : true, //cookie的名字
cookiename : 'jsorder', //ID前綴,暫時無用
numpre : 'no_', //訂單項前綴,用來區分不同的訂單項,頁面內必須不重複
jsorderpre : 'jsorder_', //觸發訂單控件的價格屬性
pricefiled : 'price', //觸發訂單控件的訂單名屬性
namefiled : 'jsordername', //購物車左側顯示
leftdemo : '我的菜單', //提交按鈕文字
subbuttom : '', //默認加入訂單的控件選擇
addbuttom : 'a.jsorderadd', //沒有訂單時顯示
nomessage : '你今天的食譜是還空的', //提交時觸發
dosubmit : function(data) {
$("body").append(JSON.stringify(data));
$("body").data(opts.staticname, {});
}
};
複製代碼
4.頁面代碼
1)樣式表及js
<link href="../css/order.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/cookie.js" ></script>
<script type="text/javascript" src="../js/jsorder.js" ></script>
複製代碼
2)觸發控件配置
3)覆蓋默認配置項
$.fn.jsorder.defaults = {//修改觸發空間類型
addbuttom : 'td.jsorderadd',//修改提交方案
dosubmit : function(data) {
$("#result").html("json內容:"+JSON.stringify(data)).css('background','#e0e0e0');
}
};
複製代碼
$.fn.jsorder.defaults = {
//作為訂單數據存儲的瀏覽器端全局變量,通過jquery綁定在body
staticname : 'jsorder',
//訂單class,確保在頁面class唯一不重複,否則將導致錯誤
jsorderclass : 'jsorder',
//是否保存cookie
savecookie : true,
//cookie的名字
cookiename : 'jsorder',
//ID前綴,暫時無用
numpre : 'no_',
//訂單項前綴,用來區分不同的訂單項,頁面內必須不重複
jsorderpre : 'jsorder_',
//觸發訂單控件的價格屬性
pricefiled : 'price',
//觸發訂單控件的訂單名屬性
namefiled : 'jsordername',
//購物車左側顯示
leftdemo : '我的菜單',
//提交按鈕文字
subbuttom : '',
//默認加入訂單的控件選擇
addbuttom : 'a.jsorderadd',
//沒有訂單時顯示
nomessage : '你今天的食譜是還空的',
//提交時觸發
dosubmit : function(data) {
$("body").append(JSON.stringify(data));
$("body").data(opts.staticname, {});
}
};
複製代碼
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2