This blog is outdated! Go to http://techlaboratory.net for latest updates

Smart Cart - JavaScript jQuery pluging for shopping cart




New version is available. Please check Smart Cart 2
Overview:
Smart Cart is a flexible jQuery plugin for shopping cart. It gives an easy and clean interface for product selection section in a shopping cart.
Current Version: 0.95 beta

Screenshot:













Demo:
view demo

Download:
Version - 0.95 beta: download source from SourceForge

Features:
  • Easy and Clean Interface for Shopping cart Product Selection.
  • Automatic Calculation of Subtotal.
  • Highlights the added items in cart list.
Installing Smart Cart 0.95 beta:
Step 1: Product List
The product list is set up in the following way
<div id="sc_productlist" class="scProductList">

<div class="scProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="images/product0.jpg" /></td>
<td><strong><span id="prod_name100">Apple IPhone 3G</span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price100">1450.75</span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="scText" id="prod_qty100" value="1" size="3" type="text">
<input type="button" rel="100" class="scItemButton scBtn" value="Add Product"></td>
</tr>
</table>
</div>

</div>
The items marked bold are important and follows its description:
Product Name: The product name for each product is taking from the span element with id = "<a prefix><product id>"
in this example"prod_name100", 100 is the product id and prod_name is the prefix.

Product Price:
Same way as above the product price is taking from the span.
in this example "prod_price100", 100 is the product id and prod_price is the prefix.

Product Quantity: This time only difference is the selection from textbox instead of span element,
this is becouse product quantity is entered by the user in normal cases.
in the example the textbox with id = prod_qty100 is responsible for giving the quantity selected by the user,
here 100 is the product it and prod_qty is the prefix.

Add Product Button: This button is the trigger to add corresponding product to the cart. the css class name "scItemButton" and rel="100"
identifies the button as the trigger for the product 100.

See the demo code for the implimention example.
Step 2: Shopping Cart

<div id="sc_cart" class="scCart">
<!-- Selected Product ID/Quantity are stored on the <select> element below -->
<select id="product_list" name="product_list[]" style="display:none;" multiple="multiple">
</select>
<!-- Cart List Header -->
<div class="scCartListHead">
<table width='100%'><tr>
<td>&nbsp;&nbsp;Product</td>
<td width='80px'>Quantity</td>
<td width='130px'>Amount ($)</td>
</tr></table>
</div>
<!-- Cart List: Selected Products are listed inside div below -->
<div id="sc_cartlist" class="scCartList"></div>

<div class="scCartListHead">
<table width='100%'><tr>
<td>
<!-- Message Label -->
<span id="sc_message"></span></td>
<td width='100px'>Subtotal ($):</td>
<td width='120px'>
<!-- Sub Total Label -->
<span id="sc_subtotal"></span>
</td>
</tr></table>
</div>
<br>
<!-- Checkout Button -->
<input style="width:200px;height:35px;float:right;" type="submit" class="scBtn" value="Checkout >>">
</div>
Step 3: Include Files
Include the following javascript and css files
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/SmartCart.js"></script>
<link rel="stylesheet" type="text/css" href="styles/style_smartcart.css" />
Step 4: Call the Smart Cart
<script type="text/javascript">
$(document).ready(function() {
$("#sc_cart").smartCart();
});
</script>

