jQuery Smart Cart

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.

Demo

• Basic Example
• PayPal Cart Example

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

{
    productPrice: 'product_price',
    productQuantity: 'product_quantity',
    productName: 'product_name',
    productId: 'product_id',
}

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

{
    submitType: 'form', // form, paypal, ajax
    ajaxURL: '', // Ajax submit URL
    ajaxSettings: {} // Ajax extra settings for submit call
}

{
    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
}

{
    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

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.

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.