You are on page 1of 3

Digicrafts AJAX PayPal Cart jQuery plugin

http://localhost/samples/example_free.html

AJAX Paypal Cart


Demo Store

JQuery Plugin

MacBook
(shipping $20)

MacBook Air
(shipping $20)

MacBook Pro
(free shipping)

Mac OS X
(Purchase once|Download)

buy $999

buy $999

buy $1199

buy $99

iMac
(free shipping)

Mac Mini
(shipping $20)

Mac Pro
(free shipping)

buy $1199

buy $699

buy $2499

Setup a basic cart


<!-- CSS files --> <link rel="stylesheet" type="text/css" href="lib/dc.core.1.0.0.min.css" /> <link rel="stylesheet" type="text/css" href="lib/dc.cart.1.0.0.css" /> <!-- Script files --> <script src="lib/dc.core.1.0.0.min.js" type="text/javascript"></script> <script src="lib/dc.cart.1.0.0.min.js" type="text/javascript"></script> <script src="lib/dc.cart.lang.js" type="text/javascript"></script> <script type="text/javascript"> $( function (){ // Create a basic cart var cart = $('#cart').DCAJAXPaypalCart({ width:600, height:400, paypalOptions:{ business:'YOU_PAYPAL_EMAIL@email.com' } }); // Create a buy button from a link with cart.addBuyButton("#buy_button_1",{ id:'item_1', name:'Dummy Item', thumbnail:'product_thumbnail.jpg', price:10 shipping:5 }); }); </script> id "buy_button_1" // // // // // Specify the unique id for this item Item name appear on the cart Thumbnail path of the item (Optional) Cost of the item Shipping cost for the item (Optional)

This example code show the syntax for setup a basic cart. Include the above sctipr int between <head> tag. Also insert a '<div id="cart></div>" in the place you want the cart widget appear. Use your own purchase gateway

1 of 3

20/12/2012 16:37

Digicrafts AJAX PayPal Cart jQuery plugin

http://localhost/samples/example_free.html

// Create a basic cart var cart = $('#cart').DCAJAXPaypalCart({ width:600, height:400, paymentOptions:{ server:"http://YOU_PAYMENT_GATEWAY_URL.php" } });

This example code show the syntax for setup a basic cart. Include the above sctipr int between <head> tag. Also insert a '<div id="cart></div>" in the place you want the cart widget appear. Properties
// #cart is the elements id which you wan to place the cart widget var cart = $('#cart').DCAJAXPaypalCart({ width:600, // Width of the cart height:400, // Height of the cart currency:'USD', // The display currecy of the cart, support USD,YEN,HKD,GBP,AUD..etc (Optional) language:'en', // The language of the cart. Included en, jp, de. (Optional) autoOpenWhenAdd:true, // Enable auto open the cart window after a item added to cart (Optional) autoCleanCart:true, // Enable auto clean cart after checkout button click (Optional) openNewCheckOutWindow: false, // Indicate if the paypal checkout window is open in a new window (Optional) themeColor:'#0066cc', // Color in the theme (Optional) themeDarkColor:'#0040a1', // Dark color in the theme (Optional) header:'Header Text Here', // The content of header (Optional) footer:'Footer Text Here', // The content of footer (Optional) paypalOptions:{ business:'YOU_PAYPAL_EMAIL@email.com' // The paypal email addres which use for receive money } });

These are the properties supported by the AJAX Paypal Cart. Methods
openCart()

Open the cart window.


cart.openCart();

closeCart()

Close the cart window.


cart.closeCart();

add(item)

Add an item into cart.


cart.addCart({ id:'item_1', name:'Dummy Item', thumbnail:'product_thumbnail.jpg', price:'10' shipping:5, allowMultiple:true }); // // // // // // Specify the unique id for this item Item name appear on the cart Thumbnail path of the item (Optional) Cost of the item Shipping cost for the item (Optional) Set if allow multiple item in cart (Optional)

remove(id)

Remove an item with specify id.


cart.remove('item_1');

2 of 3

20/12/2012 16:37

Digicrafts AJAX PayPal Cart jQuery plugin

http://localhost/samples/example_free.html

clean()

Clean all items.


cart.clean();

Change the styles. The AJAXPaypalCart support changing the theme color by the properties 'themeColor' and 'themeDarkColor'. Also, the cart is fully customizable with styles sheet. You can edit the included css file 'dc.cart.1.0.0.css' to fit your style. Change the text appear in the cart. To change the text, you can edit the "dc.cart.lang.js". You can also include text in different language and specify the 'language' property to change the language of the cart. Userful Links. Link to Product page.
Copyrights digicrafts 2011. All rights reserved.

3 of 3

20/12/2012 16:37

You might also like