Basic Add To Shopping Cart Plugin With jQuery - SimpleCart

The SimpleCart jQuery plugin makes it easy to integrate add to cart and shopping cart functionalities into your online store.

The plugin enables your customers to add products to your shopping cart and dynamically update your total for the product depending on the quantity.

It also has the ability to persist cart items on page refresh. Based on HTML5 local storage.

How to use it:

1. Link to jQuery library and the jQuery SimpleCart plugin's files.

<link href="/simple_cart.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="/jQuery.SimpleCart.js" ></script>

2. Load the Bootstrap and Font Awesome for the basic styling.

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="fontawesome.min.css">

3. Add the 'Add To Cart' btuton to the product and specify the product name & price in the data attributes:

<button class="sc-add-to-cart" 
        data-name="Product" 
        data-price="50" 
        type="submit">
        ADD To Cart
</button>

4. Create a DIV container to place the shopping cart.

<div id="cart"></div>

5. Call the plugin to activate the shoppint cart.

$(document).ready(function () {
  $('#cart').simpleCart();
});

6. All default CSS selectors.

$(document).ready(function () {
  $('#cart').simpleCart({
    addtoCartClass: '.sc-add-to-cart',
    cartProductListClass: '.cart-products-list',
    totalCartCountClass: '.total-cart-count',
    totalCartCostClass: '.total-cart-cost',
    showcartID : '#show-cart',
    itemCountClass : '.item-count'
  };
});

---

This awesome jQuery plugin is developed by RedIsTheNewBlue. For more Advanced Usages, please check the demo page or visit the official website.