jQuery Smart Cart

jQuery Shopping Cart plugin with PayPal payment support


jQuery Smart Cart is a interactive and user friendly jQuery Shopping Cart plugin with PayPal payment support. Has built-in support for form submit, Ajax submit and PayPal submit of the cart items. Features include Bootstrap support, theme support, customizable toolbars, customization options, public methods, event support.

Build Status npm version Bower version Latest Stable Version GitHub license Donate on Paypal

Demo

Installation

NPM
npm install jquery-smartcart
Yarn
yarn add jquery-smartcart
Bower
bower install jquery-smartcart
Composer
composer require techlab/jquery-smartcart

Downloads

Download jQuery Smart Cart

Features

  • In-built PayPal, Ajax and form submit methods
  • Bootstrap support
  • Customizable toolbar and option to add extra buttons
  • Theme support
  • Customizable css styles
  • Public methods for external function call
  • Enhanced event support
  • Latest jQuery version support (jQuery 1.9+, jQuery 2+, jQuery 3+)
  • Clean and compact design
  • Automatically calculates subtotal
  • Quantity is editable from the cart list
  • Product Image display
  • Customizable cart templates
  • Customizable currency formatting
  • Pre-populate products on cart on load

Documentation

Requirements
  1. Bootstrap 3+
  2. jQuery (supports jQuery 1.9+, jQuery 2+, jQuery 3+)
Include jQuery SmartCart CSS
<link href="../dist/css/smart_cart.min.css" rel="stylesheet" type="text/css">
Include jQuery (ignore this if you have already included on the page)
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Include jQuery SmartCart JavaScript
<script type="text/javascript" src="../dist/js/jquery.smartCart.min.js"></script>
Initialize the jQuery SmartCart
$(document).ready(function() {
  $('#smartcart').smartCart();
});
The HTML Markup

The HTML has two parts, product list and cart list. The product list can be any design you prefer, Smart Cart will not managed it, but there is some setting need to do so that Smart Cart can identify the "Add To Cart" buttons and the values of the product. While the cart list is fully managed by Smart Cart ofcourse it is customizable too.

First we can look at the basic of the product list
Things to note:

  • Add to cart button is identified by searching for the elments with class name "sc-add-to-cart", and a click event is attached with it.
  • Then the product container of a product is identified by the class name "sc-product-item"
  • The product container must have the basic values for the product like product_name, product_price etc
  • The product values like product_price is identified by searching for an element with attribute name or data-name
  • All the element values with attribute name or data-name will be added to product object
<div class="row">
<!-- BEGIN PRODUCTS --> <div class="col-md-4 col-sm-6">
<!-- PRODUCT CONTAINER 1, identified by the class "sc-product-item" --> <div class="sc-product-item">
<!-- PRODUCT IMAGE, identified by data-name="product_image" --> <img data-name="product_image" src="http://placehold.it/250x150/2aabd2/ffffff?text=Product+1" alt="...">
<!-- PRODUCT NAME, identified by data-name="product_name" or can be an element with name="product_name"--> <h4 data-name="product_name">Product 1</h4>
<!-- PRODUCT DESCRIPTION, identified by data-name="product_desc" or can be an element with name="product_desc"--> <p data-name="product_desc">Product details</p>
<!-- PRODUCT PRICE, identified by name="product_price" or can be an element with data-name="product_price"--> <input name="product_price" value="2990.50" type="hidden" />
<!-- PRODUCT ID, identified by name="product_id" or can be an element with data-name="product_id"--> <input name="product_id" value="12" type="hidden" />
<!-- ADD TO CART BUTTON, identified by class="sc-add-to-cart" --> <button class="sc-add-to-cart btn btn-success">Add to cart</button>
</div> <!-- END PRODUCT CONTAINER 1 --> </div>
<div class="col-md-4 col-sm-6">
<!-- PRODUCT CONTAINER 2 --> <div class="sc-product-item"> <img data-name="product_image" src="http://placehold.it/250x150/2aabd2/ffffff?text=Product+2" alt="..."> <h4 data-name="product_name">Product 2</h4> <p data-name="product_desc">Product details</p> <input name="product_price" value="320.75" type="hidden" /> <input name="product_id" value="14" type="hidden" /> <button class="sc-add-to-cart btn btn-success">Add to cart</button> </div> </div> <!-- END PRODUCTS --> </div>

And the second part is the cart HTML which is simple. A div element wrapped with a form element which we can used to submit the cart values

<form action="results.php" method="POST"> 
<!-- SmartCart element --> <div id="smartcart"></div>
</form>

Paypal Implementation

Please see the above implementaion and here specifying only the part that need change, the cart html section and the cart invoke section.

