Shopping JCart Ready-to-go Solution Built with localStorage

  • Bootstrap 3.3.6
  • jQuery Query 2.2.1
  • Use latest web technologies
  • Easy to Customize
  • BONUS: wish list
DEMO

Shopping JCart - Clean Design and Code with the Latest Technologies

What is HTML5 Web Storage ?

With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself.

What is Shopping JCart ?

Shopping JCart is a simple shopping cart application that uses HTML 5 localStorage, a new web technology that replaces the classic cookie, giving a much better data security. Shopping JCart can be implemented very easily in an bigger application, providing the ability to set certain information necessary for proper functioning, such as currency, vat, the path of pictures, etc..

Shopping JCart benefits
  • stores data with no expiration date
  • data is stored totally on the client
  • a lot of storage space
  • session-based storage is available
  • use latest web technologies
  • information persists beyond a page refresh
  • information isn’t transmitted to the server
  • easy to use/implement, no installation required
  • user can define own values
  • responsive layout
  • AJAX shopping cart checkout
  • data does not shuttle between the client and server on each request or response.

Shopping JCart - best JavaScript shopping cart ever seen

Documentation

Include .css files into your project

				
<!-- CSS -->
<link rel="stylesheet" href="public/css/bootstrap.min.css" type="text/css">	
<link rel="stylesheet" href="public/css/font-awesome.min.css" type="text/css">	
<link rel="stylesheet" href="public/css/design.css" type="text/css">	
<!-- END CSS --> 

Include .js files into your project

<script src="public/js/jquery.js"></script>
<script src="public/js/bootstrap.min.js"></script>
<script>
$(function () {
	$('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
})
</script>


<!-- PARSLEY VALIDATION -->
<script type="text/javascript" src="public/vendor/parsley/parsley.js"></script>
<script>
if ( $('.validateJSForm').length ) {
	$('.validateJSForm').parsley(
		{trigger: "change keyup"}
	);
}
</script>
<!-- END PARSLEY VALIDATION -->


<!-- GROWL -->
<link href="public/vendor/growl/jquery.growl.css" rel="stylesheet">
<script src="public/vendor/growl/jquery.growl.js"></script>
<!-- END GROWL -->


<!-- localStorageJCart -->
<script src="public/js/local-storage-jcart.js"></script>
<!-- end localStorageJCart -->

Include javascript localStorageJCart code into your project

you will find the code in index.php at bottom of page

Define your values into local-storage-jcart.js

var productPage = 'index.php?page=product';
var cartPage = 'index.php?page=cart';
var checkoutPage = index.php?page=checkout';

Php code for buttons - products page

<div class="caption">
	<h4>
		<?php echo $price;?> <?php echo $product['currency'];?>
	</h4>

	<!-- link to product page -->
	<a href="index.php?page=product&product=<?php echo $product['slug'];?>&id=<?php echo $product['id'];?>" class="btn btn-default"
	data-placement="top" data-toggle="tooltip" title="Product details">
		
		<i class="fa fa-list"></i>
	</a> 
	<!-- end link to product page -->

	<!-- button to add to wish list -->
	<button type="button" class="btn btn-default addToWishList"
		data-placement="top" data-toggle="tooltip" title="Add to Wish List"
		p-id="<?php echo $product['id'];?>" 
		p-name="<?php echo $product['name'];?>" 
		p-slug="<?php echo $product['slug'];?>" 
		p-price="<?php echo $product['price'];?>" 
		p-vat="<?php echo $product['vat'];?>" 
		p-currency="<?php echo $product['currency'];?>" 
		p-img="public/img/products/small/<?php echo $product['img'];?>">

		<i class="fa fa-heart"></i>
	</button>
	<!-- end button to add to wish list -->

	<!-- button to add to cart -->
	<button type="button" class="btn btn-default addToCart"
		data-placement="top" data-toggle="tooltip" title="Add to Cart"
		p-id="<?php echo $product['id'];?>" 
		p-name="<?php echo $product['name'];?>" 
		p-slug="<?php echo $product['slug'];?>" 
		p-price="<?php echo $product['price'];?>" 
		p-vat="<?php echo $product['vat'];?>" 
		p-currency="<?php echo $product['currency'];?>" 
		p-img="public/img/products/small/<?php echo $product['img'];?>">									
			
		<i class="fa fa-cart-plus"></i> Add to Cart
	</button>
	<!-- end button to add to cart -->
</div>

Php code for buttons - single product page

<button type="button" class="btn btn-primary manageQty" data-type="decrease">
<i class="fa fa-minus"></i>
</button>

<input type="text" maxlength="12" class="btn product-qty" size="2" value="1" name="quantity">

<button type="button" class="btn btn-primary manageQty" data-type="increase">
<i class="fa fa-plus"></i>
</button>	

<!-- button to add to cart -->
<button type="button" class="btn btn-default addToCart"
	data-placement="top" data-toggle="tooltip" title="Add to Cart"
	p-id="<?php echo $product['id'];?>" 
	p-name="<?php echo $product['name'];?>" 
	p-slug="<?php echo $product['slug'];?>" 
	p-price="<?php echo $product['price'];?>" 
	p-vat="<?php echo $product['vat'];?>" 
	p-currency="<?php echo $product['currency'];?>" 
	p-img="public/img/products/small/<?php echo $product['img'];?>">									

	<i class="fa fa-cart-plus"></i> Add to Cart
</button>
<!-- end button to add to cart -->	

<!-- button to add to wish list -->
<button type="button" class="btn btn-default addToWishList"
	data-placement="top" data-toggle="tooltip" title="Add to Wish List"
	p-id="<?php echo $product['id'];?>" 
	p-name="<?php echo $product['name'];?>" 
	p-slug="<?php echo $product['slug'];?>" 
	p-price="<?php echo $product['price'];?>" 
	p-vat="<?php echo $product['vat'];?>" 
	p-currency="<?php echo $product['currency'];?>" 
	p-img="public/img/products/small/<?php echo $product['img'];?>">

	<i class="fa fa-heart"></i>
</button>
<!-- end button to add to wish list -->	

Solutii Soft - can do any type of web application

office@solutiisoft.ro