Creating a shopping cart

Introduction

Please note that this tutorial is very informal. Please feel free to customize this to fit your needs. Actually it would be best if you did. There are many ways to do the same things, and some may be better than others. All that this is here for is to set you on the right track -- you need to fill in the blanks!

By now you should be able to connect to a database, be able to impliment a search, and then display the results in a browser. The next thing to be done is to create something so that a customer can store a variety of items. This can be done by creating a shopping cart. A shopping cart is simply a page is simply a page that displays the selected products that the customer wished to add to the shopping cart. So how can we store this information.

One way is have a string deliminated by special characters. The string will need to contain a reference to the product, and also a number specifing the quantity of the item. We can store this sting in many ways. We can store it in a session variable, a cookie on the clients machine, or in a field in a database. There are pro's and cons to each of these methods. A session variable is easily accessable and editable, but if the user has set his browser to not accept cookies then a session cannot start. Also the shopping cart will not be saved if the user ends their session, and then comes back to the site. A cookie will allow the shopping cart to be saved if the user leaves and then returns, but it is very inconvenient to change and access. A database would definately be the best method to store the shopping cart, but this would require some way of identying the user and this would be very inconvenient for customers. A database is easily accessable, and it does not require the user to enable cookies on their machine. So for your site an option to store the shopping cart on the server, if they do not have cookies enabled, would be a good thing, but as a default you should use a session variable since most users have cookies enabled.

The string would look something like this:

<item>,<quantity>|<item,<quantity>
32,4|29,1

In this example the customer would have two items in their shopping cart. They would have 4 of the product with the product id 32, and 1 of the product with the product is 29. The product id is just a number of string that is specific to each product.

Create the link to the shopping cart

So we will need to create a link from the results of the search page, or wherever we display products, to the shopping cart page. In this link we will need to provide the <item> and <quantity>. The link should look something like this:

 

 

<a href="shoppingCart.asp?productId=29&quantity=1>Penn Tennis Balls </a>

 

 

at the top of our shopping cart page we should first have something to access these variables:

 

<%

dim productId, quanitity

quantity = Request("quantity")

productId=Request("productId")

...

%>

 

Add to the Shopping Cart

now we should add this to our shopping cart

 

 

Session("shoppingCart") = Session("shoppingCart") &productId&","&quantity&"|"

 

 

Display the Shopping Cart

so by this method we will have the string being created which will hold items for our customer. Now we need to display these items. We can do so by dynamically creating the SQL query which will retieve the product information that we desire. It can be written in either VBScript or JavaScript. Here it is done in JavaScript.

 

<Script Language="JavaScript" RUNAT="server">

function createSQL(shopping_cart) {

    var output = "Select * from products where"

    var a = shopping_cart.split("|")

    for (i = 0; i < a.length; a++) {

        if (a[i] != null) {

            var b = a[i].split(",")

            if (i > 0) {

                output += " or "

            }

            output += " productId = "+b[0]

        }

    }

    return output

}

</Script>

 

So by using the string that this function will return we can query our database and retrieve a recordset with our products in it. Now we simply need to display that recordset. To use this recorset that I am about to you should include the file 'adovbs.inc'

 

<%

connectme = "Connection String to the Database"

Set objConn=Server.CreateObject("ADODB.Connection")

objConn.Open connectme

sql_temp = createSQL(Session("shoppingCart"))

Set ProductQuery=Server.CreateObject("ADODB.Recordset")

ProductQuery.cachesize=5

ProductQuery.CursorType = adOpenStatic

ProductQuery.open sql_temp,objConn

do until ProductQuery.EOF

    %>name is <%=ProductQuery("name")%><br>

    description is <%=ProductQuery("description")%><br>

    price is <%=ProductQuery("price")%><br><br>

loop

set ProductQuery = nothing

%>

 

Remove

That is the basic shopping cart. You can add things to it, but you can't delete things, which could turn out to be a problem. So you just have to write another function and add another link when you display each product. The function should take in a variable, which will be the <item> part, or unique identifier, and also the shopping cart, and it should return the new shopping cart without the item that you want to remove.. The function should go through each item in the shopping cart and see if the <item> is the same as the one that was passed in. if it is then you should not add it to the output string. Simple! The link that you should put in each product should look something like the following:

 

 

<a href="shoppingCart.asp?productId=29&remove=true">Penn Tennis Balls </a>

 

 

the function at the top should read like the following

 

<%

if Request("remove") = "true" then

    Session("shoppingCart") = removeItem(productId, Session("shoppingCart"))

elseif <should you add a product>

...

end if

 

Update Quantity

Now you would also need to add the ability to change quantities. The easiest way to do this is to simply put a textbox with the present quantity and also have an update button which will submit the textbox to 'shoppingCart.asp'. The method could either be POST or GET, it does not matter. This is a little trickier than deleting an item because you need to submit the form, but it is basically the same. Encapsulate each product with a form tag. add an update button whose type is 'SUBMIT' which will submit the productId, the quantity, and also some hidden input object so you know that you need to update the quantity. You will need to also write another function that is similar to the remove function. It will take in three variables, the shapping cart, the productId, and the quantity. It will go through each item, and if the <item> is the same as the productId (unique identifier or <item>) then replace the old quantity with the one that was passed into the function. At the top of the page simply check for the hidden input object and if it is there, then call your update function and update your shopping cart session string. Simple!

At the end of all this you will have a shopping cart that you can add, delete, and updaate quantities. Using these methods you can extend your shopping cart to many many other things. Feel free to impliment other things for extra credit. You may also change the methods for what we have done so far for extra credit (adding, removing, updating). Be creative -- there is hardly just one correct way!