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

Smart Cart 2 - javascript jQuery shopping cart plugin




Overview:

Smart Cart 2 is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easy and user friendly.
It is very easy to implement and only minimal HTML required. The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to saves space.
To avoid complexity I haven’t implemented built-in Ajax support, but using the events you can easily implement the Ajax features. The product list is more dynamic with built-in search and category filter. Template option gives you freedom to customize the product details display on product list and cart. It is also having option to show the product image and its expanded tool tip.

Version: 2.0

Screenshots:


Demo:
View Demo

Product Home:
http://www.techlaboratory.net

Download:
Smart Cart 2: Download from SourceForge

Features:
  • Easy to implement, minimal HTML required
  • Clean and compact design, tabbed design saves space
  • Product search and Category filter enables easy and fast access to the product what users are looking for
  • Automatically calculates subtotal and total
  • Quantity is editable from the cart list
  • Event support, custom Ajax feature and validation can easily implement using the events
  • Product Image display and expanded tool tip display
  • Can implement multiple cart on same page
  • Template option, for easily customizing product display details
  • Pre-populate products on cart on page load

Smart Cart 2 Documentation


Getting Started:

Basic Usage:
$('#SmartCart).smartCart();
With option parametrs:
$('# SmartCart). smartCart ({
   selected: 0,  // 0 = produts list, 1 = cart  
   resultName: 'products_selected[]', 
   enableImage: true,
   enableImageTooltip: true,
   enableSearch: true,
   enableCategoryFilter: true,
   productItemTemplate:'<strong><%=pname%></strong><br />Category: <%=pcategory%><br />
                        <small><%=pdesc%></small><br /><strong>

                        Price: <%=pprice%></strong>',
   cartItemTemplate:'<strong><%=pname%></strong>',

   // Events
   onAdd: null,      
   onAdded: null,    
   onRemove: null,   
   onRemoved: null,  
   onUpdate: null,   
   onUpdated: null,  
   onCheckout: null 
});
See Option Parameter Description
See Event Description


Installing Smart Cart 2:

Step 1: Get the latest version of jQuery (jQuery 1.3 or above)

