首页>>表单>>ajax paypal购物车(2014-01-04)

ajax paypal购物车

ajax paypal购物车
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="product_list">  
  2.        <div class="product_list_header">Demo Store <div class="sub"></div><div id="cart">Cart</div></div>  
  3.        <div id="product_list" class="product_list_content">  
  4.            <div class="product">  
  5.                <div class="thumbnail"><img src="media/macbook.jpg"/></div>  
  6.                <div class="caption"><div class="text"><div class="main">MacBook</div><div class="sub">(shipping $20)</div></div><div class="button" id="macbook">buy $999</div></div>  
  7.            </div>  
  8.            <div class="product">  
  9.                <div class="thumbnail"><img src="media/macbookair.jpg"/></div>  
  10.                <div class="caption"><div class="text"><div class="main">MacBook Air</div><div class="sub">(shipping $20)</div></div><div class="button" id="macbookair">buy $999</div></div>  
  11.            </div>  
  12.            <div class="product">  
  13.                <div class="thumbnail"><img src="media/macbookpro.jpg"/></div>  
  14.                <div class="caption"><div class="text"><div class="main">MacBook Pro</div><div class="sub">(free shipping)</div></div><div class="button" id="macbookpro">buy $1199</div></div>  
  15.            </div>  
  16.            <div class="product">  
  17.                <div class="thumbnail"><img src="media/macosx.jpg"/></div>  
  18.                <div class="caption"><div class="text"><div class="main">Mac OS X</div><div class="sub">(Purchase once|Download)</div></div><div class="button" id="macosx">buy $99</div></div>  
  19.            </div>  
  20.            <div class="product">  
  21.                <div class="thumbnail"><img src="media/imac.jpg"/></div>  
  22.                <div class="caption"><div class="text"><div class="main">iMac</div><div class="sub">(free shipping)</div></div><div class="button" id="imac">buy $1199</div></div>  
  23.            </div>  
  24.            <div class="product">  
  25.                <div class="thumbnail"><img src="media/macmini.jpg"/></div>  
  26.                <div class="caption"><div class="text"><div class="main">Mac Mini</div><div class="sub">(shipping $20)</div></div><div class="button" id="macmini">buy $699</div></div>  
  27.            </div>  
  28.            <div class="product">  
  29.                <div class="thumbnail"><img src="media/macpro.jpg"/></div>  
  30.                <div class="caption"><div class="text"><div class="main">Mac Pro</div><div class="sub">(free shipping)</div></div><div class="button" id="macpro">buy $2499</div></div>  
  31.            </div>  
  32.        </div>      

 

JavaScript Code
  1. <script type="text/javascript">  
  2.         $(function(){              
  3.   
  4.             // Create a new AJAXPaypalCart Object  
  5.             var cart = $('#cart').DCAJAXPaypalCart({  
  6.                 width:600,  
  7.                 autoOpenWhenAdd:true,  
  8.                 openNewCheckOutWindow:true,  
  9.                 //themeColor:'#333',  
  10.                 //themeDarkColor:'#FFF',  
  11.                 header:'AJAX Cart Demo',  
  12.                 footer:'We accpet paypal, visa and master card. (This is a customizable footer)',  
  13.                 paypalOptions:{  
  14.                     business:'@',  
  15.                     page_style:'digicrafts'  
  16.                 }  
  17.             });              
  18.               
  19.             // Add the button  
  20.             cart.addBuyButton("#macbook",{  
  21.                 name:'MacBook',                     // Item name appear on the cart  
  22.                 thumbnail:'media/macbook.jpg',      // Thumbnail path of the item (Optional)  
  23.                 price:'999',                        // Cost of the item  
  24.                 shipping:20                         // Shipping cost for the item (Optional)  
  25.             });  
  26.             cart.addBuyButton("#macbookair",{  
  27.                 name:'MacBook Air',               
  28.                 thumbnail:'media/macbook.jpg',  
  29.                 price:'999',  
  30.                 shipping:20   
  31.             });  
  32.             cart.addBuyButton("#macbookpro",{  
  33.                 name:'MacBook Pro',               
  34.                 thumbnail:'media/macbookpro.jpg',  
  35.                 price:'1199',  
  36.                 shipping:0  
  37.             });  
  38.             cart.addBuyButton("#imac",{  
  39.                 name:'iMac',               
  40.                 thumbnail:'media/macbook.jpg',  
  41.                 price:'1199',  
  42.                 shipping:0   
  43.             });  
  44.             cart.addBuyButton("#macmini",{  
  45.                 name:'Mac Mini',               
  46.                 thumbnail:'media/macbookpro.jpg',  
  47.                 price:'699',  
  48.                 shipping:20  
  49.             });  
  50.             cart.addBuyButton("#macpro",{  
  51.                 name:'Mac pro',               
  52.                 thumbnail:'media/macpro.jpg',  
  53.                 price:'2499'  
  54.             });  
  55.             cart.addBuyButton("#macosx",{                  
  56.                 name:'Mac OS X',  
  57.                 thumbnail:'media/macosx.jpg',  
  58.                 price:'99',  
  59.                 allowMultiple:false  
  60.             });             
  61.               
  62.             // For code highlight  
  63.             prettyPrint();  
  64.               
  65.         });  
  66.     </script>  

 


原文地址:http://www.freejs.net/article_biaodan_213.html