Tiny Test Shop Source Code

The Source code of Tiny Test Shop consists of 8 Velocity template and one javascript file. "shop.vm" is the main template, the other templates are included depending the application's state.

shop.vm
progress.vm
content.vm
catalog.vm
smallcart.vm
cart.vm
address.vm
complete.vm
shop.js


<div id="shop_container">	
    <div id="shop_progress">
		#include ("progress.vm")		
	</div>	
    <div id="shop_content">
		#include ("content.vm")		
	</div>
</div>


#if ($progress == 'catalog')
	$I18N.nav.catalog
#elseif ($progress == 'cart')
	<a href="javascript:show('catalog')">$I18N.nav.catalog</a> --> $I18N.nav.cart
#elseif ($progress == 'address')
	<a href="javascript:show('catalog')">$I18N.nav.catalog</a> --> 
	<a href="javascript:show('cart')">$I18N.nav.cart</a> 
	--> $I18N.nav.shipping
#elseif ($progress == 'complete')
	$I18N.nav.complete
#end


<div id="shop_main">
	#if ($progress == 'catalog')
		#include("catalog.vm")
	#elseif ($progress == 'cart')
		#include("cart.vm")
	#elseif ($progress == 'address')
		#include("address.vm")
	#elseif ($progress == 'complete')
		#include("complete.vm")
	#end
</div>


<div id="shop_main_head">
  <span class="emphasis">$I18N.catalog.header:</span>
</div>  
<div id="shop_catalog_content">	
  #foreach($product in $catalog.products)
    <div class="shop_product">
      <table>	
        <tr><td>
          <img class="shop_product" border="0" 
                  height="100" width="100" 
                  src="example5/$product.img"/>
        </td></tr>
        <tr><td class="shop_product_title">$product.name</td></tr>
        <tr><td class="shop_product_info">
          $product.description <br/>
        <a id="add_$product.id" href="javascript:add($product.id)" 
              nowrap="X" class="shop">[add to cart]</a>
          $functions.tooltip("add", $product.id, "add 1 PC to cart")
        </td></tr>
      </table>			
    </div>
  #end	
</div>  
<div id="shop_catalog_cart">
  #include("smallcart.vm")
</div>                          
<div id="shop_next">
  <a href="javascript:show('cart')">
     <img src="example5/checkout.gif" border="0"/>
  </a>
</div>


<div id="shop_cart_header">
  <div style="padding-top: 2px">$I18N.cart.name</div>
</div>
<table>	
  <tr>	
    <td class="shop_cart_bold" width="200px">$I18N.cart.item</td>
    <td class="shop_cart_bold">$I18N.cart.quantity</td>
  </tr>
  #foreach($item in $cart.items)			
    <tr>
      <td class="shop_cart" width="200px">$item.product.name</td>
      <td class="shop_cart_bold">$item.quantity PC</td>
      <td class="shop_cart">
	     <a href="javascript:remove($item.product.id)" 
               class="shop" id="remove_$item.product.id">[remove]</a>
      </td>
      $functions.tooltip("remove", $item.product.id, "remove 1 PC from cart")
    </tr>
  #end 
</table>


<div id="shop_main_head">
  <span class="emphasis">$I18N.cart.header:</span>
</div>
<div class="shop_cart">
<table width="90%">	
  <tr>	
    <th class="shop_cart_head" width="75px"></th>	
    <th class="shop_cart_head" width="200px">$I18N.cart.item</th>
    <th class="shop_cart_head">$I18N.cart.quantity</th>
    <th class="shop_cart_head"></th>	
  </tr>
  #foreach($item in $cart.items)			
    <tr>	
      <td rowspan="2">
        <img border="0" height="50" width="50" 
                src="example5/$item.product.img" class="product"/>
      </td>
      <td class="shop_cart_bold" width="200px">$item.product.name</td>
      <td class="shop_cart_bold">$item.quantity PC</td>
      <td class="shop_cart">
         <a href="javascript:remove($item.product.id)" class="shop" 
               id="remove_$item.product.id">[remove]</a>
         </td>	
         $functions.tooltip("remove", $item.product.id, "remove 1 PC from cart")
    </tr>
    <tr>		
      <td class="shop_product_info" valign="top">$item.product.description</td>	
      <td></td>	
      <td></td>	
    </tr>	
  #end
</table>				
</div>
<div id="shop_next">
   <a href="javascript:show('address')">
      <img src="example5/checkout.gif" border="0"/>
   </a>
</div>


<div id="shop_main_head">
  <span class="emphasis">$I18N.address.header:</span>
</div>
<div id="shop_address">
<form name="Address">
<table cellpadding="2" cellspacing="7">	
  <tr>	
    <td class="shop_cart_bold">$I18N.address.name</td>
    <td class="shop_cart"><input type="text" name="name"/></td>
  </tr>
  <tr>	
    <td class="shop_cart_bold">$I18N.address.street</td>
    <td class="shop_cart"><input type="text" name="street"/></td>
  </tr>
  <tr>	
    <td class="shop_cart_bold">$I18N.address.city</td>
    <td class="shop_cart"><input type="text" name="city"/></td>
  </tr>
  <tr>	
    <td class="shop_cart_bold">$I18N.address.zip</td>
    <td class="shop_cart"><input type="text" name="zip"/></td>
  </tr>	
	
