Add a Charity Button

Sometimes you want to allow the customer to fill in a custom price - like on a gift certificate or a charity donation. We have a Pay your Invoice page on NucomWebHosting.com that allows clients to pay for custom work through the website. Setting it up through CFWebstore is fairly easy.

Create a product with a base price of zero. Add a Quantity Box as an Add-on with an 'Amount added to Price' of 1. 

Now go to the product page, enter a price into the Amount box and click 'Add to Cart' button, you'll see the custom amount added to the shopping cart.

That's quick and easy way but it's not the best looking layout. The quantity box can actually be a little misleading. If you look at the source code of the website you'll see the form that submits the Amount.

<form action="index.cfm?fuseaction=shopping.order" method="post" name="orderform61" class="margins" style="margin-left:0px;">
<input type="hidden" name="Product_ID" value="61"/>
<input type="hidden" name="Prod61_Opts" value=""/>
<input type="hidden" name="Prod61_Addons" value="4,6"/>
<table id="orderBox" width="80%" cellspacing="0" cellpadding="0" border="0" class="formtext">
<tr>
<td valign="bottom" colspan="1"> Amount:
<input type="text" name="Addon6" value="" size="5" maxlength="100" class="formfield" />

</td>
</tr>
<tr>

<td valign="top" style="padding-top:12px; ">
<div class="prodprice"><br/>$0.00</div><br/>
</td>
<td valign="top" align="right"style="padding-top:12px">
<span class="formtext"><strong style="color:#555">Qty:</strong>
<input type="text" name="Quantity" value="1" size="2" maxlength="5" class="formfield"/></span>
<input type="submit" value="Add to Cart" class="formbutton"/>
</td>
</tr>
</table>
</form>
<script type="text/javascript">
<!--
objForm = new qForm("orderform61");
objForm.required("Addon6");
objForm.Addon6.description = "Amount";
objForm.Addon6.validateNumeric();
objForm.Addon6.description = "Amount";
objForm.Quantity.validateNumeric();
objForm.Quantity.validateExp('parseInt(this.value) <1', 'A minimum quantity of 1 is required' );
qFormAPI.errorColor = "#fe6155";
//-->
</script>

By getting rid of the price and changing the quantity input type to hidden, we get a much cleaner looking layout.  

<form action="index.cfm?fuseaction=shopping.order" method="post" name="orderform61">
<input type="hidden" name="Product_ID" value="61" />
<input type="hidden" name="Prod61_Opts" value="" />
<input type="hidden" name="Prod61_Addons" value="4,6" />
<input type="hidden" name="Quantity" value="1" size="2" maxlength="5" class="formfield" /> 


<table id="orderBox" cellspacing="0" cellpadding="0" border="0" class="formtext" align="center">
<tbody>
<tr>
<td valign="bottom" colspan="1">Invoice No:&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;<input type="text" name="Addon4" value="" size="10" maxlength="150" class="formfield" /></td>
</tr>
<tr>
<td>Amount:</td> <td>$<input type="text" name="Addon6" value="0.00" size="10" maxlength="100" class="formfield" />
<input type="submit" value="Add to Cart" class="formbutton" /></td> </tr> </tbody></table></form>

<script type="text/javascript">
<!--
objForm = new qForm("orderform61");
objForm.Addon6.validateNumeric();
objForm.Addon6.description = "Amount";
objForm.Quantity.validateNumeric();
objForm.Quantity.validateExp('parseInt(this.value) <1', 'A minimum quantity of 1 is required' );
qFormAPI.errorColor = "#fe6155";
//-->
</script>

You can see the finished result on our Pay your Invoice page. I've added an Invoice Textbox for the invoice that they're paying.

Now don't copy this code and think it will work. This product_ID and Addon IDs exist on this website. If they don't exist on your website it won't work. Setup a product and copy the source code so you know it's setup correctly.