Step 2: Download the Smart Cart 2 (http://www.techlaboratory.net or http://tech-laboratory.blogspot.com)

Step 3: Include following lines on the head section of your html file (Make sure the paths are correct).
<link href="styles/smart_cart.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.smartCart-2.0.js"></script>
Step 4: Copy the below javascript code to head section
<script type="text/javascript">
    $(document).ready(function(){  
     $('#SmartCart').smartCart();
    });
</script>
Step 5: Copy the below html to the body section.
<div id="SmartCart" class="scMain">
  <input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="" 
    pcategory="Computers" pname="Apple MacBook Pro MA464LL/A 15.4" pid="100">

  <input type="hidden" pimage="products/product6.jpg" pprice="2699.99" pdesc="" 
    pcategory="Computers" pname="Sony VAIO 11.1&quot; Notebook PC" pid="101">
  <input type="hidden" pimage="products/product3.jpg" pprice="550.00" pdesc="" 
    pcategory="Cameras" pname="Canon Digital Rebel" pid="102">
</div>
Description:Text marked bold are the pseudo attributes that describes about the product. Like product name, price, description etc.

pid : Product ID
pname : Name of the product
pdesc : Description of the product
pprice : Price of the product
pimage : Product image source
pcategory : Category of the product

You can add more product details by adding new attributes to the input element, and so you can show them on product list or cart by editing the template.
You can customize the pseudo attribute names, and configure it on the plug-in file on the Attribute Settings section.

Finished: That's all, Browse the page you are set to go.


Some more details & descriptions:


1. How to show more product details on product list / How to customize Template?

<input type="hidden" pimage="products/product1.jpg" pprice="2299.99" pdesc="The Intel Core Duo." pcategory="Computers" pname="Apple MacBook Pro" pid="100"
product_sku ="SDK334455">

Here added a new pseudo attribute "product_sku".
Describes below is how to apply product list template, and the highlighted part will be replaced with the SKU of specified for corresponding product.

Specify your attribute by wrapping it with <%= and %> on the templates (productItemTemplate, cartItemTemplate) will be replaced with the value of the attribute on the product list or cart when displayed.
Example: <%=YOUR_ATTRIBUTE_NAME%>

  var productTemplateWithSKU = '<strong><%=pname%></strong><br />
          Category: <%=pcategory%><br /> 
      <small><%=pdesc%></small><br /><strong>Price: <%=pprice%></strong><br />

      <strong>SKU:  <%=product_sku%></strong>';
  // calling Smart cart
  $('#SmartCart').smartCart({productItemTemplate: productTemplateWithSKU });

2. How to enable category filter?

Category filter is an automatic option and you can enable or disable by specifying the Option parameter: enableCategoryFilter to true/false
Also the product category attribute should present the hidden element, if it is empty or null the category filter will be disabled. The category select box is filled automatically by reading the category attribute.

So to enable category filter you have to do only 2 things:
1. Enable it on option parameter enableCategoryFilter : true (true by default).
2. Specify category attribute in the hidden element.

<input type="hidden" pimage="products/product1.jpg" pprice="2299.99" 
 pdesc="The Intel Core Duo." pcategory="Computers" pname="Apple MacBook Pro" 
 pid="100">


Parameter Description:

Parameter Name Description Values Default Value
selected specify the selected tab 0 = product list
1= cart
0
resultName the name of the request to be passed when submitted
enableImage Enable/Disable Image display on product list and cart true = enabled
false= disabled
true
enableImageTooltip Enable/Disable Image tool tip display on product list and cart true = enabled
false= disabled
true
enableSearch Enable/Disable search for the products on product list true = enabled
false= disabled
true
enableCategoryFilter Enable/Disable category filter for the products on product list. Automatically disables if category attributes are not presents in the hidden elements true = enabled
false= disabled
true
productItemTemplate Template for the product display on product list String
(see details)
<strong><%=pname%></strong><br />
Category: <%=pcategory%><br />

<small><%=pdesc%></small><br />
<strong>Price: <%=pprice%></strong>
cartItemTemplate Template for the product display on cart String
(see details)
<strong><%=pname%></strong>

 
 

Event Description:

Event Name Description Parameters Default
onAdd Triggered immediately when click on add to cart button and just before staring add to cart process. This is a decision making event, based on its function return value (true/false) the product add to cart process can be canceled or continued. Object: object of the hidden element of the product to add.
Quantity: The quantity of the product to add.
null
onAdded Triggered when click on add to cart button but only after finish adding the product to cart. This event doesn’t accept return values. Object: object of the hidden element of the product added.
Quantity: The quantity of the product added.
null
onRemove Triggered immediately when a product is about to remove from cart, i.e. when click remove button on cart. This a decision making event, based on its function return value (true/false) the remove process can be canceled on continued. Object: object of the hidden element of the product to remove. null
onRemoved Triggered when the product remove (from cart) process is finished. This event doesn’t accept return values. Object: object of the hidden element of the product removed. null
onUpdate Triggered when a product quantity is updated by changing it from cart. This a decision making event, based on its function return value (true/false) the update process can be canceled on continued. Object: object of the hidden element of the product to update.
Quantity: The quantity of the product to update
null
onUpdated Triggered when product quantity is finished updating. This event doesn’t accept return values. Object: object of the hidden element of the product updated.
Quantity: The quantity of the product updated.
null
onCheckout Triggered when click on Checkout button on cart. If this even is not specified it will automatically submits the form element available. This event doesn’t accept return values. Object: an object of the select element which contains option elements with value as the pair of product_id and quantity delimited with pipe ‘|’ symbol. null

Smart Tab - a javascript jquery tab control plugin




Overview:

Smart Tab is a flexible jQuery(a JavaScript library) Tab Control plugin.

Current Version : 0.99

Screenshots:































Demo:

1. Basic Layout view demo
2. Vertical Layout view demo
2. Bottom Layout view demo

Download:

Version - 0.99(SmartTab - 0.99.zip) Download file from SourceForge

Features:
  • Customizable tab anchors, can use images.
  • AutoProgress:- option for automatic navigation of tabs.
  • AutoProgress can be stopped when mouse hover on control and restarts when not.
  • Keyboard Navigation:- Use left/right keyboard keys to navigate through tabs(try on demo).
  • Transition Effects:- option for fade/slide effects on tab transition.
  • Option for specifying the selected tab.
  • Easly can impliment Top, Bottom and Vertical style layout(see the demo).
  • Easy to implement, Minimal HTML required.
Getting Started:

Basic Usage:
$('#tabs').smartTab();
With option parametrs:
$('#tabs').smartTab({
      selected: 0,  // Selected Tab, 0 = first step   
      keyNavigation:true, // Enable/Disable key navigation
      autoProgress:false, // Auto navigate tabs on interval
      progressInterval: 3500, // Auto navigate Interval
      stopOnFocus:false, // Stops autoProgress on mouse hover and restarts when not
      transitionEffect:'none', // Effect on navigation, none/fade/slide
      tabContainerClass:'stContainer' // tab container css class name
});  
  
Installing Smart Tab:

Step 1: Get the latest version of jQuery(www.jquery.com)
Step 2: Download the Smart Tab (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="styles/smart_tab.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.smartTab.js"></script>
Step 4: Copy the below lines to your head section
<script type="text/javascript">
   $(document).ready(function(){
      $('#tabs').smartTab();
   });
</script>
Step 5: Copy the below html to the body section.
<div id="tabs" class="stContainer">
    <ul>

      <li><a href="#tabs-1">
            <img class='logoImage2' border="0" width="50px" src="images/Step1.png">
            <h2>Tab 1<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-2">
            <img class='logoImage2' border="0" width="50px" src="images/Step2.png">
            <h2>Tab 2<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-3">
            <img class='logoImage2' border="0" width="50px" src="images/Step3.png">
            <h2>Tab 3<br />
            <small>Description</small></h2>

          </a></li>
      <li><a href="#tabs-4">
            <img class='logoImage2' border="0" width="50px" src="images/Step4.png">
            <h2>Tab 4<br />
            <small>Description</small></h2>

          </a></li>
    </ul>
    <div id="tabs-1">
        <h2>Tab 1 Title</h2> 
        <p>Tab 1 Content here</p>     
      </div>

    <div id="tabs-2">
        <h2>Tab 2 Title</h2> 
        <p>Tab 2 Content here</p>     
      </div>                      
    <div id="tabs-3">
        <h2>Tab 3 Title</h2> 
        <p>Tab 3 Content here</p>                        
      </div>

    <div id="tabs-4">
        <h2>Tab 4 Title</h2> 
        <p>Tab 4 Content here</p>
      </div>
</div>

Finished: That all, you are set to Go. I'm happy to hear comments and feedback from you. Happy Coding!!!