PAYPAL SHOPPING CART
LESSON SEVEN
THE JAVASCRIPT OPTION
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

Once you understand what is going on with the PayPal Shopping Cart as given by PayPal you may find this of interest.

In its original form the PayPal Shopping Cart provides a maximum of seven pieces of information to pass on during a sale. The three "fixed" values of ITEM_NAME, ITEM_NUMBER and AMOUNT, the price, set as hidden values and four selectable items name On0, On1, Os0 and Os1. But what if a given item had more selectable options than just four? And what if you wanted to let your customer select the quantity of an item desired?

A small Javascript entered in the HEAD section of the Source Code manipulates the Page Form and sends the collected data on to PayPal. The Script requires no alterations and a copy & paste to the HEAD section of your source code of the Script, shown below in GOLD, will set everything into action provided the form to collect data is proper.

The //comments to the left of a line explains the action. An explanation of the Script is not necessary other than what is presented. Javascript is another animal and lesson too involved to explain here at this time. If you're familiar with Javascript you can work through it. If you have no experience with Javascript don't waste your time. Just know it works!

The real trick is in the FORM to collect data which is presented in the next lesson. For now, even if you don't understand Javascript, review the following code.

 

<script type="text/javascript">
<!-- Hide JS source from HTML validators
function Dollar (val) {
var str,pos,rnd=0;
if (val < .995) rnd = 1;
str = escape (val*1.0 + 0.005001 + rnd);
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}

function ReadForm (obj1) { 
var i,amt,des,obj,pos,val;
amt = obj1.baseamt.value*1.0;
des = obj1.basedes.value;  
for (i=0; i<obj1.length; i++) {
obj = obj1.elements[i];
if (obj.type == "select-one" &&   
obj.name == "") {
pos = obj.selectedIndex;
val = obj.options[pos].value;
pos = val.indexOf ("@");
if (pos > 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+");
if (pos > 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%");
if (pos > 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val;
}
}
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</script>



// force to valid dollar amount

// for old Netscape browsers
// float, round, escape





// process un-named selects

// base amount
// base description
// run entire form
// a form element
// just get selects
// must be un-named
// which option selected
// selected value
// price set?

//price increment?

// percent change?


// accumulate value






//-->

Look over the above code along with the //comments. It will probably mean nothing to you but the next lesson will show you how to create a proper Form to be used with this Script. Perhaps afterwards you can come back to this and some of it will make sense. When you are ready click HERE