Visual InterDev

Shopping Cart Sample

See Also      Tasks

This sample displays a list of products and allows the user to select items to be placed into a "Shopping Cart" where they are held until the order is complete. Items can be removed and quantities can be changed.

Behind the Scenes

This sample uses the following ten files:

• ShopCart.htm sets the HTML frameset.
  
  
• SCMain.htm is the default page for the "Main" frame.
  
  
• SCMenu.htm displays the product search options.
  
  
• Products.asp displays the results of the search and allows an item to be selected.
  
  
• AddCart.asp displays information about the item selected from Products.asp and allows a quantity to be set.
  
  
• SCUpdate.asp saves the selected item and quantity into the ShopCart table.
  
  
• ViewCart.asp displays the current contents of the shopping cart.
  
  
• SCDelete.asp deletes a single item from the cart.
  
  
• SCClear.asp clears the entire contents of the cart.
  
  
• SavOrder.asp moves the contents from the ShopCart table to the Orders table as a completed order.

SCMenu.htm displays a drop-down box listing the different product categories to search for. After selecting a category and pressing the "Search" button, the Products.asp file displays the selected category of products in the "Main" frame.

Products.asp uses the Recordset design-time control to query the Products table for items matching the selected category. The contents are displayed in an HTML table using the Grid design-time control. The product name links to the AddCart.asp file to give more information about the selected product.

AddCart.asp displays the product name, quantity per unit, and the price of each unit. A Recordset control is used to determine if the selected item is already in the shopping cart. The intQuantity variable is set to the appropriate value if the item is already in the cart:

function DTCRecordset1_ondatasetcomplete() {
      if (DTCRecordset1.getCount() == 1) {
         intQuantity = DTCRecordset1.fields.getValue("Qty");
         InCart = true;
      }
}

A text box is displayed to allow the user to adjust the number of units to add to the shopping cart. If this item is already in the cart, the user is prompted to change the quantity of items already in the cart:

<%If InCart then%>
   You currently have <b><%=intQuantity%></b> in your cart.<br>
   Please enter the new quantity: <input NAME="intQTY" TYPE="Text" VALUE="<%=intQuantity%>" SIZE="5"><br>
   <input TYPE="Hidden" NAME="InCart" VALUE="1">
<%Else%>
   Units to order: <input NAME="intQTY" TYPE="Text" VALUE="<%=intQuantity%>" SIZE="5"><br>
   <input TYPE="Hidden" NAME="InCart" VALUE="0">
<%End If%>

After the quantity is set, the information is posted to SCUpdate.asp to save the information into the ShopCart table. After saving the information, SCUpdate.asp redirects the user to the ViewCart.asp to view the shopping cart contents.

ViewCart.asp uses the Recordset and Grid controls to output the contents of the shopping cart for this user. The product name, quantity ordered, price per unit and the total charge for each item are displayed in an HTML table generated by the Grid control.

Next to each item there are two links that allow the user to edit the item (change it's quantity) or remove the item from the cart. If the item is to be edited, the user is redirected back to the AddCart.asp to change the quantity. If the item is to be deleted, the link posts the information to SCDelete.asp.

SCDelete.asp uses the Recordset control to select the appropriate record from the ShopCart table and delete it. After the record is deleted, this ASP redirects back to the ViewCart.asp page to see the current status of the shopping cart.

There are two other buttons on the bottom of the page when viewing the contents of the shopping cart with ViewCart.asp. The first button will clear the entire contents of the cart by calling SCClear.asp. SCClear.asp will then delete all the records for this user and redirect back to the main page to start all over again. The second button on the bottom of the page will call SavOrder.asp to finalize the order.