Creating a multiple add to cart option

[nwright77]

Hello everyone,

I have a question for all you asp geniuses out there. I am relatively new to asp and working on a shopping cart for a client. everything is runningly smoothly, except for one thing. My client has different sizes and colours for one product and i would like to know how to go about creating the code for this kind of operation. At this very moment in time i have an variation option which gives a variation of the item, however as i have 50 variations to include for one product alone, a row of options would look silly! what i want to do is create a table grid (e.g. product sizes on the top row, colours on the left-side row) and the user simply types in the number they want of one particular product in the appropriate box. once they have chosen their items the 'add to cart' adds the total items up and puts them into the shopping cart. If anyone could point me in the right direction I would greatly appreciate it.

 

[Sheco]

This seems more like a database problem than an ASP issue... It should be fairly simple to implement once you figure out exactly how it should be handled. The tricky part will be deciding the best way to skin the cat.

So I guess the first question is, does each possible combination of features have a unique "Product ID" code?

 

[nwright77]

Hi,

No there is only one id product code for each item, there are 3 sizes and 3 colours for one range, and 5 sizes and 10 colours for the other range!

based on the admin area i have, each product variation is assigned a unique key from the database so they are associated with only one product.

I am using access as the database as the cart is only being used for ordering and nothing else.

 

[Tarwn]

If each variation is assigned a unique key, then I'm not seeing where there would be a problem in having multiples in the shopping cart. As long as you use that unique key as the key you add to your shopping cart, then I don't see why you would have any issue?

Am I missing something here?

-T

 

[nwright77]

Hi,

thanks for the response. here is the situation. i have option groups that result in a drop down menu. in my admin area, i name the option group drop down name and then underneath them i add the different variations. for example, one option name is red and underneath this option name i have small, medium, large, etc. i want to be able to separate them in their own right without being attached to an option menu. in other words, i want a large-red, small-red, medium-red, placed within a table grid. I was trying to figure out how to change the option group to individual products in the back end, then allow customers to choose how many of each product they want before hitting the 'add to cart' button. i thought if i remove the option group name and assign description names to each product field, as well as assigning a quantity field that might work. as you can tell i'm not very experienced with this language but i like throwing myself in at the deep end, so to speak.

 

[nwright77]

This one is a bit more detailed, i have included the function i have been talking about.

I want to be able to call product items to a specific place
on the product page.

The following code is what is on there at the moment:

''''<%=getOptionsGroups(pIdProduct)%>''''

this simply gives me three or four option drop down menus which are variations of the product; size, colour etc, which i find unsightly.

This is the function which brings up the option menus:

Function getOptionsGroups(pIdProduct)

dim pIdOptionGroup, htmlToPrint, rsTempGEO1,
rsTempGEO2

htmlToPrint=""

'''' get optionsGroups assigned

mySQL = "SELECT idOptionGroup FROM
optionsGroups_products WHERE idProduct=" & pIdProduct

call getFromDatabase (mySql, rsTempGEO1,
"itemFunctions")

'''' iterate through optionsGroups
do while not rsTempGEO1.eof

pIdOptionGroup = rsTempGEO1("idOptionGroup")

'''' get options inside current optionGroup
mySQL = "SELECT options.priceToAdd,
options.optionDescrip, options.idOption,
optionsGroups.optionGroupDesc, type, options.imageUrl
FROM optionsGroups, options_optionsGroups, options
WHERE optionsGroups.idOptionGroup=" &
Cstr(pIdOptionGroup) & " AND
optionsGroups.idOptionGroup=options_optionsGroups.idOptionGroup
AND options.idOption=options_optionsGroups.idOption
ORDER BY options.optionDescrip"

call getFromDatabase (mySql, rsTempGEO2,
"itemFunctions")

pType =lcase(rsTempGEO2("type"))
pOptionGroupDesc =rsTempGEO2("optionGroupDesc")

htmlToPrint=htmlToPrint&"<br><b>"&
pOptionGroupDesc&"</b><br>"

if pType="d" then
htmlToPrint = htmlToPrint & "<select
name=''''idOptions" & pIdOptionGroup & "''''>" & vbCrLf
end if

if pType="m" then
htmlToPrint = htmlToPrint & "<select
name=''''idOptions" & pIdOptionGroup & "'''' multiple>" &
vbCrLf
end if


'''' drop down optionals

do while not rsTempGEO2.eof

pImageUrl =rsTempGEO2("imageUrl")

if pType="d" or pType="m" then
htmlToPrint=htmlToPrint &"<option value=''''" &
rsTempGEO2("idOption") & "''''>"
end if

if pType="r" then
htmlToPrint=htmlToPrint &"<input type=radio
name=idOptions" & pIdOptionGroup & " value="
&rsTempGEO2("idOption")& ">"
end if

if pType="c" then
htmlToPrint=htmlToPrint &"<input type=checkbox
name=idOptions" & pIdOptionGroup & " value="
&rsTempGEO2("idOption")& ">"
end if

htmlToPrint=htmlToPrint &
rsTempGEO2("optionDescrip")

