Singular add to cart button for multiple fields (20+) on a singular page.

thompsonj1
New Community Member
Posted on
‎Mar-12-2014 05:04 PM
Hello the wise ones of PayPal and your knowledge of HTML. I am here to ask if its possible to create a add to button (unhosted if necessary) that would allow up to 20 or more options/fields each of which would be able to add to the total cost of an item in a radio button style. So to picture this... Item name {Item option} [Radio button that adds $5] [Radio button that adds $10] {Item option} [Radio button that adds $5] [Radio button that adds $10] Etc... Hidden subtotal: that multiples the above by a tax rate and adds it Total cost: X,XXX.XX Thank you all of those who will offer their kind assistance!
Login to Me Too
0 Kudos
Login to Reply or Kudo
3 REPLIES 3

snowshoe
Frequent Advisor
Frequent Advisor
‎Mar-12-2014 05:17 PM

What you have in mind requires a bit of custom scripting.  You can't do this using the online button creator.  As there are many ways to do what would like to do, if you're not a coder, then you would need to seek the assistance of a Developer.

 

Check out the example below as it demonstrates what's involved with creating an item button like this:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Button Example Code</title>

<!-- START META TAG SECTION -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Language" content="en">
<!-- END META TAG SECTION -->


<!-- Start of Script -->
<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;
}

var amt,des,obj,val,op1a,op1b,op2a,op2b,itmn;

function ChkTok (obj1) {
var j,tok,ary=new Array ();       // where we parse
  ary = val.split (" ");          // break apart
  for (j=0; j<ary.length; j++) {  // look at all items
// first we do single character tokens...
    if (ary[j].length < 2) continue;
    tok = ary[j].substring (0,1); // first character
    val = ary[j].substring (1);   // get data
    if (tok == "@") amt = val * 1.0;
    if (tok == "+") amt = amt + val*1.0;
    if (tok == "%") amt = amt + (amt * val/100.0);
     if (tok == "-") amt = amt - val*1.0;
    if (tok == "#") {             // record item number
      if (obj1.item_number) obj1.item_number.value = val;
      ary[j] = "";                // zap this array element
    }
// Now we do 3-character tokens...
    if (ary[j].length < 4) continue;
    tok = ary[j].substring (0,3); // first 3 chars
    val = ary[j].substring (3);   // get data
    if (tok == "s1=") {           // value for shipping
      if (obj1.shipping)  obj1.shipping.value  = val;
      ary[j] = "";                // clear it out
    }
    if (tok == "s2=") {           // value for shipping2
      if (obj1.shipping2) obj1.shipping2.value = val;
      ary[j] = "";                // clear it out
    }
  }
  val = ary.join (" ");           // rebuild val with what's left
}

function StorVal () {
var tag;
  tag = obj.name.substring (obj.name.length-2);  // get 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 (tag == "3i") itmn = itmn + " " + val;
  else if (des.length == 0) des = val;
  else des = des + ", " + val;
}

function ReadForm (obj1, tst) { // Read the user form
var i,j,pos;
  amt=0;des="";op1a="";op1b="";op2a="";op2b="";itmn="";
  if (obj1.baseamt) amt  = obj1.baseamt.value*1.0;  // base amount
  if (obj1.basedes) 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;
  if (obj1.baseitn) itmn = obj1.baseitn.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
      if (obj.name == "quantity" ||
          obj.name == "amount") continue;
      pos = obj.selectedIndex;        // which option selected
      val = obj.options[pos].value;   // selected value
      ChkTok (obj1);                  // check for any specials

      if (obj.name == "on0" ||        // let this go where it wants
          obj.name == "os0" ||
          obj.name == "on1" ||
          obj.name == "os1") continue;

      StorVal ();

    } else
    if (obj.type == "checkbox" ||     // just get checkboxex
        obj.type == "radio") {        //  and radios
      if (obj.checked) {
        val = obj.value;              // the value of the selection
        ChkTok (obj1);
        StorVal ();
      }
    } 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)
          ChkTok (obj1);
          StorVal ();
        }
      }
    } else
    if ((obj.type == "text" ||        // just read text,
         obj.type == "textarea") &&
         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;
      }
      StorVal ();
    }
  }
// 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;
  if (itmn.length > 0) obj1.item_number.value = itmn;
  obj1.item_name.value = des;
  obj1.amount.value = Dollar (amt);
  if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</script>
<!-- End of Script -->


</head>

<body>

<!-- START SAMPLE CODE SECTION -->


<!-- PARAGRAPH 1 -->
Script Examples

<br><br><br>

Adding Multiple Options to a Base Price Item.

<br><br>

Widget Bracelet - $25 each

