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:

<INPUT TYPE="hidden" NAME="option|1|number" VALUE="none|price">
with your current option INPUT statement (including any SELECT statements).
<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">