</table>	
</form>			
</div>
<div id="shop_next">
  <a href="javascript:show('complete')">
    <img src="example5/checkout.gif" border="0"/>
  </a>
</div>


<div id="shop_main_head">
  <span class="emphasis">Your Order:</span>
</div>
<div id="shop_catalog_content">		

<div class="shop_cart">
<table width="90%">	
  <tr>	
    <th class="shop_cart_head" width="75px"></th>	
    <th class="shop_cart_head" width="200px">ITEM</th>
    <th class="shop_cart_head">QUANTITY</th>
    <th class="shop_cart_head"></th>	
  </tr>
	#foreach($item in $cart.items)			
      <tr>	
        <td rowspan="2">
           <img border="0" height="50" width="50" 
                   src="example5/$item.product.img" class="product"/>
        </td>
        <td class="shop_cart_bold" width="200px">$item.product.name</td>
        <td class="shop_cart_bold">$item.quantity PC</td>
        <td class="shop_cart"></td>		
      </tr>
      <tr>		
        <td class="shop_product_info" valign="top">$product.description</td>	
        <td></td>	
      <td></td>	
     </tr>	
    #end
</table>				
</div>

<div id="shop_address">
<table cellpadding="2" cellspacing="7">	
  <tr>	
    <td class="shop_cart_bold">NAME</td>
    <td class="shop_cart">$address.name</td>	
    <td class="shop_cart_bold">STREET</td>
    <td class="shop_cart">$address.street</td>
  </tr>
  <tr>	
    <td class="shop_cart_bold">CITY</td>
    <td class="shop_cart">$address.city</td>
    <td class="shop_cart_bold">ZIP</td>
    <td class="shop_cart">$address.zip</td>
  </tr>	
	
</table>	

</div>

<br/>
<a href="javascript:initShop()">RESTART</a>
	
</div>


var context;
var toolTips = [];

function findProduct(id) {
	for (i in context.catalog.products) {		
		if (context.catalog.products[i].id == id) {
			return context.catalog.products[i];
		}
	}
	return null;
}	

function findItem(id) {
	for (i in context.cart.items) {		
		if (context.cart.items[i].product.id == id) {
			return context.cart.items[i];
		}
	}
	return null;
}	

function findItemIndex(id) {
	for (i in context.cart.items) {		
		if (context.cart.items[i].product.id == id) {
			return i;
		}
	}
	return null;
}	

function add(id) {
	initToolTips();
	var item = findItem(id);	
	if (item == null) {
		var product = findProduct(id);	
		context.cart.items[context.cart.items.length] = 
  { product : product, quantity: 1 };	
	} else {
		item.quantity = item.quantity + 1;
	}
	var html = v2js_smallcart(context);
	YAHOO.util.Dom.get('shop_catalog_cart').innerHTML = html;
	showToolTips();	
}

function remove(id) {
	var item = findItem(id);	
	if (item != null) {
		item.quantity = item.quantity - 1;
		if (item.quantity <=0) {
			var i = findItemIndex(id);
			context.cart.items.splice(i,1);
		}
		if (context.progress == 'catalog') {
			var html = v2js_smallcart(context);
			YAHOO.util.Dom.get('shop_catalog_cart').innerHTML = html;
		} else {
			var html = v2js_cart(context);
			YAHOO.util.Dom.get('shop_main').innerHTML = html;
		}
	}
	
}

function saveAddress() {
	context.address = { name : document.Address.name.value,
				street : document.Address.street.value,
				city : document.Address.city.value,
				zip : document.Address.zip.value };
}

function show(screen) {	
	if (context.progress == 'address') {
		saveAddress();
	}
	context.progress = screen;		
	showShop();
}

function initToolTips() {        
        toolTips = [];
    }

function showToolTips() {                
        for(var i=0;i<toolTips.length;i++) {
            var tt = new YAHOO.widget.Tooltip("tt" + toolTips[i].id, 
   { context: toolTips[i].id, text: toolTips[i].text, zIndex: 999} ); 
        }
    }

function showShop() {
	initToolTips();
	var html = v2js_shop(context);
	YAHOO.util.Dom.get('shop').innerHTML = html;
	YAHOO.util.Dom.get('shop').style.display = 'block';
	showToolTips();		
}


function initShop() {

	var handleSuccess = function(o){ 
		context = eval('(' + o.responseText + ')');		
		
		context.functions = new Object();
		
		context.functions.tooltip = function(id1, id2, text) {
			var id = id1 + '_' + id2;                
			var tt = { id : id, text : text };
			toolTips[toolTips.length] = tt;
			return '';			
		};
		
		showShop();
	}

	var requestHandler = { 
		success:handleSuccess
	};

	var request = YAHOO.util.Connect.asyncRequest('GET', 
				"example5/json_catalog.html", requestHandler); 
	
}

velocity2js

Docs

Examples

Developers

Links

Hosted by

Tiny Test Shop Source Code