TShopping

 找回密碼
 註冊
搜索
查看: 1750|回復: 0

[教學] jsorder基於jquery的購物車實現,實現訂單的本地cookie存儲

[複製鏈接]
發表於 2012-9-29 00:29:07 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
代碼一共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,提交方式 等。

  1. $.fn.jsorder.defaults = { //作為訂單數據存儲的瀏覽器端全局變量,通過jquery綁定在  
  2.   body  staticname : 'jsorder', //訂單class,確保在頁面class唯一不重複,否則將導致錯誤  
  3.   jsorderclass : 'jsorder', //是否保存cookie
  4.   savecookie : true, //cookie的名字
  5.   cookiename : 'jsorder', //ID前綴,暫時無用
  6.   numpre : 'no_', //訂單項前綴,用來區分不同的訂單項,頁面內必須不重複
  7.   jsorderpre : 'jsorder_', //觸發訂單控件的價格屬性
  8.   pricefiled : 'price', //觸發訂單控件的訂單名屬性
  9.   namefiled : 'jsordername', //購物車左側顯示
  10.   leftdemo : '我的菜單', //提交按鈕文字
  11.   subbuttom : '', //默認加入訂單的控件選擇
  12.   addbuttom : 'a.jsorderadd', //沒有訂單時顯示
  13.   nomessage : '你今天的食譜是還空的', //提交時觸發
  14.   dosubmit : function(data) {
  15.     $("body").append(JSON.stringify(data));
  16.     $("body").data(opts.staticname, {});
  17.   }
  18. };
複製代碼


4.頁面代碼
1)樣式表及js

  1. <link href="../css/order.css" rel="stylesheet"/>
  2. <script type="text/javascript" src="../js/cookie.js" ></script>
  3. <script type="text/javascript" src="../js/jsorder.js" ></script>
複製代碼

2)觸發控件配置

3)覆蓋默認配置項

  1. $.fn.jsorder.defaults = {//修改觸發空間類型         
  2.   addbuttom : 'td.jsorderadd',//修改提交方案
  3.   dosubmit : function(data) {   
  4.     $("#result").html("json內容:"+JSON.stringify(data)).css('background','#e0e0e0');  
  5.   }
  6. };
複製代碼


  1. $.fn.jsorder.defaults = {
  2. //作為訂單數據存儲的瀏覽器端全局變量,通過jquery綁定在body
  3. staticname : 'jsorder',
  4. //訂單class,確保在頁面class唯一不重複,否則將導致錯誤
  5. jsorderclass : 'jsorder',
  6. //是否保存cookie
  7. savecookie : true,
  8. //cookie的名字
  9. cookiename : 'jsorder',
  10. //ID前綴,暫時無用
  11. numpre : 'no_',
  12. //訂單項前綴,用來區分不同的訂單項,頁面內必須不重複
  13. jsorderpre : 'jsorder_',
  14. //觸發訂單控件的價格屬性
  15. pricefiled : 'price',
  16.          //觸發訂單控件的訂單名屬性
  17.          namefiled : 'jsordername',
  18.          //購物車左側顯示
  19.         leftdemo : '我的菜單',
  20.          //提交按鈕文字
  21.         subbuttom : '',
  22.          //默認加入訂單的控件選擇
  23.         addbuttom : 'a.jsorderadd',
  24.          //沒有訂單時顯示
  25.         nomessage : '你今天的食譜是還空的',
  26.          //提交時觸發
  27.         dosubmit : function(data) {
  28.                 $("body").append(JSON.stringify(data));
  29.                 $("body").data(opts.staticname, {});
  30.         }
  31. };
複製代碼



 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-3 10:04 , Processed in 0.060935 second(s), 18 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表