Ajax PayPal Cart is a customizable and easy-to-use jQuery plugin for
creating a full function ajax shopping cart on the website. The shopping
cart can included a cart widget which allow display of cart information
easily. Support PayPal Website Payment Standard.
| <!DOCTYPE html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Cart</title> | |||||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |||||
| <meta name="viewport" content="width=device-width,user-scalable=no" /> | |||||
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |||||
| <meta name="apple-touch-fullscreen" content="yes" /> | |||||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> | |||||
| <!-- CSS for this product--> | |||||
| <link rel="stylesheet" type="text/css" href="lib/dc.core.1.1.0.min.css" /> | |||||
| <link rel="stylesheet" type="text/css" href="lib/dc.cart.css" /> | |||||
| <!-- CSS for this example only--> | |||||
| <link rel="stylesheet" type="text/css" href="common/sample.common.css" /> | |||||
| <link rel="stylesheet" type="text/css" href="common/sample.product.css" /> | |||||
| <link rel="stylesheet" type="text/css" href="common/prettify.css" /> | |||||
| <!-- Javascript for this product--> | |||||
| <script src="lib/dc.core.1.1.0.min.js" type="text/javascript"></script> | |||||
| <script src="lib/dc.cart.free.min.js" type="text/javascript"></script> | |||||
| <script src="lib/dc.cart.lang.js" type="text/javascript"></script> | |||||
| <!-- CSS for this example only--> | |||||
| <script src="common/prettify.js" type="text/javascript"></script> | |||||
| <script type="text/javascript"> | |||||
| $(function(){ | |||||
| // Create a new AJAXPaypalCart Object | |||||
| var cart = $('#cart').DCAJAXPaypalCart({ | |||||
| width:600, | |||||
| autoOpenWhenAdd:false, | |||||
| openNewCheckOutWindow:true, | |||||
| //themeColor:'#333', | |||||
| //themeDarkColor:'#FFF', | |||||
| header:'AJAX Cart Demo', | |||||
| footer:'We accpet paypal, visa and master card. (This is a customizable footer)', | |||||
| paypalOptions:{ | |||||
| business:'YOU_PAYPAL_EMAIL@email.com', | |||||
| page_style:'digicrafts' | |||||
| } | |||||
| }); | |||||
| // Add the button | |||||
| cart.addBuyButton("#macbook",{ | |||||
| name:'MacBook', // Item name appear on the cart | |||||
| thumbnail:'media/macbook.jpg', // Thumbnail path of the item (Optional) | |||||
| price:'999', // Cost of the item | |||||
| shipping:20 // Shipping cost for the item (Optional) | |||||
| }); | |||||
| cart.addBuyButton("#macbookair",{ | |||||
| name:'MacBook Air', | |||||
| thumbnail:'media/macbook.jpg', | |||||
| price:'999', | |||||
| shipping:20 | |||||
| }); | |||||
| cart.addBuyButton("#macbookpro",{ | |||||
| name:'MacBook Pro', | |||||
| thumbnail:'media/macbookpro.jpg', | |||||
| price:'1199', | |||||
| shipping:0 | |||||
| }); | |||||
| cart.addBuyButton("#imac",{ | |||||
| name:'iMac', | |||||
| thumbnail:'media/macbook.jpg', | |||||
| price:'1199', | |||||
| shipping:0 | |||||
| }); | |||||
| cart.addBuyButton("#macmini",{ | |||||
| name:'Mac Mini', | |||||
| thumbnail:'media/macbookpro.jpg', | |||||
| price:'699', | |||||
| shipping:20 | |||||
| }); | |||||
| cart.addBuyButton("#macpro",{ | |||||
| name:'Mac pro', | |||||
| thumbnail:'media/macpro.jpg', | |||||
| price:'2499' | |||||
| }); | |||||
| cart.addBuyButton("#macosx",{ | |||||
| name:'Mac OS X', | |||||
| thumbnail:'media/macosx.jpg', | |||||
| price:'99', | |||||
| allowMultiple:false | |||||
| }); | |||||
| // For code highlight | |||||
| prettyPrint(); | |||||
| }); | |||||
| </script> | |||||
| </head> | |||||
| <body> | |||||
| <div id="pageWrapper" style="margin-top:70px"> | |||||
| <!--End: Common Header --> | |||||
| <div class="product_list"> | |||||
| <div class="product_list_header">Demo Store <div class="sub"></div> | |||||
| <div id="cart">Cart</div> | |||||
| </div> | |||||
| <div id="product_list" class="product_list_content"> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"> | |||||
| <img src="media/macbook.jpg"/> | |||||
| </div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"> | |||||
| <img src="media/macbookair.jpg"/> | |||||
| </div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"><img src="media/macbookpro.jpg"/></div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"><img src="media/macosx.jpg"/></div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"><img src="media/imac.jpg"/></div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"><img src="media/macmini.jpg"/></div> | |||||
| <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> | |||||
| </div> | |||||
| <div class="product"> | |||||
| <div class="thumbnail"><img src="media/macpro.jpg"/></div> | |||||
| <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> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| </body> | |||||
| </html> |
No comments:
Post a Comment