Using the Options
<script type="text/javascript">
$(document).ready(function() {
$("#sc_cart").smartCart({
// Most Required Options - Element Selectors
itemSelector: '.scItemButton', // collection of buttons which add items to cart
cartListSelector: '#sc_cartlist', // element in which selected items are listed
subTotalSelector: '#sc_subtotal', // element in which subtotal shows
messageBox: '#sc_message', // element in which messages are displayed
// Prefix Item Attribute Selector - Required
itemNameSelectorPrefix: '#prod_name', // combination of this data and product/item id is used to get an element in product list with the item name (can be a div/span)
itemQuantitySelectorPrefix: '#prod_qty', // for quantity ( should be a textbox/<select>)
itemPriceSelectorPrefix: '#prod_price', // for price (can be a div/span)
// Text Labels
removeLabel: 'remove', // text for the "remove" link
addedLabel: '1 item added to cart', // text to show message when an item is added
removedLabel: '1 item removed from cart', // text to show message when an item is removed
emptyCartLabel: '<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Your Cart is Empty!</b> You can select items from the product list.', // text or empty cart (can be even html)
// Css Classes
selectClass: 'scProductSelect', // css class for the <select> element
listClass: 'scULList', // css class for the list ($ol)
listItemClass: 'scCartListItem', // css class for the <li> list items
listItemLabelClass: 'scListItemLabel', // css class for the label text that in list items
removeClass: 'scListItemRemove', // css class given to the "remove" link
highlightClass: 'scHighlight', // css class given to the highlight <span>
// Other Options
highlight: true // toggle highlight effect to the added item
});
});
</script>

Please give me your feedbacks

21 comments:

Anonymous December 5, 2009 at 5:18 AM  

Thanks man!

Anonymous January 3, 2010 at 4:35 AM  

Is it possible to add a S/H cost?

Anonymous March 18, 2010 at 2:26 AM  

Really good!

Anonymous March 22, 2010 at 1:10 AM  

Was this tested for security??

Dipu R March 22, 2010 at 1:31 AM  

Here its only taking the Product Id and Product Price. So I don't think there is a security risk.

But even while its best to do validations on server-side script.

Thanks

Yousuf Qureshi April 16, 2010 at 6:09 AM  

Really appreciated.

Anonymous May 10, 2010 at 8:37 PM  

Really great.
How can u store so if person navigates away the cart remembers products?

Dipu R May 10, 2010 at 8:49 PM  

You need to store the cart data to session and reload the data when the page is called again.
You could use ajax(not included with this plugin) if you want to store data to session while adding products.

Thank you

Nico June 24, 2010 at 4:11 AM  

Hi! There great plugin, I have one question
How can I swop the “Products Quantity Field” from being shown next to the add-to-cart button to being shown in the results instead, so that customers can make changes to the quantity in the results and not at the point of adding to the cart.
Thanks in advance

Dipu R June 24, 2010 at 9:00 PM  

Hi Nico,
Its a good idea... I will include this feature on the next release.

Thank you

Nico June 25, 2010 at 12:53 AM  

Hi again Dipu

Might you be know when the next release will be?

I am in the middle of a project and this would be very helpful addition to it.

Juno September 20, 2010 at 1:41 AM  

Nice plugin!

I am trying to implement it on a classic-asp website. Can someone provide me an ASP-version of 'results.php'?

I really have no idea how to retrieve the values/quantities from the form when an user wants to checkout :(

Thanks in advance!

predice October 14, 2010 at 5:08 PM  

Pal, your site was hacked.....

Dipu R October 14, 2010 at 9:43 PM  

Oops!!!! this is the 2nd time im facing this,
don't know why people doing this.
I will fix it soon... thanks for the info Vivel.

CNO October 2, 2011 at 6:10 AM  

How to addon Search ProductID ?
Currently can search only ProdutName.

Anonymous October 9, 2011 at 3:31 AM  

Dear Dipu R

How to addon Search ProductID ?
Currently can search only ProdutName.

Unknown October 18, 2011 at 7:13 PM  

Hi Dipu R,

I've written a bunch of patches - would you consider posting this to github to make it easier to merge in and contribute?

JG

sidd April 24, 2012 at 8:54 PM  

Hi Dipu,
can you please provide with the java version of continue shopping method in the result.php

Thanks
Sidd

rochelle canale September 19, 2012 at 8:05 PM  

hello guys i just want to ask how can i pass the data from my mysql database to the cart?

rochelle canale September 20, 2012 at 1:26 AM  

hey guys i found the answer to my previous problem. just one more question how can i add the transaction details to the database?

JAMCNO March 9, 2013 at 2:14 AM  

Hello,

When load the duplicate product id on jquery smart cart, it show only one record. i want to show duplicate product id .

Please help

Post a Comment