MacBook
(shipping $20)
AJAX Paypal Cart JQuery Plugin
Demo Store
Cart
MacBook Air
(shipping $20)
MacBook Pro
(free shipping)
Mac OS X
(Purchase once|Download)
iMac
(free shipping)
Mac Mini
(shipping $20)
Mac Pro
(free shipping)
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:'[email protected]'
}
});
// Create a buy button from a link with id "buy_button_1"
cart.addBuyButton("#buy_button_1",{
id:'item_1', // Specify the unique id for this item
name:'Dummy Item', // Item name appear on the cart
thumbnail:'product_thumbnail.jpg', // Thumbnail path of the item (Optional)
price:10 // Cost of the item
shipping:5 // Shipping cost for the item (Optional)
});
});
</script>
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:'[email protected]' // 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', // Specify the unique id for this item
name:'Dummy Item', // Item name appear on the cart
thumbnail:'product_thumbnail.jpg', // Thumbnail path of the item (Optional)
price:'10' // Cost of the item
shipping:5, // Shipping cost for the item (Optional)
allowMultiple:true // Set if allow multiple item in cart (Optional)
});
remove(id)
Remove an item with specify id.
cart.remove('item_1');
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.