'''' show price only if >0

if rsTempGEO2("priceToAdd") > 0 Then
htmlToPrint=htmlToPrint &" "&pCurrencySign &
money(rsTempGEO2("priceToAdd"))
End If

if pType="d" or pType="m" then
htmlToPrint=htmlToPrint &"</option>" & vbCrLf
end if

if pImageUrl<>"" then
htmlToPrint=htmlToPrint & "<img src=''''catalog/"
&pImageUrl& "''''>"
end if

if pType="r" or pType="c" then
htmlToPrint=htmlToPrint &"<br>" & vbCrLf
end if

rsTempGEO2.movenext
loop

if pType="d" or pType="m" then
htmlToPrint=htmlToPrint &vbCrLf & "</select>"
end if

htmlToPrint=htmlToPrint &"<br>"

rsTempGEO1.movenext
loop

getOptionsGroups=htmlToPrint
End Function

the downside to this function is when the customer chooses what they want from the three mmenus, determines the quantity (say 15) and then hits the ''''add to cart'''' button, the cart multiplies the items chosen by 15, however the customer may only want 10 of the first, 5 of the 2nd and 3 of the third.

I want to be able to call each individual variation (ie blue large, red small, yellow medium) to a table grid cell and allow the customer to indicate how many of each item they want before thay hit the ''''add to cart'''' button.

