home  ECOMMERCE NETSHOP  : VI Cart Checkout 

netShop
VI . Cart Checkout

After browsing your products and selecting those which they will purchase, your customers will find themselves at the checkout portion of your cart. Here your customers review the products that they have selected to purchase. This area also allows the customer to select tax options and modify the quantity of the items they are purchasing.

Customer Checkout - checkout.shtml

At first glance, the checkout.shtml page looks very much like the primary catalog page main.shtml. In essence, the two pages do perform similar duties. Where main.shtml creates a product table with all of the available products in it, checkout.shtml creates a product list containing only those products that are in the customer's shopping cart.

By default, here is what the checkout.shtml page looks like:

01
02
03
04
05
06
07
08
09
10

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<title>Shopping Cart - Checkout</title>
<script src="cart.js"></script>
<!-- this is important; it fixes a bug in MSIE -->
<meta http-equiv="pragma" content="no-cache">
</head>
<body>
<h1>Cart Contents - Checkout</h1>
<form name="mycart" action="cart.cgi?update-cart:mycart
&FILTERSTRIP=^shoppe_&set-cookie:tax=$tax" method="POST">
<center>
<table border="1">
	<tr>
		<td>&nbsp;</td>
		<td>Product ID</td>
		<td>Total (US)</td>
		<td>Name of item</td>
		<td>&sbsp;</td>
	</tr>
<!--#exec cgi="cart.cgi?catalog-cart:mycart=list-checkout.html" -->
</table>
</center>
Subtotal: <!--#exec cgi="cart.cgi?ficalc:sum(mycart)&FORMAT=.price" --><br>
Sales tax:
<!-- remember that if you change the tax listings, you must also
 change the default tax on index.html and nocookie.html -->
<select name="tax">
<option <!--#exec cgi="cart.cgi?is-equal:tax=0.05&true=SELECTED&false=*" --> value="0.05">Maryland
<option <!--#exec cgi="cart.cgi?not-equal:tax=0.05&true=SELECTED&false=*" --> value="0.00">Out of state
</select>
<input type="submit" value="Update Cart">
<br>
Total: <!--#exec cgi="cart.cgi?ficalc:(sum(mycart)*tax)+sum(mycart)&FORMAT=.price" --><br>
<hr>
If you would like to order the above item(s), click <a href="order.shtml">here</a>.<br>
Go <a href="main.shtml">back</a>
</form>
</body>
</html>

Lines 12-21 work with list-checkout.shtml to create the table for the product list. As list.html is a template for main.shtml, list-checkout.html acts in a similar fashion for your checkout.shtml page.

The next line of note is 23. This line uses a function of the cart.cgi called ficalc to determine the sub total for the products in the cart. As seen again on line 32, this cart function is used everywhere prices need to be calculated.

Next, we have the code that generates a drop-down menu. This drop-down is used to change the tax rate that will be applied to the total. If you have changed the default tax value set on the index.html and nocookie.html pages, you must also modify this area of checkout.shtml. For example, if you changed the global tax vale from it's default 5% (0.05) to 7.25% (0.0725) you'd have to change lines 28 and 29 to this:

<option <!--#exec cgi="cart.cgi?is-equal:tax=0.0725&true=SELECTED&false=*" --> value="0.0725">Illinois
<option <!--#exec cgi="cart.cgi?not-equal:tax=0.0725&true=SELECTED&false=*" --> value="0.00">Out of state

Including Other Global Values

If you've added other global values to your cart, i.e. a flat shipping rate, there are a few changes to need to be made to this page to ensure that these values:

For example, let's add a flat shipping rate of $5.00 for products shipped within the US. First, to allow your customer the ability to change this shipping value, include the following code in your checkout.shtml:

Shipping:
<select name="shipping">
<option <!--#exec cgi="cart.cgi?is-equal:shipping=500&true=SELECTED&false=*" --> value="500">Shipping in the US - $5.00
<option <!--#exec cgi="cart.cgi?not-equal:tax=500&true=SELECTED&false=*" --> value="1000">Shipping outside the US - $10.00
</select>