<br><br>
<!-- Start of Form -->
<!-- Note: target="paypal" was replaced with target="_self" -->
<!-- Note: shopping_url also added to code -->
<!-- These two changes allow better functionality with IE and Firefox --> 
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" onsubmit="this.target = '_self'; return ReadForm(this, true);">
<!-- If using a Business or Company Logo Graphic, include the "cpp_header_image" variable. -->
<input type="hidden" name="cpp_header_image" value="https://www.yourwebsite.com/logo.jpg">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="add" value="1">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="your email address">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="amount" value="">
<input type="hidden" name="currency_code" value="USD">
<!-- Replace value with the web page you want the customer to return to -->
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/Script_04.html">
<!-- Replace value with the web page you want the customer to return to after a successful transaction -->
<input type="hidden" name="return" value="http://www.yourwebsite.com/ThankYou.html">
<!-- Replace value with the web page you want the customer to return to after item cancellation -->
<input type="hidden" name="cancel_return" value="http://www.yourwebsite.com/Cancel.html">
<input type="hidden" name="baseamt" value="00">
<input type="hidden" name="basedes" value="Widget Bracelet">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller:">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">

<input type="hidden" name="baseon0" value="Engraving">
<input type="hidden" name="baseos0" value="">
<input type="hidden" name="baseon1" value="">
<input type="hidden" name="baseos1" value="">
<input type="hidden" name="baseitn" value="">

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

Select Bracelet Color:&nbsp;&nbsp;
<select name="Color" onchange="ReadForm (this.form, false);">
<option value="Gold @ 25.00" selected>Gold</option>
<option value="Silver @ 25.00">Silver</option>
<option value="Copper @ 25.00">Copper</option>
</select>
<br><br><br>

Select Optional Charm:&nbsp;&nbsp;(Please Choose Only One Option)
<br><br>
<input type     = "radio"
       onclick  = "ReadForm (this.form, false);" 
       value    = "Heart Charm +5.00"
       name     = "charm">Heart Charm - add $5.00
 &nbsp;
<br><br>
<input type     = "radio"
       onclick  = "ReadForm (this.form, false);" 
       value    = "Bear Charm +5.00"
       name     = "charm">Snowflake Charm - add $5.00
 &nbsp;
<br><br>
<input type     = "radio"
       onclick  = "ReadForm (this.form, false);" 
       value    = "Star Charm +5.00"
       name     = "charm">Star Charm - add $5.00
 &nbsp;



<br><br><br>

Select Optional Accent Beads:&nbsp;&nbsp;(Please Choose Only One Option)
<br><br>
<input type     = "radio"
       onclick  = "ReadForm (this.form, false);" 
       value    = "SB Accent Bead +5.00"
       name     = "accent_bead">Round Accent Beads - add $5.00
 &nbsp;
<br><br>
<input type     = "radio"
       onclick  = "ReadForm (this.form, false);" 
       value    = "Ded Spa Accent Bead +5.00"
       name     = "accent_bead">Square Accent Beads - add $5.00
 &nbsp;

<br><br><br>

Free Bracelet Engraving - Type in Initials:&nbsp;&nbsp;
<input type="text" name="engraving_1b">

<br><br><br>


<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
&nbsp; &nbsp; &nbsp; Total Cost &gt; 
<input class="nbor" type="text" name="tot" size="8" value="$25.00">
 &nbsp; &nbsp;
 
<input type    = "button" 
       value   = "Reset FORM" 
       onclick = "this.form.reset();">
       
</form>
<!-- End of Form -->

<br>

<!--  Start of View Cart Button Code  -->
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- If using a Business or Company Logo Graphic, include the "cpp_header_image" variable. -->
<input type="hidden" name="cpp_header_image" value="https://www.yourwebsite.com/logo.jpg"> 
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="display" value="1">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="your email address">
<!-- Replace value with the web page you want the customer to return to -->
<input type="hidden" name="shopping_url" value="http://www.yourwebsite.com/Script_04.html">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form> 
<!--  End of View Cart Button Code  -->


<!-- END BUTTON EXAMPLES -->



<!-- END SAMPLE CODE SECTION -->

<br><br><br><br>
<hr align="left" width="50%" noshade>
<br><br>
NOTES:
<br>
In order to test the code, you must replace the &quot;business&quot; value variable with your PayPal Email Address or your Merchant Account ID.

</body>
</html>

 

 

 Important note:

 

In order for this example to function properly, you have to remove the space after the @ symbol in this section:

<option value="Gold @ 25.00" selected>Gold</option>
<option value="Silver @ 25.00">Silver</option>
<option value="Copper @ 25.00">Copper</option>

The Community Forum Software will not allow any postings to look like an email address, so the example posted here had to be modified by adding a "space" after the @ symbol.

 

Login to Me Too
0 Kudos
Login to Reply or Kudo

thompsonj1
New Community Member
‎Mar-12-2014 05:38 PM
Wow that is some incredible code my friend! Thank you for the example I will make great use of this as I learn about HTML and how to operate these buttons.
Login to Me Too
0 Kudos
Login to Reply or Kudo

snowshoe
Frequent Advisor
Frequent Advisor
‎Mar-12-2014 07:22 PM

Smiley Happy

Login to Me Too
0 Kudos
Login to Reply or Kudo

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.