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

Smart Wizard - a javascript, jQuery wizard control plugin




Overview:

Smart Wizard is a flexible jQuery(a JavaScript library) plugin that gives wizard like interface. Wizards are generally used to give step by step contents into users, it gives better and clean user interface and saves space. An example of wizard can see when we install a software in our windows machine. Some websites also uses this approach on their user registration or etc.

I was looking for a good wizard control for my web project and I don’t find a good control that suits my need. So I decided to develop it myself.

Current Version : 0.98


Screenshots:


















Demo:


1. Basic Wizard view demo

2. Vertical Style Wizard view demo


Home Page:

Visit Home

jQuery Plugin Page:

See this on jQuery Plugin page

Download:

Version - 0.98 download file from SourceForge

Features:

  • Easy to implement, Minimal HTML required.

  • Easy Navigation – Step titles are act as anchors.

  • Validation for each step.

  • Option for specifying first selected step.

  • Option for making all steps enabled.

  • Both Vertical and Horizontal Navigation.



Getting Started:

Basic Usage:

$('#smartwizard').smartWizard();

Using with option parametrs:
$('#smartwizard').smartWizard(
{
selectedStep: 0,  // Selected Step, 0 = first step
errorSteps:[],    // Array Steps with errors
enableAll:false,  // Enable All Steps, true/false
animation:true,   // Animation Effect on navigation, true/false    
validatorFunc:validateTabs // Step validation function, Step index will be passed
}
); 

Installing Smart Wizard:

Step 1: Get the latest version of jQuery(www.jquery.com)

Step 2: Download the Smart Wizard (http://tech-laboratory.blogspot.com)

Step 3: Include following lines to head section of your html file. Make sure that the path to the files are correct.
<link href="style_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="SmartWizard.js"></script>


Step 4: also copy the below lines to your head section
<script type="text/javascript">
$().ready(function() {
   $('#smartwizard').smartWizard();
});
</script>

Step 5: Copy the below html to your file’s body section and open the file on browser. That’s all!
<div id="smartwizard" class="wiz-container">
<ul id="wizard-anchor">
<li><a href="#wizard-1"><h2>Step 1</h2>
     <small>Description for step 1</small></a></li>
<li><a href="#wizard-2"><h2>Step 2</h2>
     <small>Description for step 2</small></a></li>
<li><a href="#wizard-3"><h2>Step 3</h2>
     <small>Description for step 3</small></a></li>
</ul>
<div id="wizard-body" class="wiz-body">
<div id="wizard-1" >
   <div class="wiz-content">
           Content for Step 1
       </div>   
       <div class="wiz-nav">
         <input class="next btn" id="next" type="button" value="Next >" />
       </div>     
   </div>
<div id="wizard-2">
   <div class="wiz-content">
           Content for Step 2
       </div>
       <div class="wiz-nav">
         <input class="back btn" id="back" type="button" value="< Back" />
         <input class="next btn" id="next" type="button" value="Next >" />
       </div>                   
   </div>
<div id="wizard-3">
   <div class="wiz-content">
       Content for Step 3
       </div>      
       <div class="wiz-nav">
         <input class="back btn" id="back" type="button" value="< Back" />
         <input class="btn" id="next" type="button" value="Done" />
       </div>        
   </div>
   </div>
   </div>