Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 692
  • Last Modified:

Add to Cart PayPal shopping cart, confirmation first

Hello there!

I have some products for sale and am using PayPal 'Add to Cart' buttons. I have it set up so that when someone clicks Add to Cart, a hidden div pops up, giving them some info and asking them to proceed or ask for a shipping quote. The proceed button closes the hidden div and brings up the PayPal cart, where the product is added. The Shipping Quote button goes to a form. My problem is with products that have dropdown options (colour, size, etc). I need to have their choices brought over into the hidden div. I'm stuck and would appreciate any help.

I am using Dynamic Drive DHTML Window Widget for the hidden div popup. http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm

Thanks very much.

Here is a product that works fine. 
 
  <!-- THE LINK TO ADD TO CART WHICH OPENS THE HIDDEN POPUP DIV-->
<a href="#" onClick="divwin=dhtmlwindow.open('divbox', 'div', 'pr_elite', 'Purchase this item', 'width=450px,height=210px,left=200px,top=150px,resize=0,scrolling=0'); return false">
 <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0"></a>
 
  <!-- HIDDEN POPUP DIV WHICH CONTAINS THE PAYPAL CODE TO ADD THE ITEM TO YOUR CART -->
<div id="pr_elite" style="display:none">
<p>Remember, when you buy this way, youre choosing to pick up your item at our facility. After payment, youll be directed to a form that will allow you to pick a date and time to pick up your item(s). Our offices are open from Monday to Friday, between 9 am and 5 pm. If youd rather have your item(s) shipped to you, click the Quote button located below.</p>
 
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
                 <table width="421" border="0" cellspacing="0" cellpadding="4">
                    <tr valign="middle">
                       <td width="80"><input type="hidden" name="cmd" value="_s-xclick">
  <input type="hidden" name="hosted_button_id" value="4808363">
  <input name="submit" type="image" onclick="divwin.hide(); " src="images/shop-ok.jpg" alt="PayPal - The safer, easier way to pay online!" align="left" width="70" height="20" border="0"  >
  </td>
                      <td width="341">Okay, I want to pay now and pick up my items </td>
                    </tr>
                    <tr valign="middle">
                      <td><a href="shop-quote.htm"><img src="images/shop-shippingquote-small.jpg" alt="Receive a quote to have the product shipped to you." width="70" height="20" border="0" align="top"></a></td>
                      <td>I&rsquo;d like my items shipped to me. Give me a quote.</td>
                    </tr>
                  </table>
               </form>
</div>
<!-- HIDDEN POPUP DIV END -->   
 
 
--------------------------------------------------------
--------------------------------------------------------
 
 
Here is a product with options. Need to get it to work like the example provided above. 
 
 <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4808459">
<table>
<tr><td width="114"><input type="hidden" name="on0" value="Colour:">
    <strong>Choose a Colour:</strong></td>
  <td width="102"><select name="os0">
    <option value="Chocolate">Chocolate 
	  <option value="Camel">Camel 
    </select></td>
  <td width="260">&nbsp;</td>
</tr>
<tr><td>&nbsp; </td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td><input type="image" src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"></td>
  <td>Pick your item up at CCVS and save on shipping.</td>
</tr>
 
</table>
 </form>

Open in new window

0
allisonsabo74
Asked:
allisonsabo74
  • 3
  • 3
1 Solution
 
Serial326Commented:
Hi, I have modified the part that was not working to make it working.
Hope this will help you.
<script type="text/javascript">
  function setColor() {
    divwin=dhtmlwindow.open('divbox', 'div', 'pr_elite', 'Purchase this item', 'width=450px,height=210px,left=200px,top=150px,resize=0,scrolling=0');  
	subform.os0.value = falseform.col.value;
  }
</script>
 
<br><br>
  <table>
  <tr><td>
  <strong>Choose a Colour:</strong><td>
  <form name="falseform">
  <select name="col">
    <option value="Chocolate">Chocolate 
          <option value="Camel">Camel 
  </select>
  </form>
  <td>
<a href="#" onClick="setColor(); return false;">
 <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0"></a>
 </table>
 
<div id="pr_elite" style="display:none">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" id="subform" method="post">
<table>
<tr>
<td>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4808459">
<input type="hidden" name="on0" value="Colour">
<input type="hidden" name="os0" value="">
<input name="submit" type="image" onclick="divwin.hide(); " src="images/shop-ok.jpg" alt="PayPal - The safer, easier way to pay online!" align="left" width="70" height="20" border="0"  ></td>
<td width="341">Okay, I want to pay now and pick up my items </td>
</tr>
<tr valign="middle">
<td><a href="shop-quote.htm"><img src="images/shop-shippingquote-small.jpg" alt="Receive a quote to have the product shipped to you." width="70" height="20" border="0" align="top"></a></td>
<td>I&rsquo;d like my items shipped to me. Give me a quote.</td>
</tr>
 
</div>
 
</table>
 </form>

Open in new window

0
 
allisonsabo74Author Commented:
Hi there.
Thanks for your help! A few tweaks required I think.
The solution works wonderfully in IE but not so well in Firefox. When you click the Add to Cart, the page focus jumps to the top. You then have to scroll down the page to the product to see the popup div to be able to choose to Pay Now (or Shipping Quote). Once you click Pay Now, the PayPal cart opens with the product added but the colour choice is missing.

Any thoughts?
0
 
Serial326Commented:
I didn't get the jump to the top problem, maybe you did something wrong. Hard to tell without having code.

