Fully Functional Client Side Shopping Cart Plugin in Jquery

604

If your are planning to create a shopping website and looking for shopping cart plugin then In this post I am going to share a fully functional client side shopping cart plugin in Jquery name Cesta-Feira. It is an easy to use jQuery plugin that adds a fully featured store to any website in minutes. The store plugin is written in pure JavaScript (jQuery) with support of localstorage.
Cesta-Feira jQuery plugin for creating and manipulating a simple shopping cart on your website.

Features

  • Full client-side operation (use of server-side languages is optional);
  • Totally customizable with regard to item details when adding to cart;
  • Browser support: Firefox, Chrome, Safari, IE8+, iOS, Android, Opera;
  • Small file size and simple to implement;
  • Based on metadatas of DOM;
  • Callback API and public methods.

Creating Simple Shopping Cart

Below going to create a very basic add to cart feature using this plugin.

Libraries

First and most important, the jQuery library and jStorage library needs to be included (no need to download – link directly from CloudFlare CDN). Next, download the package of the cesta-feira and link Cesta-Feira Javascript file.

<!-- jQuery library (served from CloudFlare) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- jStorage library (served from CloudFlare) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jStorage/0.4.12/jstorage.min.js"></script>
<!-- Cesta-Feira Javascript file -->
<script src="/dist/cesta-feira.min.js">
</script>

HTML

Create a form element with the metadata data-cesta-feira-form form <form data-cesta-feira-form> and with elements <input> with the metadata data-cesta-feira-attribute for each information of item to be added into the basket. Any text content is valid, and you can add as many inputs as you want. Only the <input> containing the product ID is required, being marked as follows: <input value=”1″ data-cesta-feira-item-id>

<form data-cesta-feira-form>
  <input type="hidden" value="1" data-cesta-feira-item-id>
  <input type="number" name="quantity" data-cesta-feira-attribute>
  <input type="text" name="observations" data-cesta-feira-attribute>
</form>

JS

Finally call the plugins .Cesta-Feira(). Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

$(document).ready(function(){
  $.CestaFeira();
});

See live demo and download source code.

DEMO | DOWNLOAD

Above is just the basic example of plugin you can see official git repository for more details. Don’t forget to read license for using above plugin in your commercial project.