HTML for the cart
<!-- Paypal Submit URL : https://www.paypal.com/cgi-bin/webscr -->
<!-- Paypal Sandbox Submit URL: https://www.sandbox.paypal.com/cgi-bin/webscr -->
<!-- Paypal Cart submit form -->
<form action="https://www.paypal.com/cgi-bin/webscr" method="POST"> <!-- SmartCart element --> <div id="smartcart"></div>
<!-- Paypal required info, Please update based on your details --> <input name="business" value="YOUR-PAYPAL-EMAIL-HERE" type="hidden"> <input name="currency_code" value="USD" type="hidden"> <input name="return" value="http://www.yourdomain.com/yoursuccessurl" type="hidden"> <input name="cancel_return" value="http://www.yourdomain.com/yourcancelurl" type="hidden"> <input name="cmd" value="_cart" type="hidden"> <input name="upload" value="1" type="hidden"> </form>
Invoke the SmartCart with Paypal option
$('#smartcart').smartCart({
        submitSettings: {
            submitType: 'paypal' // form, paypal, ajax
        },
        toolbarSettings: {
            checkoutButtonStyle: 'paypal' // default, paypal, image
        }
    });
});

Parameters

Parameter Description Values Default
cart initial products on cart Object Array []
resultName Submit name of the cart parameter String cart_list
theme theme for the cart, related css need to include for other than default theme String default
combineProducts Combine similar products on cart true/false true
highlightEffect Highlight effect on adding/updating product in cart true/false true
cartItemTemplate Template to show items in the cart String <img class="img-responsive pull-left" src="{product_image}" /><h4 class="list-group-item-heading">{product_name}</h4><p class="list-group-item-text">{product_desc}</p>
cartItemQtyTemplate Template to show item quantity in the cart String {display_price} × {display_quantity} = {display_amount}
productContainerSelector Selector used to identify the product container in the product list. String .sc-product-item
productElementSelector Selector used to identify the elements whoes values to be included with the cart object String *
addCartSelector Selector used to identify the "Add To Cart" Button String .sc-add-to-cart
debug Enable/Disable debug mode Boolean false
paramSettings Map the paramters in the product list with the cart object

{
    productPrice: 'product_price',
    productQuantity: 'product_quantity',
    productName: 'product_name',
    productId: 'product_id',
}
lang An object with language variables

{
    cartTitle: "Shopping Cart",
    checkout: 'Checkout',
    clear: 'Clear',
    subtotal: 'Subtotal:',
    cartRemove:'×',
    cartEmpty: 'Cart is Empty!<br />Choose your products'
}
submitSettings An object with submit setting

{
    submitType: 'form', // form, paypal, ajax
    ajaxURL: '', // Ajax submit URL
    ajaxSettings: {} // Ajax extra settings for submit call
}
currencySettings An object with currency setting

{
    locales: 'en-US', // A string with a BCP 47 language tag, or an array of such strings
    currencyOptions:  {
        style: 'currency',
        currency: 'USD',
        currencyDisplay: 'symbol'
    } // extra settings for the currency formatter. Refer: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
}
toolbarSettings An object with toolbar setting

{
    showToolbar: true,
    showCheckoutButton: true,
    showClearButton: true,
    showCartSummary:true,
    checkoutButtonStyle: 'default', // default, paypal, image
    checkoutButtonImage: '', // image for the checkout button
    toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
}

Events

Event Name Description Parameters
itemAdded Triggers when an item is added on the cart Object: object of the product.
itemUpdated Triggers when an item is updated on the cart Object: object of the product.
itemRemoved Triggers when an item is removed from the cart Object: object of the product.
cartCleared Triggers when the cart is cleared
quantityUpdated Triggers when an item quantity is updated on the cart Object: object of the product.
Integer: new quantity value.
cartEmpty Triggers when the cart is empty
cartSubmitted Triggers when the cart is submitte Object: object array of full cart.
Example: Event Initialize
// Initialize the leaveStep event
$("#smartcart").on("cartEmpty", function(e) {
   alert("Cart is empty");
});

// Initialize Smart Cart
$('#smartcart').smartCart();

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

A little help is always a beautiful thing...

We are committed to deliver free and open source projects. Your support keep us on the track and make us deliver bigger things for you.

Help us improve

jQuery Smart Cart is a free and open-source project, and we are trying hard to improve the project as per the feedback from you. Please help us finding bugs or issues on this project, or give us an idea for a feature. Also, you are most welcome to improve the code, please create a pull-request on the project repository on GitHub.

Archive

Please see the older versions archive of this plugin.

jQuery Smart Cart v2
Dipu Raj

Dipu Raj

Full-stack developer in JavaScript, PHP and C# with added interest in Angular, React, jQuery and Bootstrap. Believes the code should be as beautiful as the design.