I find why the color is missing in FF. You must put all the code that is inside the <div></div> into the <form></form> so it would look like <div><form><p>Blablabla</p>Pay Now choose Shipping</form></div>
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
allisonsabo74Author Commented:
Here is my code. I was wondering if you could also add in the code for another option. I have one product that has 3 dropdown options. Colour, Size, Gender.

Thanks so much!
<script type="text/javascript">
  function setColor() {
    divwin=dhtmlwindow.open('divbox', 'div', 'pr_throw', 'Purchase this item', 'width=450px,height=210px,left=200px,top=150px,resize=0,scrolling=0');  
	subform.os0.value = falseform.col.value;
  }
</script>
               
<table>
<tr valign="middle"><td width="114" valign="top">
    <strong>Choose a Colour:</strong></td>
  <td width="102" valign="middle">  
  <form name="falseform">
  <select name="col">
    <option value="Chocolate">Chocolate 
          <option value="Camel">Camel 
  </select>
  </form>
  </td>
  <td width="260" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>
  <a href="#" onClick="setColor(); return false;">
 <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0"></a>
 </td>
  <td>Pick your item up at CCVS and save on shipping.</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
</tr>
 
</table>
 
 
 <div id="pr_throw" style="display:none">
  <p>Remember, when you buy this way, youre choosing to pick up at our facility. After payment, youll be directed to a form that will allow you to pick a date and time to pick up your item(s). Our offices are open from Monday to Friday, between 9 am and 5 pm. If youd rather have your item(s) shipped to you, click the Quote button located below.</p>
  
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" id="subform" method="post">
<table>
<tr>
<td>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4808459">
<input type="hidden" name="on0" value="Colour">
<input type="hidden" name="os0" value="">
<input name="submit" type="image" onclick="divwin.hide(); " src="images/shop-ok.jpg" alt="PayPal - The safer, easier way to pay online!" align="left" width="70" height="20" border="0"  ></td>
<td width="341">Okay, I want to pay now and pick up my items </td>
</tr>
<tr valign="middle">
<td><a href="shop-quote.htm"><img src="images/shop-shippingquote-small.jpg" alt="Receive a quote to have the product shipped to you." width="70" height="20" border="0" align="top"></a></td>
<td>I&rsquo;d like my items shipped to me. Give me a quote.</td>
</tr>
 
</table>
 </form>
</div> 

Open in new window

0
 
Serial326Commented:
I just find the problem, the form was always create so the value was not correctly set. I also add the 3 combobox.

I didn't see a goto top problem.
<script type="text/javascript">
  function setValue() {
    try {
	  divwin.show() }
	catch(error) {
	  divwin=dhtmlwindow.open('divbox', 'div', 'pr_throw', 'Purchase this item', 'width=450px,height=210px,left=200px,top=150px,resize=0,scrolling=0');  		
	}	 
    subform.os0.value = falseform.col.value;
	subform.os1.value = falseform.siz.value;	
	subform.os2.value = falseform.gen.value;  	
  }
</script>
               
<table>
<tr valign="middle"><td width="114" valign="top">
    <strong>Choose a Colour:</strong></td>
  <td width="102" valign="middle">  
  <form name="falseform">
  <select name="col">
    <option value="Chocolate">Chocolate</option>
    <option value="Camel">Camel</option>
  </select></td>
  <tr><td>
  <strong>Choose a Size:</strong></td>
  <td width="102" valign="middle">   
  <select name="siz">
    <option value="Large">Large</option>
	<option value="Medium">Medium</option>
	<option value="Small">Small</option>
  </select></td>
  <tr><td>
  <strong>Choose a Gender:</strong></td>
  <td width="102" valign="middle">  
  <select name="gen">
    <option value="M">M</option>
	<option value="F">F</option>
  </select>    
  </td>  
  </form>
</tr>
<tr>
  <td> </td>
  <td>
  <a href="#" onClick="setValue();">
 <img src="https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif" border="0"></img></a>
 </td>
  <td>Pick your item up at CCVS and save on shipping.</td>
</tr>
 
</table>
 
 
 <div id="pr_throw" style="display:none">
  <p>Remember, when you buy this way, youre choosing to pick up at our facility. After payment, youll be directed to a form that will allow you to pick a date and time to pick up your item(s). Our offices are open from Monday to Friday, between 9 am and 5 pm. If youd rather have your item(s) shipped to you, click the Quote button located below.</p>
  
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" id="subform" method="post">
<table>
<tr>
<td>
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="4808459">
<input type="hidden" name="on0" value="Colour">
<input type="hidden" name="os0" id="os0" value="">
<input type="hidden" name="on1" value="Size">
<input type="hidden" name="os1" value="">
<input type="hidden" name="on2" value="Gender">
<input type="hidden" name="os2" value="">
<input name="submit" type="image" onclick="divwin.hide(); " src="images/shop-ok.jpg" alt="PayPal - The safer, easier way to pay online!" align="left" width="70" height="20" border="0"  ></td>
<td width="341">Okay, I want to pay now and pick up my items </td>
</tr>
<tr valign="middle">
<td><a href="shop-quote.htm"><img src="images/shop-shippingquote-small.jpg" alt="Receive a quote to have the product shipped to you." width="70" height="20" border="0" align="top"></a></td>
<td>I&rsquo;d like my items shipped to me. Give me a quote.</td>
</tr>
 
</table>
 </form>
</div> 

Open in new window

0
 
allisonsabo74Author Commented:
I could not get it to work, even copying your code exactly. I ended up doing it with the combo boxes inside the popup div. Thanks again.
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now