|
|
One part of the online shopping cart functionality that is not required, but is often expected, is the ability to view the contents of the cart. Before you can accomplish this functionality, however, you need to figure out how to get the item data out of the cookie file. If you are using the item format presented in the previous section, the following two functions would work:
function getItemName( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split(" ,")[0]);
}
else return( "" );
}
function getItemPrice( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split( "," )[1] );
}
else return( "" );
}
These two functions are identical, except that the first one gets the item's description and the second one gets the cost of the item. After getting the value portion of the name=value pair from the cookie file, the two functions split it using a comma as a delimiter to return either the first or the second item in the array. After you write those two functions, displaying the cart's contents becomes an exercise in using for loops:
<html>
<head>
<title>Center Park View - Cart</title>
<script language="JavaScript">
<!--
function getCookieValue( name )
{
var c = document.cookie;
var begin = c.indexOf( name );
if( begin < 0 ) return( "" );
begin += name.length + 1;
var end = c.indexOf( ";", begin );
if( end == -1 ) end = c.length;
return( c.slice( begin, end ) );
}
function getItemName( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split( "," )[0] );
}
else return( "" );
}
function getItemPrice( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split( "," )[1] );
}
else return( "" );
}
// -->
</script>
</head>
<body>
<b><font size="6">Center Park School Store -</font></b>
<font size="4">for all your school paraphernalia needs</font><br><br>
<form>
<table width="100%" border="2">
<script language="JavaScript">
<!--
for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ )
{
document.write( "<tr><td>" );
document.write( getItemName( "item" + i ) + "</td><td>" );
document.write( "$" + getItemPrice( "item" + i ) );
document.write( "</td></tr>" );
}
// -->
</script>
<tr><td colspan="3" align="center">
<input type="button" value="Keep Shopping"
onClick="JavaScript: document.location='Store.html';">
<input type="button" value="Check Out"
onClick="JavaScript: document.location='CheckOut.html";">
</td></tr>
</table>
</form>
</body>
</html>
Sometimes a shopper may change his mind about purchasing an item, and as he probably wouldn't appreciate a "you touched it, you bought it" policy, it is a good idea to provide a way for him to remove items from his shopping cart. Like any useful functionality, this problem is best solved with a function. Here is one that does exactly what you need:
function removeItem( name )
{
document.cookie = name + "=;";
document.location = document.location;
}
Instead of trying to remove any trace of the item from the cookie file, this function removes the description and price from the file. This essentially removes the value part of the name=value pair. Because the item has not been removed completely from the shopping cart, you need to provide an extra check while displaying the cart so that empty items are not shown.
<script language="JavaScript">
<!--
for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ )
{
if( getItemName( "item" + i ) != "" &&
getItemPrice( "item" + i ) != undefined )
{
document.write( "<tr><td>" );
document.write( getItemName( "item" + i ) + "</td><td>" );
document.write( "$" + getItemPrice( "item" + i ) );
document.write( "</td></tr>" );
}
}
// -->
</script>
The if statement nested in the for loop checks to make sure that the item has not been removed from the cart and only displays the item if it still has its description and price.
The only task remaining in order to make the removal of items possible is a button that, when pushed, calls the removeItem() function with the appropriate item. Here is a complete example that contains buttons to do just that:
<html>
<head>
<title>Center Park - View Cart</title>
<script language="JavaScript">
<!--
function removeItem( name )
{
document.cookie = name + "=;";
document.location = document.location;
}
function getCookieValue( name )
{
var c = document.cookie;
var begin = c.indexOf( name );
if( begin < 0 ) return( "" );
begin += name.length + 1;
var end = c.indexOf( ";", begin );
if( end == -1 ) end = c.length;
return( c.slice( begin, end ) );
}
function getItemName( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split( "," )[0] );
}
else return( "" );
}
function getItemPrice( item )
{
var c = getCookieValue( item );
if( c )
{
return( c.split( "," )[1] );
}
else return( "" );
}
// -->
</script>
</head>
<body>
<b><font size="6">Center Park School Store -</font></b>
<font size="4">for all your school paraphernalia needs</font><br><br>
<form>
<table width="100%" border="2">
<script language="JavaScript">
<!--
for( i = 1 ; i <= parseInt( getCookieValue( "items" ) ) ; i++ )
{
if( getItemName( "item" + i ) != "" &&
getItemPrice( "item" + i ) != undefined )
{
document.write( "<tr><td>" );
document.write( getItemName( "item" + i ) + "</td><td>" );
document.write( "$" + getItemPrice( "item" + i ) +
"</td><td align='center'>" );
document.write( "<input type='button' value='Remove' " +
"onClick='JavaScript: removeItem( \"item" +
i + "\" );'>" );
document.write( "</td></tr>" );
}
}
// -->
</script>
<tr><td colspan="3" align="center">
<input type="button" value="Keep Shopping"
onClick="JavaScript: document.location='Store.html';">
<input type="button" value="Check Out"
onClick="JavaScript: document.location='CheckOut.html';">
</td></tr>
</table>
</form>
</body>
</html>
|
|