PAYPAL SHOPPING CART
LESSON NINE
EXPLAINING THE NEW FORM
INTRODUCTION | EXPLAINING THE CODE | THE DOWNFALLS | EXPANDING THE SHOPPING CART | VIEWING THE SHOPPING CART | LAST NOTE

THE JAVASCRIPT OPTION | THE NEW FORM | EXPLAINING THE NEW FORM

Taking the HTML Form Code presented in the previous lesson we break it down explaining the new formatting to be compatible with the Javascript in the HEAD section of the page. Normal HTML is in gold and the Javascript specific coding is in yellow. Explanations are in regular text..

 

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="ReadForm (this);">
As with the regular PayPal Form this targets PayPal however we add onsubmit="ReadForm (this);" to the end. This is what activates the Javascript in the HEAD section of the page and starts the processing
<table>
<tr>
<td>
<div align="center">
<p>ITEM<br>

<select>
<option value="KIDS T-SHIRT@14.00">Kids Tshirt($14.00)</option>
<option value="LADIES T-SHIRT@16.00">Ladies Tshirt($16.00)</option>

<option value="MENS XL T-SHIRT@18.00">Mens XL Tshirt($18.00)</option>
<option value="GENERIC SWEAT SHIRT@24.00">Mens Sweat Shirt ($24.00)</option>
</select>

This first select section is for the ITEM and is very important as it declares what is ordered and the price of that item. Notice there is no value like On0 assigned, just a straight <select>. This format is critical. The capitolized letters are what is passed on to PayPal (they are capitolized for ease of learning and are not required to be capitolized). Note also the item description and the item price are separated by an @ character. This is the separator used by the Javascrip[t to identify the item price. The lowercase text and bracketed price, not enclosed in the <>, is what the customer sees in the drop dowm menu.
</p>
</div>
</td>
<td>
<div align="center">
<p>SIZE<br>

<select>
<option value="Size=SMALL">Smal
<option value="Size=MEDIUM">Medium
<option value="Size=LARGE">Large
<option value="Size=X-LARGE">X-Large
</select>

This is another select section which handles the SIZE. Notice again there is no value like On0 or ON1 assigned, just a straight <select>. This format is more of a standard format except the option value, in quotation marks, is defined Size=SMALL. This is what is passed to PayPal and we declare what it is for complete identification infromation in the Shopping Cart. Again the lower case text is what the customer sees in the dropdown menu.
</p>
</div>
</td>
<td>
<div align="center">
<p>FABRIC<br>

<select>
<option value="Fabric=COTTON">Cotton
<option value="Fabric=50/50">50/50
<option value="Faric=FLEECE">Fleece
</select>

</p>
</div>
</td>
<td>
<div align="center">
<p>COLOR<br>

<select>
<option value="Color=WHITE">White
<option value="Color=BLACK">Black
<option value="Color=BLUE">Blue
</select>

</p>
</div>
</td>
<td>
<div align="center">
<p>TRIM<br>

<select>
<option value="Color=WHITE">White
<option value="Color=BLACK">Black
<option value="Color=RED">Red
</select>

</p>
</div>
</td>

<td>
<div align="center">
<p>PLACE<br>

<select>
<option value="Place=FRONT">Front
<option value="Place=BACK">Back
</select>

</p>
</div>
</td>

<td>
<div align="center">
<p>GIFT<br>

<select>
<option value="Gift=BIRTHDAY">Birthday
<option value="Gift=ANNIVERSARY">Anniversary
<option value="Giftr=SELF">Self
</select>

</p>
</div>
</td>

</tr>
<tr>
<td>
<p>
QUANTITY<br>
<input type="text" name="quantity" size="3" value="1" />
</p>
</td>
</tr>
</table>

<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but22.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="add" value="1">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="someone@somewhere.com">
<input type="hidden" name="business" value="sales@graphixnstuff.com">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="item_number" value="DC01">
<input type="hidden" name="amount" value="">
<input type="hidden" name="baseamt" value="0" />
<input type="hidden" name="basedes" value="DRUNKIN COW " />
<input type="hidden" name="return" value="http://www.yoursite.com/thankyou.html">
<input type="hidden" name="cancel_return" value="http://www.yoursite.com">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
</form>

Having a working knowledge of the intial PayPal Shopping Cart layout and format one should easily pick up this new format. You can add as many <select> fields as you need

The next lesson will explain what is happening within the Form Code. When you are ready click HERE