Lightbox 2 with Paypal Integration

[clangsdale]

This is a HOW TO on adding Paypal Integration in Lightbox v2.03.3. If anyone wants to transport the modifications to Lightbox v2.04 by all means :) (send me a link) I must admit something I did not do the original mods I found it on lancemissionart.com. And I decided to write this walkthrough - it's too important not to share.

See a sample of it on my site WARNING!!! The shopping cart is ACTIVE so be careful please.Chrislangsdale.com (http://www.chrislangsdale.com)
Step 1 -
Download the most recent zip of lightbox here (http://www.huddletogether.com/projects/lightbox2/#download)
Follow the installation directions...

Step 2 -
Replace lightbox.js with the modified v2.03.3 attachment

Step 3 -

<a rel="lightbox[Image Category 1]" title="Image 1" paypalform="" href="images/image-1.jpg"" ><img src="images/image-1thumbnail.jpg" border="0" /></a>

Step 4 -
Go to http://www.paypal.com
Create a Paypal Add to Cart button or a Buy it now button

Step 5 - Once the button is created copy the html and insert in Here (http://www.spacefem.com/tutorials/makecode.php) Html Entities Converter

Step 6 - Take the newly converted code and cut and paste it in between the quotes of
paypalform="" from Step 3

For example:

<a rel="lightbox[Image Category 1]" title="Image 1" paypalform="&lt;form target=&quot;paypal&quot; action=&quot;https://www.paypal.com/cgi-bin/webscr&quot;
method=&quot;post&quot;&gt;
&lt;!-- Identify your business so that you can collect the payments. --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;business&quot; value=&quot;kin@kinskards.com&quot;&gt;
&lt;!-- Specify a PayPal Shopping Cart Add to Cart button. --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;cmd&quot; value=&quot;_cart&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;add&quot; value=&quot;1&quot;&gt;
&lt;!-- Specify details about the item that buyers will purchase. --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;item_name&quot;
value=&quot;Birthday - Cake and Candle&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;amount&quot; value=&quot;3.95&quot;&gt;
&lt;input type=&quot;hidden&quot; name=&quot;currency_code&quot; value=&quot;USD&quot;&gt;
&lt;!-- Provide a dropdown menu option field, without prices. --&gt;
&lt;input type=&quot;hidden&quot; name=&quot;on0&quot; value=&quot;Color&quot;&gt;Color scheme &lt;br /&gt;
&lt;select name=&quot;os0&quot;&gt;
&lt;option
value=&quot;Select a color scheme&quot;&gt;-- Select a color scheme --
&lt;option value=&quot;Blue&quot;&gt;Blue&lt;/option&gt;
&lt;option value=&quot;Pink&quot;&gt;Pink&lt;/option&gt;
&lt;option value=&quot;Yellow&quot;&gt;Yellow&lt;/option&gt;
&lt;/select&gt; &lt;br /&gt;
&lt;!-- Display the payment button. --&gt;
&lt;input type=&quot;image&quot; name=&quot;submit&quot; border=&quot;0&quot;
src=&quot;https://www.paypal.com/en_US/i/btn/btn_cart_LG.gif&quot;
alt=&quot;PayPal - The safer, easier way to pay online&quot;&gt;
&lt;img alt=&quot;&quot; border=&quot;0&quot; width=&quot;1&quot; height=&quot;1&quot;
src=&quot;https://www.paypal.com/en_US/i/scr/pixel.gif&quot; &gt;
&lt;/form&gt;"" href="images/image-1.jpg"" ><img src="images/image-1thumbnail.jpg" border="0" /></a>

Step 7 -
Be sure to add a view cart button somewhere on the page - replace "notes@poconotes.com" with your paypal id number or email address on record with paypal.


<form name="_xclick" target="paypal" action="https://www.paypal.com/us/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="notes@poconotes.com">
<input type="image" src="images/btn_viewcart_SM.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="display" value="1">
</form>

Optional -
If like me you want to change the font color of the text above the drop down box of the paypal button - just add
<font color="#FFFFFF">Text</font> around the label for the paypal button then go and convert it Step 5

[clangsdale]

Found the guy that did the Javascript mods - Chris DiCesare - wanted to give credit - great work!

[clangsdale]

I noticed firefox was being resized when clicking on add to cart and view cart buttons. Here is the fix. For the view cart code for Paypal replace target="paypal" with target="_self"
And for the add to cart buttons replace "form target=paypal" with "form target=_self"

[PeterNic]

"If anyone wants to transport the modifications to Lightbox v2.04 by all means".

Has this been done, or what is involved?