Next, to ensure the new variable(s) are included in your customer's total shown on this page, line 32 must be modified. Adding other values to the equation is pretty simple as shown below:

Total: <!--#exec cgi="cart.cgi?ficalc:(sum(mycart)*tax)+sum(mycart)+shipping&FORMAT=.price" --><br>

Setting Up For SSL

By default, the cart's ordering process is set up to save your orders directly on your server. Although this is more secure than sending the orders via email, this is still not the best option for protecting your customers sensitive data. Instead, your ordering process should be configured to take advantage of the free Secure Sockets Layer (SSL) account that comes with your hosting account. Although the ordering page, order.shtml, collects your customer's data, you must make the transition from non-ecrypted to encrypted data transmission on checkout.shtml.

As netShop uses cookies to manage the contents of your customer's cart as well as other values such as tax and shipping information, the transition from non-SSL to SSL must make arrangements for this data. The IC Tech. Ref. Document Passing Cookie Data Through SSLServer.com details the steps in this process.

As for the modifications that need to be made to checkout.shtml for this transition, remove lines 34 and 35 and insert the following after line 36:

<form method="POST" action="https://sslserver.com/DOMAIN-NAME/PATH-TO-CART-DIRECTORY/
cart.cgi?link-to=https://sslserver.com/DOMAIN-NAME/PATH-TO-CART-DIRECTORY/order.shtml
&set-cookie:mycart=<!--#exec cgi="cart.cgi?get-cookie:mycart" -->
&set-cookie:tax=<!--#exec cgi="cart.cgi?get-cookie:tax" -->">
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td align="center">
			<div class="mid">
			<input type="button" onClick="history.go(-1);" value="Continue Shopping">
			<input type="submit" value="Order These Products">			
			</div>
		</td>
	</tr>
</table>
</form>

Simply replace the above text in bold with your information. Note that if you have set other cookie data or added other global values to your cart, you must include them like so:

<form method="POST" action="https://sslserver.com/DOMAIN-NAME/PATH-TO-CART-DIRECTORY/
cart.cgi?link-to=https://sslserver.com/DOMAIN-NAME/PATH-TO-CART-DIRECTORY/order.shtml
&set-cookie:mycart=<!--#exec cgi="cart.cgi?get-cookie:mycart" -->
&set-cookie:tax=<!--#exec cgi="cart.cgi?get-cookie:tax" -->
&set-cookie:shipping=<!--#exec cgi="cart.cgi?get-cookie:shipping -->">

To read about the modifications you must make to your order form to use SSL, please read the SSL-enabled Order Process section of the IC Tech. Ref. Document: netShop - VII. Ordering.

Product Template - list-checkout.html

Just as main.shtml and checkout.shtml resemble each other, so do list.html and list-checkout.html. Like the product template page for the primary catalog page, list-checkout.html holds any formatting and cart function code for each of the products that appear on this page.

01
02
03
04


05

06


07
08
09
10
11
12
<!-- This file is used by checkout.shtml and cart.cgi to help construct the product table. -->
<tr>
	<td>
		<a href="cart.cgi?put-another:mycart={id}" onClick="put_another('mycart', '{id}');
		 document.forms.mycart['shoppe_{id}'].value = count_in_cart('mycart', '{id}');
		 return false;">Add</a>
		<input name="shoppe_{id}" type="text" size="2" value="{qty}"
		 onChange="set_count('mycart', '{id}', this.value);">
		<a href="cart.cgi?remove-one:mycart={id}" onClick="remove_one('mycart', '{id}');
		 document.forms.mycart['shoppe_{id}'].value = count_in_cart('mycart', '{id}');
		 return false;">Remove</a>
	</td>
	<td>{id}</td>
	<td>{&format ".price" total}</td>
	<td>{name}</td>
</tr>

As list-checkout.html and checkout.shtml work together to create the product table for this area, any changes to the layout must occur on both of these pages.

Related Items

Email and Web Hosting by Internet Connection 2004-2009 ©
Contact Us