Adding paypal button in Fancybox pop up

Question

I'm an artist and a teacher, not a web designer, but I am taking a web design class at my school, School of Visual Arts, in New York city. I have re-designed my web site using fancy box 2.1.7, and there are pop-ups of my artwork from each small preview. I want to add a PayPal button on each fancybox large preview, but each large preview needs an individual code, so I can't reference a single .html page for every page. I anticipate having 2 or 3 hundred painting where you can buy a print, and each one needs an individual PayPal code and the option to buy different sizes. Here is the PayPal code for one painting, but I can't figure out how to get it into the lightbox pop up:

<!--From Paypal-->   

        <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="MM843VYMGKMT2">
<table>
<tr><select name="os0">
    <option value="13x19 print">13x19 print $50.00 USD</option>
    <option value="17x22 print">17x22 print $100.00 USD</option>
</select> </tr>
<tr><input type="hidden" name="on1" value="All prints are signed">All prints are signed</tr>

</table>
<input type="hidden" name="currency_code" value="USD">
<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">
</form>

 <!--End Paypal—>

I need that button, with individual code, to go into each pop up window in fancybox.

My web page, which is not finished yet, can be seen here: http://david.ignacior67.webfactional.com/fancybox-2.1.7-David2/index.html

I would be grateful for any help, and I would be willing to send a signed print of any of my artwork as a thank you to anyone who could offer a solution for my issue.

David Mattingly (my old web site is david mattingly.com)

Gnudiff Gnudiff · Accepted Answer · 2018-03-18T08:34:23

As far as I looked at your site, it seems it is static, except for Javascript libraries and code.

Therefore what would appear to be sufficient is a little amount of Javascript programming; basically, you need to somewhere get the list paypal codes that should be used for each of your images, and then add those codes to the generated fancybox content.

To do that one of the ways would be to make an associative JS array listing all the images and their codes somewhere:

var paypalcode=[]
paypalcode['myimage1']='mypaypalcode1';
paypalcode['myimage2']='mypaypalcode2';

And after that somewhere, but most probably in the afterLoad function, you just have to insert the generic paypal code you listed, then look at which image you are currently displaying, and then add that particular image's paypalcode to the right paypal form variable.

By and large Stack Overflow is a site to help programmers and those who want to learn to program, not to do the programmers' job for nonprogrammers, so this is the advice given for somebody who would like to do it himself.

In your case it seems it could be a 1-3hour job for a JS programmer, depending on his qualitifaction and specifics of your case (ie. if you would like the paypal image codes to be automatically generated from your paypal listings, instead of maintaining a manual list on your site, it would be more automated, but also would take more time to do). Unless you are willing to learn JS to the extent that with possibly additional specific help you are able to implement the solution yourself, your best bet would be to hire some freelancer for this.

It is possible that somebody will come over and with some extra clarifying questions to you, do you a full solution here, but I would find it somewhat unlikely.

Adding paypal button in Fancybox pop up

1 Answers