allisonsabo74
asked on
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.
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’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"> </td>
</tr>
<tr><td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </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>
ASKER
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?
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?
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
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
ASKER
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!
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"> </td>
</tr>
<tr>
<td> </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> </td>
<td> </td>
<td> </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’d like my items shipped to me. Give me a quote.</td>
</tr>
</table>
</form>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Hope this will help you.
Open in new window