Is there a way of modifying the function or do i need to create a whole new function? either way i''''m not to sure where to start. any help would be much appreciated

 

[Tarwn]

Ok, perhaps the coffee isn't working so well this morning. I'm trying to seperate what your applicaiton is doing right now and what you are trying to achieve.

It would be helpful if you could give us a link to look at, even if it is just a mockup of the page without the backend database code.


If I get the basic premise correct then you want to be able to:

1) Allow a user to select a product
2) Allow the user to then select combinations of size and color
3) Allow them to specify quantities for each combination

Now it also seems as if you are trying to make the simplest selection method for several combinations in a single page. I'm not sure that allowing the user to select several combincations in the same page is necesarally the easiest method for the user (it's obviously not the easiest method for us). One possibility would be to have a page that lists the product and a table of the possible colors with each row containing a dropdown for size and textbox for quantity. This would allow the user to specify multiple combinations and quantities fairly easily.
This method could possibly make things easier on you as well, since you could use the unique color-size-product id for the size dropdown options on each row (since each row is a specific color for a specific product).

This solution would be similar to your idea of a grid but would take up less space and probably be easier on the end user.

-T

 

[nwright77]

Hi Tarwn,

you have hit the nail on the head with this, takes forever for me to try and explain thing. this is something that the client wants this 'grid' to look like

blue red yellow green pink lilac
s 2
m 3
l
xl 4
xxl 4
Total = 13

so, in effect, the customer can order 3 medium yellow, 4 xl red, etc.

I have added a link to give you an idea of what the client wants the options to look like

http://www.purplewebsolutions.com/test.htm

the product, say a t-shirt, that is called to the page has different variations.

hope this helps, i just don't now where to start on this one.

 

[Tarwn]

Ok, few more questions real quick:

1) Is it always size and color for the two axes?

2) Is the database structure set in stone?


I hate to make too many assumptions, but assuming the axes are always color and size and also assuming we can design or redesign the database, then I think I would look at doing something like:

Database Design:
Product Table:
product_id - autonumber
product_name - text
product_image - text - url to image
product_desc - text
plus any addtl fields you need

Color Table:
color_id - autonumber
color_name - text
color_html - text to hold the color value as a #RRGGBB value

Size Table:
size_id - autonumber
size_name - text

We now have two choices, we can either create a single table to hold a product id, color id, and size id or we can create two seperate tables. This is dependant on how products will be available. If we need to be able to say we sell red, white, and green shirts in sizes XL and M then two tables is fine (ie, one record for every product/size combination and one record for every product/color combination). If we need to be able to say we offer the combinations listed above except green in M, then we would be better off with one table (ie, a single record for every product, color, size combination)

ProductInstance Table:
prodinst_id - autonumber
product_id - number - key to product record
color_id - number - key to color record
size_id - number - key to size record

OR

ProductColor Table:
prodcolor_id - autonumber
product_id - number - key to Product record
color_id - number - key to Color record

ProductSize Table:
prodsize_id - autonumber
product_id - number - key to product record
size_id - number - key to Size record

Admin tool logic:
First you would need three simple pages that allow the user to add/modify a product, a color, or a size. Those would be fairly straightforward.
The complicated one would be the one to handle the color/size/product combinations. This obviously depends on which table layout you use.
If you do two seperate tables then you could offer two sets of checkboxes on the Product admin page, one to select colors and one to select sizes. Updating these values should be fairly easy since you have the product information on the page and would just need to add or delete records from the ProductSize and ProductColor tables.

The best way for the one table method would probably be to do something similar to the grid that you want to make for the user, except with checkboxes to denote whether a product is available in a size/color. That would look something like:

<%
Option Explicit

'assume this page was passed a product_id in the querystring
Dim product_id
product_id = Request.QueryString("product_id")
If product_id = "" Then
   Response.Write "You have not selected a valid product, please return to some other page...etc etc, this is an error message"
   Response.End
End If

Dim obj_conn, str_sql
Dim rs_prodinst, arr_prodinst
Dim rs_color
Set obj_conn = Server.CreateObject("ADODB.Connection")
obj_conn.Open "my connection string"

'we need all the colors for the top of the table and we need all combinations of color and size, as well as the prod_inst if it is available
str_sql = "SELECT color_id, color_name, color_html FROM Color ORDER BY color_name"
Set rs_color = obj_conn.Execute(str_sql)

str_sql = "SELECT Color.color_id, Size.size_id, size_name, prodinst_id " & _
          "FROM (Color, Size) LEFT JOIN ProductInstance ON ProductInstance.color_id = Color.color_id AND ProductInstance.size_id = Size.size_id AND ProductInstance.product_id = " & product_id & " " & _
          "ORDER BY size_name, Color.color_name"
'convert to an array for faster processing
arr_prodinst = rs_prodinst.GetRows()
Set rs_prodinst = Nothing

If Not rs_color.EOF The rs_color.MoveFirst

'start an editing form - obviously this needs to be formatted nicely and prettied up but this is just an example
%>
<form method="POST" action="somesubmissionpage.asp">
<table>
	<tr>
		<th></th>
		<%
		'output color column names
		Do Until rs_color.EOF
		Response.Write "<th style=""background-color: " & rs_color("html_color") & """>" & rs_color("color_name") & "</th>"
		rs_color.MoveNext
		Loop
		%>
	</tr>
	<%
	'now output entries for every color/size combination with a checkbox
	Dim row_ctr, last_size
	For row_ctr = 0 to UBound(arr_prodinst,2)
		'if the size has changed it's time to start a new row
		If arr_prodinst(1,row_ctr) <> last_size Then
			Response.Write "<tr><th>" & arr_prodinst(2,row_ctr) & "</th>"
			last_size = arr_prodinst(1,row_ctr)
		End If

		'output a checkbox for this color/size combination
		Response.Write "<td><input type=""checkbox"" name=""size_color"" value=""" & arr_prodinst(1,row_ctr) & "_" & arr_prodinst(0,row_ctr) & """"
		'if there is a prodinst_id then check the box to show it's already selected in the database as a valid combination - this may not be a valid way to check, I'm feeling a little rusty today
		If arr_prodinst(3,row_ctr) <> "" Then Response.Write " checked"
		Response.Write "></td>" 'end the checkbox and column

		'if this is the last entry in the array, end the row
		If row_ctr = UBound(arr_prodinst,2) Then
			Response.Write "</tr>"
		ElseIf arr_prodinst(1,row_ctr+1) <> last_size Then
			'if the size is going to change for the next record, end this row
			Response.Write "</tr>"
		End If
	Next

	'cleanup the database stuff
	Set rs_color = Nothing
	obj_conn.Close
	Set obj_conn = Nothing
   %>
</table>
</form>

As you can see this is fairly complicated. Actually submitting the changes will be as well. Personally I'm not sure I wouldn't be talking to the customer about simplifying their needs, but hey, we've come this far might as well keep going.

In fact this has gotten to the point where it is complicated enough that I would have to seriously sit down and spend some time on it rather than just trying to write the whole thing on the fly. Your answers to the two questions I had above will help and I'll check back a little later as I have to take a break and get some work done

-T

PS: Sometimes I wonder why I don't make buckets of money (I'm sure someone will post back to explain it though)

 

[nwright77]

Now before we go into writing code, i have an add and a modify product page.

i will add the code from my add products page so it gives you an idea of the structure for one of the variations:

<table>
<tr>
<td>Variation 1</td>
<td colspan=2>Drop down name <input type="text" name="optionGroupDescrip1" value="" size=20></td>
</tr>

<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>

<tr>
<td></td>
<td colspan=3>Description
<input type="text" name="optionDescrip1" value="" size=20 />
Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>

<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td></td>
<td colspan=3>Description <input type="text" name="optionDescrip1" value="" size=20> Price <%=pCurrencySign%><input type="text" name="priceToAdd1" value="0.00" size=6></td>
</tr>
<tr>
<td colspan=4>&nbsp;</td>
</tr>
</table>

as i stated earlier (probably not in this way though) I have 2 manufacturers, the first has 9 different products, each one has 3 different sizes and 3 different colours. the 2nd manufacturer has 6 different products, each product has 5 different sizes and 10 colours! phew!

based on the files i have for this shopping cart, there are only 5 files that enable the query to make the call, in the backend:

add a product form, add a productexec, modify a product form, modify a productexec, and an itemsFunction file.

the code in the storefront that executes this is

<%=getOptionsGroups(pIdProduct)%>


Now also i stated that I am using access as the database

in answering the first two questions, it will always be size and colour for the two axis

I can't guarantee that the database is set in stone as it is early days for my client

thank you very much for your advice so far.