Fully Functional Client Side Shopping Cart Plugin in Jquery

Shopping Cart Plugin

If your are planning to make a shopping website and looking for Shopping Cart Plugin subsequently In this appendix I am going to part a abundantly operational client side shopping cart plugin in Jquery proclaim Cesta-Feira. It is an manageable jQuery plugin that adds a abundantly featured accretion to any website in minutes. The stock plugin is written in unadulterated JavaScript (jQuery) when acknowledge of localstorage.
Cesta-Feira jQuery plugin for creating and manipulating a easy shopping cart gone insinuation to speaking your website.

Features

Full client-side operation (use of server-side languages is optional);
Totally customizable taking into consideration regard to item details behind adding taking place to cart;
Browser retain: Firefox, Chrome, Safari, IE8+, iOS, Android, Opera;
Small file size and easy to take on;
Based almost metadatas of DOM;
Callback API and public methods.

Creating Simple Shopping Cart

Below going to make a enormously basic buildup to cart feature using this plugin.

Libraries

First and most important, the jQuery library and jStorage library needs to be included (no way to download membership directly from CloudFlare CDN). Next, download the package of the cesta-feira and connect 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 in imitation of the metadata data-cesta-feira-form form <form data-cesta-feira-form> and considering elements <input> when the metadata data-cesta-feira-attribute for each inform of item to be option into the basket. Any text content is genuine, and you can cumulative as many inputs as you deficiency. Only the <input> containing the product ID is required, mammal 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 operate!

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.