eXtropia | cool hacks

Development resources
		WebWare 2.1 (Perl)
		WebWare 2.0 (Java)
		Cool hacks

cool hacks


	Add 1 item to basket on click

sent in the following hack for WebStore!

There seems to be a lot of confusion over how to create a button that will add one item to the cart when it is clicked, so I have attached an explanation of my "Add One" Button Hack for the HTML version of web_store.

STEP 1:
Place this ENTIRE block of code EVERYWHERE that you want to display an "add one" button. In other words, every product should be accompanied by this block of code:

<FORM METHOD="post" ACTION="cgi-bin/web_store.cgi">
<INPUT TYPE="IMAGE" SRC="graphics/add.jpg" ALT="add one" BORDER=0 WIDTH=130 HEIGHT=20 NAME="add_to_cart_button">
<INPUT TYPE="hidden" NAME="item-number|category|price|name|weight" VALUE="1">
<INPUT TYPE="hidden" NAME="option|1|number" VALUE="none|price"><INPUT TYPE="hidden" NAME="cart_id" VALUE="%%cart_id%%">
<INPUT TYPE="hidden" NAME="page" VALUE="%%page%%"></FORM>

STEP 2:
If you have any links on your page, they will need to be placed inside FORM tags as follows:

<FORM METHOD="post" ACTION="cgi-bin/web_store.cgi"> place your links here 
<INPUT TYPE="hidden" NAME="cart_id" VALUE="%%cart_id%%"><INPUT TYPE="hidden" NAME="page" VALUE="%%page%%"></FORM>

STEP 3:
In web_store.cgi, replace all occurrences of add_to_cart_button with add_to_cart_button.x

STEP 4:
In web_store_html_lib.pl, replace

<INPUT TYPE="submit" NAME="add_to_cart_button" VALUE="Add Items to my Cart">

with

 
<INPUT TYPE="IMAGE" SRC="graphics/add.jpg" ALT="add one" BORDER=0 WIDTH=130 HEIGHT=20 NAME="add_to_cart_button">

STEP 5: Make the following changes to the new code:

Use the correct ACTION and SRC paths for your system.
When dealing with the part of the code that says
```
<INPUT TYPE="hidden" NAME="item-number|category|price|name|weight" VALUE="1">
```
replace the information in NAME with the information listed in your current product INPUT statement and change the "1" to the quantity of items that you want to add to the cart when the "add one" button is clicked.
Replace the part of the code that says

<INPUT TYPE="hidden" NAME="option|1|number" VALUE="none|price">

with your current option INPUT statement (including any SELECT statements).

Delete your original opening and closing FORM tags.
Delete your original product INPUT and option INPUT statements.
Delete your original

<INPUT TYPE="hidden" NAME="cart_id" VALUE="%%cart_id%%">

and

<INPUT TYPE="hidden" NAME="page" VALUE="%%page%%">

statements.

For consistency, you may want to replace all of your generic grey buttons with graphical buttons. In other words, perform STEP 3 and STEP 4 for each button type.

NOTE:
I suspect that if you want to use generic grey buttons instead of graphical buttons, you may skip STEP 3 and STEP 4 and replace the IMG SRC statement in STEP 1 with the following:

<INPUT TYPE="submit" NAME="add_to_cart_button" VALUE="Submit">