Hack 32 Provide Purchase Options with Drop-Down Listboxes

< Day Day Up >

Change a few lines of the PayPal Button Factory code to restrict purchase options to a distinct list of choices .

By default, the item_name variable created by the PayPal Button Factory [Hack #28] is a hidden field containing a single string of text, which means that a single payment button corresponds to a single product. So, if you sell three products, you'll need three payment buttons , right?

Not so, thanks to drop-down listboxes.

Since many of the products you're selling probably come in a combination of styles or sizes, you can merge those variations into a single purchase button. For instance, if you're selling clothing, a Size option might contain three choices: Small, Medium, and Large. Fortunately, PayPal doesn't distinguish between text strings sent from text boxes and list elements selected from drop-down listboxes, so you can easily replace any <input> field with a <select> drop-down list. For instance, take:

 <input type="hidden" name="item_name" value="T-Shirt">

and replace it with:

 <select name="item_name" id="item_name">   <option>T-Shirt</option> </select>

The problem here is that we still provide the customer with only one option. To add more options, simply insert additional <option> tags, one for each variation, like this:

 <select name="item_name" id="item_name">   <option>T-Shirt, Small</option>   <option>T-Shirt, Medium</option>   <option>T-Shirt, Large</option> </select>

Figure 4-4 shows the completed drop-down listbox.

Figure 4-4. Taking advantage of PayPal's option fields with a simple drop-down listbox.

With this simple change, your customers choose a size, click the Buy Now button, and pay for your item. PayPal then sends the customer's selection back to you in the "You've got cash" email.

If you need to provide your customers with more than one option, you can include up to two additional option fields [Hack #33] and convert both of them to drop-down lists with this same procedure. Thus, you can have up to three different options with a single payment button.

4.6.1 Hacking the Hack

You can take this hack a step further by changing the values of other fields based on selection. For instance, you can change the price based on the shirt size your customer chooses and send the correct price to PayPal along with the corresponding options. You need to add a few pieces of code to your payment button form for this to work.

First, place this JavaScript code in the section of your page between the <head> and </head> tags:

 <script type="text/javascript"> <!-- Update Price Change function UpdateForm (object1) {             // process change selects var i,item_amt,object,position,val;   item_amt = object1.amount.value;          // default amount   for (i=0; i<object1.length; i++) {        // check options     object = object1.elements[i];                if (object.type == "select-one" &&         object.name == "cng") {             // must be named cng       position = object.selectedIndex;      // option selected       val = object.options[position].value; // selected value       position  = val.indexOf ("$");        // set new price       if (position >= 0) item_amt = val.substring (position + 1)*1.0;      }   }   object1.amount.value = item_amt;   if (object1.item_total) object1.item_total.value = "$" + item_amt; } //--> </script>

Next, change the <form> tag for your payment button code so the JavaScript function is executed when the form is submitted, like this:

 <form action="https://www.paypal.com/cgi-bin/webscr" method="post"  onsubmit="this.target='paypal';UpdateForm(this);">

Finally, modify the <select> tag so that it, too, is linked to the JavaScript code:

 <select name="cng" onchange="UpdateForm(this.form);">  <option value="   Small .00   ">   Size: Small .00   </option>  <option value="   Medium .00   ">   Size: Medium .00   </option>  <option value="   Large .00   ">   Size: Large .00   </option> </select>

You can edit the amount charged to your customer by changing the value="Small $1.00 " section of the form field. You can also change the text displayed to your customer by changing the value between the <option> and </option> sections.

Make sure the amount tag in your form is set to the same value as the default value of the drop-down menu. That way, if the form is submitted without changing the values, the amount has the correct default value.

When this code is in place, the price is updated automatically whenever a new size is selected.

Since this solution relies on JavaScript to update the price according to a customer action, it will fail if the customer has disabled JavaScript. Although PayPal doesn't do price checking, you can effectively prevent this problem by checking for JavaScript before displaying order pages to your customers.

< Day Day Up >