RSS2
10 Minute E-Commerce Shopping Cart Using PayPal
Part 2 -- Adding Options
by Maggi Hall, E-Commerce Adviser staff (rev022708)
PayPal Shopping Carts offer numerous ways to offer product options, including dropdown lists, text boxes and radio buttons. This article walks you
Web Page Editor (WPE)
. The tool used to build the web page is the "Web Page Editor" produced by Web Design Options using customized Open Source Software.The WPE has several rows of buttons, which can be used to format the page content. In the top row far left-side, there is a button labeled "Source." When that button is clicked, HTML code is displayed. When the button is unselected, plain text is displayed.
Editting Steps
- Select and copy the new code below —
<td align="center"><font size="3" face="Tahoma">Product #1<br />
<center>
<FORM onSubmit="return false;" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value="me@mybusiness.com" />
<input type="hidden" name="item_name" value="" />
<input type="hidden" name="amount" value="" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="lc" value="US" />
<input type="hidden" name="baseamt" value="29.00" />
<input type="hidden" name="basedes" value="Product #1" />
<input type="hidden" name="on0" value="" />
<input type="hidden" name="os0" value="" />
<input type="hidden" name="on1" value="" />
<input type="hidden" name="os1" value="" />
<input type="hidden" name="item_number" value="" />
<input type="hidden" name="baseon0" value="" />
<input type="hidden" name="baseos0" value="" />
<input type="hidden" name="baseon1" value="" />
<input type="hidden" name="baseos1" value="" />
<input type="hidden" name="baseitn" value="" />
<br />
Height:
<select onchange = "ReadForm (this.form);">
<option value="16" @29.00">16" ($29.00)</option>
<option value="18" @39.00">18" ($39.00)</option>
<option value="20" @49.00">20" ($49.00)</option>
</select>
<br />
Quantity:
<input name="quantity" type="text" class="order-text" value="1" size="4" maxlength="2">
<br /><br />
<input onclick="SubClear (this.form);" type=image alt="cart add"
src="http://www.paypal.com/en_US/i/btn/x-click-but22.gif" name="submit" alt="cart add" />
</form>
</center>
</td>
- Open WPE — To open the editor, click WPE. (Code from Part 1 is included.)
- Click on the "Source" button in the upper left corner
- Find and select the existing "Add To Cart" code for Product #1 so it is hightlighted —
<!-- PRODUCT #1 CODE STARTS HERE -->
<td align="center"><font size="4" face="Tahoma">Product #1 -- $19.95<br />
<form method="post" action="https://www.paypal.com"
target="paypal" name="_xclick">
input type="hidden" value="_cart" name="cmd" />
<input type="hidden" value="me@mybusiness.com" name="business" />
<input type="hidden" value="USD" name="currency_code" />
<input type="hidden" value="Product #1" name="item_name" />
<input type="hidden" value="24.99" name="amount" />
<input type="image" border="0" alt="Make payments with PayPal - it's fast, free and secure!"
name="submit" src="http://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" /> <input type="hidden" value="1" name="add" />
</form>
</font></td>
< !-- PRODUCT #1 CODE ENDS HERE -->
- Paste new code, so it replaces the old code just selected
- Repeat for each product
- Edit the details and options to match your products
- Select and copy the following code
The best place to paste this code into your web page is in the "<head>" section, just above "</head>". If that isn't possible, place it at the very top of the new shopping cart code added in the previous steps.
PROCESSING CODE --
<SCRIPT type=text/javascript>
<!--
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
function ReadForm (obj1, tst) { // Read the user form
var i,j,amt,des,obj,pos,val,op1a="",op1b="",op2a="",op2b="";
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
if (obj1.baseon0) op1a = obj1.baseon0.value; // base options
if (obj1.baseos0) op1b = obj1.baseos0.value;
if (obj1.baseon1) op2a = obj1.baseon1.value;
if (obj1.baseos1) op2b = obj1.baseos1.value;
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
pos = val.indexOf ("@"); // price set?
if (pos >= 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos >= 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos >= 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value
} else
if (obj.type == "checkbox" || // just get checkboxex
obj.type == "radio") { // and radios
if (obj.checked) {
val = obj.value; // the value of the selection
pos = val.indexOf ("@"); // price set?
if (pos >= 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos >= 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos >= 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value, or text
}
} else
if (obj.type == "select-multiple") { //one or more
for (j=0; j<obj.options.length; j++) { // run all options
if (obj.options[j].selected) {
val = obj.options[j].value; // selected value (default)
if (des.length = 0) des = amt;
else des = des + ", " + val;// accumulate value, or text
pos = val.indexOf ("+"); // price increment?
if (pos >= 0) amt = amt + val.substring (pos + 1)*1.0;
}
}
} else
if (obj.type == "text" && // just read text,
obj.name != "tot" && // but not from here
obj.name != "quantity") {
val = obj.value; // get the data
if (val == "" && tst) { // force an entry
alert ("Enter data for " + obj.name);
return false;
}
tag = obj.name.substring (0, 2); // get special flag
if (tag == "1a") op1a = op1a + " " + val;
else if (tag == "1b") op1b = op1b + " " + val;
else if (tag == "2a") op2a = op2a + " " + val;
else if (tag == "2b") op2b = op2b + " " + val;
else if (des.length == 0) des = val;
else des = des + ", " + val;
}
}
// Now summarize stuff we just processed, above
if (op1a.length > 0) obj1.on0.value = op1a;
if (op1b.length > 0) obj1.os0.value = op1b;
if (op2a.length > 0) obj1.on1.value = op2a;
if (op2b.length > 0) obj1.os1.value = op2b;
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
return true;
}
function SubClear (obj1) { // submit, then clear a FORM
if (ReadForm(obj1,true)) {
obj1.target = 'paypal';
obj1.submit();
obj1.reset();
}
return false;
}
//-->
</SCRIPT>
Test Web Page
. Test your page by clicking on the "Add Cart" buttons and the "View Cart" button.Save Web Page
. If you want to save your new web page, click on "Source," copy all of the lines and paste everything to a text editor. When you close the demo WPE, you will loose all of the HTML.Web Page Code
. HTML CODERelated Articles
- 10-Minute E-Commerce Shopping Cart using PayPal
- Do-It-Yourself versus Professional E-Commerce Website
