- Code: Select all
function AddOneOfManyToCart(formToUpdate)
{
switch( formToUpdate.PRODUCTSELECTOR[formToUpdate.PRODUCTSELECTOR.selectedIndex].value ) {
case '1':
formToUpdate.PRICE.value="10.00";
formToUpdate.NAME.value=" 2 panel 1/0, 1/0";
formToUpdate.ID_NUM.value="2pp1/0, 1/0";
formToUpdate.SHIPPING.value="0.00";
break;
case '2':
formToUpdate.PRICE.value="13.00";
formToUpdate.NAME.value="2 panel 1/1, 1/1";
formToUpdate.ID_NUM.value="2pp1/1, 1/1";
formToUpdate.SHIPPING.value="0.00";
break;
default:
alert('Please select a product');
return false;
}
AddToCart(formToUpdate);
}
</script>
I had a catharsis... or an epiphany... or heartburn, not sure which...
I couldn't do 20 or thirty pages like this, especially since some of the pages had over 50 cases to set up.
There had to be a better way.
After some thought, I came up with this solution.
Use this code in place of the above code:
- Code: Select all
<SCRIPT>
function AddOneOfManyToCart(formToUpdate)
{
selectedObj = formToUpdate.PRODUCTSELECTOR[formToUpdate.PRODUCTSELECTOR.selectedIndex];
nameVal = selectedObj.getAttribute("name");
if (nameVal == "NOTHING") {
alert('Please select a product');
return false;
}
formToUpdate.NAME.value = nameVal;
costVal = selectedObj.getAttribute("cost");
formToUpdate.PRICE.value = costVal;
id_numVal = selectedObj.getAttribute("id_num");
formToUpdate.ID_NUM.value = id_numVal;
shippingVal = selectedObj.getAttribute("shipping");
formToUpdate.SHIPPING.value = shippingVal;
switch( formToUpdate.PRODUCTSELECTOR[formToUpdate.PRODUCTSELECTOR.selectedIndex].value ) {
}
AddToCart(formToUpdate);
}
</script>
This code bascially reads values that are placed within the <options> tag and appends it to allow the cart to accept the values.
Use this code below as the template for your product (I'll use the examples of pictures in different sizes, since that was asked for on the forum:
- Code: Select all
Firefighters Raise Flag at World Trade Center Site<br>
Choose size of image you wish. After selecting, you will be presented<br>
with framing options.<br>
<!--Shopping Cart Product Begin-->
<FORM NAME=order action="frame_options.html">
<input type=hidden name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1">
<input type=hidden name=PRICE value="">
<input type=hidden name=NAME value="">
<input type=hidden name=ID_NUM value="">
<input type=hidden name=SHIPPING value="">
<SELECT NAME="PRODUCTSELECTOR">
<OPTION cost="1.00" id_num="4x6print" name="4x6 print" shipping="">4x6 print
<OPTION cost="2.00" id_num="5x7print" name="5x7 print" shipping="">5x7 print
<OPTION cost="3.00" id_num="8x10print" name="8x10 print" shipping="">8x10 print
<OPTION cost="4.00" id_num="11x14print" name="11x14 print" shipping="">11x14 print
<OPTION cost="5.00" id_num="16x20print" name="16x20 print" shipping="">16x20 print
<OPTION cost="6.00" id_num="20x24print" name="20x24 print" shipping="">20x24 print
<OPTION cost="4.00" id_num="16x20calendar" name="16x20 calendar" shipping="">16x20 calendar
<OPTION cost="5.00" id_num="16x20lithograph" name="16x20 Lithograph" shipping="">16x20 Lithograph
<OPTION cost="6.00" id_num="16x20signedlithograph" name="16x20 Signed Lithograph" shipping="">16x20 Signed Lithograph
</SELECT>
<input type=image src="buynow.gif" value=' Add to Cart ' onClick='AddOneOfManyToCart(this.form)'>
</FORM>
<!--Shopping Cart Product End -->
The above example does a couple of things;
1- It hides the quantity field which you may or may not want to do. It puts in a value of "1" in this instance. You can use:
- Code: Select all
<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1">
2- It directs the shopper to another page for additional product that may be associated with the selction they just made, in this case to a page that would have frames for the picture they just purchased.
This code and logic saves a lot of time, and it doesn't matter how many options you have, as long as you include the variables "cost -- id_num -- name -- shipping".
If you need to use a cart that has a static field instead of an option field, just use the regular code:
- Code: Select all
<!--Shopping Cart Product Begin-->
<FORM NAME=order ACTION="_whichever_.html" onSubmit="AddToCart(this);">
Quantity:
<input type=text size=2 maxlength=3 name=QUANTITY onChange='this.value=CKquantity(this.value)' value="1">
<br>
<input type="image" src="buynow.gif" border=0 value="Add to Cart" align=top>
<input type=hidden name=PRICE value="1.00">
<input type=hidden name=NAME value="4x6print">
<input type=hidden name=ID_NUM value="4x6print">
<input type=hidden name=SHIPPING value="0.00">
Option 1:
<select name=ADDITIONALINFO>
<option value="">
<option value="">
<option value="">
</select>
<br>
<!-- <input type=button value='Add' onClick='AddToCart(this.form)'> -->
</FORM>
<!--Shopping Cart Product End -->
I haven't done a lot fo testing with this code, so I can say it's fail safe or bullet proof, but the few times I've run it thru, it has worked ok.
Another note, this coding will not work with some older browsers as they don't handle parts of that code (which I think has to do with DOM objects, but not sure), so be sure to test, or post a requirement on yoru page for a broswer version. IE4 and above and Netscape 6 and above should be ok. Not sure what version of Mozilla would work, as I don't have it.
Hope this works for you, as it is certainly working for me!
Regards,
Marc[/code]