|
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
|