plum.shop is a JavaScript shopping cart built on the jQuery library. It's super easy to set up, has support for just about any necessity in an e-commerce store, and at less than 25 KB, you get quite a bit of bang for a very small footprint.

plum.shop features

  • AJAX-ready. Pages using plum.shop can be loaded with AJAX without calling the plugin again
  • Build an entire store with simple, straightforward HTML markup
  • Over 30 customizable options and callback functions
  • Multiple tax brackets for countries, regions and local taxes
  • Multiple shipping options
  • 5 included checkout methods including custom checkout, PayPal, Google, Amazon and Skrill
  • 3 cart storage methods including HTML5 localStorage, browser cookies, and server-side sessions
  • Set up multiple carts per page

Localization

  • Custom, extremely easy-to-use currency formatting
  • Geolocation for taxes

Fine-tuned shipping

  • Flat, fixed, variable or range shipping types.
  • Set costs in varying shipping brackets using the range type

Powerful tax options

  • Single tax rate
  • Multiple taxes on a single order
  • Regional taxes based on your customer's location
  • Use VAT or sales tax

Unlimited product options

  • Offer unlimited options for each of your products
  • Automatically generate SKU numbers for various option combinations
  • Adjust prices per option

Browser requirements

  • Mozilla Firefox 2 or newer
  • Google Chrome
  • Apple Safari 3 or newer
  • Opera 9 or newer
  • Microsoft Internet Explorer 7 or newer

Software requirements

  • jQuery 1.4.1 or newer

Pretty sweet. How do I use it?

Set up is a quick 4 steps. Plum will work on any page where you load the necessary scripts, so you can have a gallery of products, single product pages, and your checkout page all separated.

  1. Include jQuery and plum.shop.

    <script src="/js/jquery.js"></script>
    <script src="/js/jquery.plum.shop.js"></script>
  2. Set up your products. Any element with a "product" class (this can be changed) is a cart container. You can have one, ten, a thousand containers on a page.

    <div class="product" id="sku-01">
    	<span class="title">My awesome product</div>
    	<span class="price">$10.00</div>
    	<input class="purchase"
    		type="button"
    		value="Add to cart">
    </div>
  3. Create a container for the cart display.

    <div id="cart"></div>
  4. Include your cart's configuration. This is where you can customize how each item looks in the cart, create multiple carts, and add any options you may need.

    <script>
    $('#cart').plum('shop', {
    	cartitem: '{title} &mdash; {pricesingle} '
    		+ '&times; {quantity} &mdash; '
    		+ '{pricetotal}',
    	paypaluser: 'hello',
    	paypaldomain: 'robocreatif.com'
    });
    </script>

Notes

Please remember that plum.shop is pure JavaScript. While every precaution has been taken to ensure the validity of items in your shopping cart, any JavaScript can be easily manipulated. Therefore, we recommend that you always verify the contents of an order before finalizing the transaction. You can do this by utilizing one of the third-party payment gateway's notification services, like PayPal's IPN.

plum.shop is a shopping cart and only a shopping cart. It serves to store products that your customers have added to the cart, display and calculate totals and discounts, and help out with the checkout process. Categories, product detail pages, and anything else you might need in your store must be added in yourself.

Finally, this page is a demonstration of some of plum.shop's capabilities. It is not intended to be a drop-in solution for an e-commerce store. Some assembly required. (Don't worry, there's a thorough documentation file.)

  • Tank $13.00

  • Long Sleeve $19.00

  • Pants $22.00


    Small
    Medium
    Large

  • Skirt $15.00


  • Shoe

    $42.00

    The shoe's description. It's not very informative, but it sure is a description.



Empty cart

In this demo, you can use the discount codes 10PERCENT and 10DOLLARS. Tax is set to 8% of the subtotal for US residents.



0
$0.00
$0.00
$0.00
$0.00
$0.00