Help Version: 2.12
Last Update: 01/10/01

HTML Store System Overview

The best way to understand how an HTML store system works is to think of the Shopping Cart as a separate program from your main web site pages. 

The main purpose of the QuikStore program is to allow users to select items to purchase, add them to a list we call the "cart", calculate the prices of those items, and also process the order with discounts, shipping costs and sales taxes applied to the purchase. However, all of these functions occur after the user has made a purchase selection. This is why we cannot stress enough that the "cart" process runs separately from the basic design of your web site.

To better understand this concept, let's look more closely at the shopping process for an HTML style store. We have labeled the following graphics below as "Web Pages" for your normal site pages, and "Shopping Cart" as shopping cart functions. These are divided by the dotted line down the middle.

The shopping cart html pages referred to below are pre-designed template pages found in the "cgi-bin/templates" folder on your site. Unless you changed the default installation path, these files can also be located in the C:\Quikstore\server_files directory on your PC. These are the files you should be editing to be uploaded to the server.

During the outline below, we will list the name of each template page like this: [view_cart.html]. That designates that this is one of the pre-designed Quikstore templates. Entries like this {store_front_page} are configuration file entries.


Step 1. Enter the Store, Browse to a product page, and add an item to the cart:

The user comes into your home page and then browses your store through standard, html web pages to preview your products. At this point, if they find something they would like to order, they click the "Add to cart" button to add this item to their list. This "list" is their virtual "Shopping Cart" that includes all of the items they want to purchase:

overview1.gif (2123 bytes)

Once the user clicks on the Add To Cart button on your page, you can set the system to either refresh back to the html page they came from using the redirect page [redirect.html], or display the "cart" page [view_cart.html]. The system is set to refresh back to the page by default. See "Setting Configuration Parameters" for more detail on this.

NOTE: The user can also preview the cart page by clicking on a View Cart button. See the linking examples in "Editing the Templates" for more information about how to create these types of links. 

For this instruction, we will assume that the cart page has been displayed. The user can now make several choices for navigation:


Step 2. Go back and look at more products: (optional)

This provides a way for the user to navigate back to where they came from, your product page.

This is done by selecting the "Product Page" button from the bottom of the cart page [view_cart.html]. The information for the "page" to go back to is supplied by hidden form fields on the product page they came from. When the View Cart page is displayed, the name of the previous page is picked up by the program and is inserted into the html code under the cart page automatically.

overview2.gif (2276 bytes)


Step 3. Go back to the Home Page: (optional)

This is done by selecting the "Home Page" button from the bottom of the cart page. The information for the home page name is set in the main configuration file {store_front_page}.

overview3.gif (3076 bytes)

At this point, notice how we are moving from your web site pages to the shopping cart system and back. Even though each part of the system is running separately, the QuikStore program provides a means of navigation between them.


Step 4. Delete Selected Items: (optional)

The delete items is a little different. This is strictly a shopping cart function. The program takes the input from the checkbox that the user has selected and opens up their shopping cart list. When it finds a match for the selected item, it removes it and then re-displays their shopping cart. If they delete all items from their cart, it will display an error indicating that they deleted all of their items in the cart [error_messages.html]. It also provides some instruction on what to do and allows them to choose between going back to the product page or the home page. The words used in the instructions for these errors can be set in the language configuration file. This is really just a means of navigation for the user.

overview4.gif (4621 bytes)


Step 5. Change Selected Quantities: (optional)

The Change quantities works in a similar fashion. The user enters a new quantity and then clicks the "Change Quantities" button. The program takes the input from the the Quantity input box for the selected item and opens up their shopping cart list. When it finds a match for the selected item, it changes the quantity and total price for that item and then re-displays their shopping cart. Should the user accidentally type a non-numeric value, the program will display an error indicating that they have entered an incorrect quantity value and provide instructions on how to correct it. The words used in the instructions for these errors can be set in the language configuration file.

overview5.gif (4769 bytes)


Step 6. Go to Checkout

The next available function is to go to the checkout stand. The function directs the user to select how they want their purchase shipped [shipping.html]. We must gather this information before we go to the order form in case we want our shipping costs based on a user selected shipping type such as "Priority Mail". We also get the "State" value so we can calculate sales tax. This is where we gather all of the required information for final order calculations.

overview6.gif (4605 bytes)


Step 7. Enter Personal Information:

Now that we have the required information to do the calculations, we display the totals to the user and request their personal information. This information may include such things as bill to name and address, ship to address, and payment information. By using the "paytype" option in the shipping.html page, you can have multiple order forms for credit cards, checks, purchase orders, etc. 

overview7.gif (4937 bytes)


Step 8. Process The Order:

When the user clicks the "Process Order" button, the Shopping cart does several things:

  1. Logs the order (in the cgi-bin/orders directory)
  2. Sends Customer Email
  3. Sends Store Owner email
  4. Displays the Final Receipt Page [receipt_page.html].

overview8.gif (6897 bytes)

Again, Notice how we are only doing shopping cart functions at this point.


Step 9. Return User to Home Page: (optional)

Now, you can end the process here or send the user back to your home page, it's up to you. A link {web_site_url} at the bottom of the [receipt_page.html] template allows the user to return back to your home page.

Note: If the user tries to refresh the final receipt page, the program will check to see if the order has already been processed. If so, a message will be displayed directing them back to the home page. The link in this message is set in the main configuration file under {web_site_url}. 

overview9.gif (7402 bytes)

 

Summary:

For an HTML style store, such as one built in Microsoft FrontPage, You display items to the shopper by using standard HTML  pages. These pages pass information TO the shopping cart program to allow the user to add items to their shopping cart. The shopping cart may then provide a means of navigation for the user, or allow them to finalize their order using one or all of the shopping cart system functions as shown above. In any event, when an HTML style of store is created, the shopping cart system only interacts with your web site pages for navigation. Any other events are run specifically by the shopping cart itself.

Click Here to go to Form Code Details.


Copyright 1997-2003 iSoft-Solutions, inc.