Saturday, 14 April 2007

Creating an ECommerce site using Adobe Photoshop Lightroom and the PayPal Shopping cart

In my previous post I covered what I have learned so far about Adobe Lightroom Web Gallery Templates.

Using what I have learnt so far I have created a template for web-gallerys that uses the paypal shopping cart. It's far from perfect..but I intend to re-visit the issues when I get a chance, and others might be able to progress things faster than me.

To use the template:

1. Download the paypalLightroom.zip file.

2. Unzip it to the Web Galleries folder (by default you don't have one so you will need to create it):
  • On Mac, <your home directory>/Library/Application Support/Adobe/Lightroom/Web Galleries/.
  • On Windows, put the gallery in C:\Documents and Settings\username\Application Data\Adobe\Lightroom\Web Galleries.

On a PC the Application Data directory is hidden so you will need to enable "show hidden folders" before you can browse to it.


3. Edit the transformer.xslt file:

near the top you will find a section that looks like this:

<!-- paypal Settings -->
<xsl:variable name="PayPalAccount">You@there.com</xsl:variable>
<xsl:variable name="ReturnScreen">www.test.com</xsl:variable>
<xsl:variable name="CancelScreen">www.test.com</xsl:variable>
<xsl:variable name="CurrencyCode">GBP</xsl:variable>
<xsl:variable name="CurrencySymbol">&pound;</xsl:variable>

<!-- Individual Sale Items -->
<xsl:variable name="Item1Description">10&quot;x20" Print</xsl:variable>
<xsl:variable name="Item1CodeNo">100</xsl:variable>
<xsl:variable name="Item1Price">150</xsl:variable>

<xsl:variable name="Item2Description">11&quot;x22" Print</xsl:variable>
<xsl:variable name="Item2CodeNo">101</xsl:variable>
<xsl:variable name="Item2Price">155</xsl:variable>

<xsl:variable name="Item3Description">10&quot;x20" Print framed</xsl:variable>
<xsl:variable name="Item3CodeNo">102</xsl:variable>
<xsl:variable name="Item3Price">150</xsl:variable>

<xsl:variable name="Item4Description">11&quot;x22" Print framed</xsl:variable>
<xsl:variable name="Item4CodeNo">103</xsl:variable>
<xsl:variable name="Item4Price">155</xsl:variable>

You need to change the values between <> and <> on each line to reflect your settings.

The Settings:





Setting Current Value Description
PayPalAccount You@there.com Your paypal account ID
ReturnScreen www.test.com URL to return to after a succesful purchase
CancelScreen www.test.com URL to return to after the user has pressed cancel
CurrencySymbol &pound; Currency symbol in HTML (£ = &amp;pound;, $ = $ € = €)
CurrencyCode GBP Currency code (GBP = pounds, USD = dollars, etc )
Item1Description 10&quot;x20" Print Description of first item type you sell
Item1CodeNo 100 A code number for this item if you have one
Item1Price 150 Price for item 1
Item2Description 11&quot;x22" Print Description of second item type you sell
Item2CodeNo 101 A code number for this item if you have one
Item2Price 155 Price for item 2
Item3Description 10&quot;x20" Print framed Description of third item type you sell
Item3CodeNo 102 A code number for this item if you have one
Item3Price 150 Price for item 3
Item4Description 11&quot;x22" Print framed Description of fourth item type you sell
Item4CodeNo 103 A code number for this item if you have one
Item4Price 155 Price for item 4


Having made all the changes, save the file.


4. Now use the new template

In Lightroom generate the web site using the new Paypal Template.

Summary

As I said it's not perfect yet but hopefully it will give those of you who wish to dabble, something to dabble with.


Update 16 April 2007

Improved version with forward and back buttons added.




Related Posts

25 comments:

SeanMcC said...

Hi Chris, this looks interesting. I'll have a look after work. Now if only we could get a way to confirm in Paypal and have sized downloads for automatic stock downloading!

Paddlefish said...

For Step 3, where you have "Edit the galleryMaker.xml file:" I think you mean to say "Edit the transformer.xslt file:" :)

Anonymous said...

Yes, it should be the transformer.xslt file. Also, when I click on the Paypal template in Lightroom I get an Adobe Lightroom fatal error and have to close out of the program. Must have missed something in the steps given. Is there a fully prepared sample folder that you can post to download?

Chris Shepherd said...

Hi Sean - thanks for that, auto stock downloading would be cool ;) Thanks for the blog link too - loads of people have suddenly arrived here!

Hi Paddlefish - your right! I've changed it.

Hi Anonymous! - No idea why you got an error. The zipped file as delivered should work straight off..it does for me.

SeanMcC said...

Hi again Chris.
Got time to look now. It's a good start. You still have a few issues in the template. Obviously you've started from an iView template and some of that code is in there. That's neither here nor there though.

Issues I can see: You need codes to be incremental on an image basis. This means that you'll need recursive code to do the increment as you change images. That way each image has its own unique identifier along with each print type required. This is what prevented me from knuckling into this project. I don't this it's that hard, but not as easy as straight code..
imageNumber:=1;
for imageNumber <maxImageno
printType:=1;
for printType <5
code"='imageNumber'-'printType';
write('code')
printType:=printType+1;
repeat;
imageNumber:=imageNumber+1;
repeat;

Wow.. my pseudo Pascal looks great.. kidding. I've seen code examples on assigning values and incrementing in XML/XSLT, but not looked in depth enough to attempt it..

As for the linkage, no problem, you've a better understanding of the actual coding than I, I've just broken stuff enough and figured how to fix it (er.. mostly).

SeanMcC said...

forgot the second issue: Clicking on the large image should go back to the index page, but doesn't.

A workaround for the pagination is just to have multiple galleries for now.

John said...

Glad you rose to the challenge! I guess the next step is to make the settings editable in the Lightroom right panel!

Chris Shepherd said...

Hi again Sean,

"Obviously you've started from an iView template and some of that code is in there."
Yup :) I was leaving them there as a jobs to do list.

"You need codes to be incremental on an image basis." Ok, I'm on the case. BTW, pseudo code isn't that helpful with XSLTs. It's a strange language based on pattern matching - unlike any conventional (c,VB,pascal) type language. For instance xsl:variables...arn't variable! - go figure.

"you've a better understanding of the actual coding than I, I've just broken stuff enough and figured how to fix it (er.. mostly)"
I spent 2 years writing xslt for a living. I'm no expert but I did pick up a few things.
With you starting from a working one & tweaking it, whilst I start from scratch and build up - between us we should be able to cover everything people need.

Chris Shepherd said...

Hi John,

"guess the next step is to make the settings editable in the Lightroom right panel!"

One step at a time John - but we will get there I recon.

Anonymous said...

Hmm, must be missing something. When I select some photos and then select the modified Paypal template, Lightroom locks up. Gives an error message and have to exit the program. Am using XP Home. Any suggestions?

Chris Shepherd said...

not sure whats happening there - maybe something to do with changes that have been made to it.

I will investigate a version that works in dollars.

Anonymous said...

Chris,

Exciting news on the LR paypal page you are attempting.

Your template came in fine, but I kept looking at the wrong place in the LR window to find it, me looking on left side when it shows up in upper right.

This looks good for prints, what about hres downloads of files for commercial work. How would that be handled from RAW (.CR2) files for example. It would seem one would have to have hres tifs available as assets, even then downloads size might be too large 50 MB + to be conveinent.

Is there an "engine" LR or web based, that can process and deliver hres compressed files to the web from RAW on the fly? Certainly can export jpgs or other to local hd from within LR, but that defeats the one source file mantra that I think we are all looking for.

Is there anyone else working on more custom LR web templates that you are aware of?

Good job, look forward to seeing more.

Russ Widstrand

Darryn said...

Hi all,
I've done some serious modifications on the original template and come up with this:

http://www.mckayphotography.com.au/weddings/amandajon/paypal

It works well, even identifying photos by their file name in Paypal. Havent used it with my wedding clients yet, but could be on the way.

Darryn
http://www.mckayphotography.com.au

jas said...

i downloaded and changed all of the aformentioned settings to when i create the gallery, but the words: "@filename" appears above "purchase this image". How can I get rid of that? Also, the add to basket graphic does not appear for item 1. How can I fix that?

Chris Shepherd said...

Hi Jas,

Sounds to me like you have an extra quote or angled bracket in the file.

I would suggest going back to the original files and making the changes again - without using and Quotes or angled brackets (using " for inches causes this problem).

HTH
Chris

imacken said...

Hi Chris. I have the exact same issues as JAS. Your files are totally unmodified and straight from the zip.
Any ideas?
Iain

imacken said...

Just to show you what the problem is Chris
http://uk.geocities.com/iain.lavache@btinternet.com/pp1.jpg
Thanks,
Iain

Chris Shepherd said...

Hi Iain - try the updated files from Here. They seem to work for most people.

Chris

imacken said...

Hi Chris. It was the updated files I was using!
Any further ideas? Did you see the screenshot?
Thanks
Iain

imacken said...

Hi Chris.
Did you get my previous comment, i.e. that I was using the 'new' zip files?
Iain

Chris Shepherd said...

Hi Iain,

Sorry I have no idea and I don't really have the time to investigate the problem. Maybe something has changed between the different versions of Lightroom.

Personally I gave up using LR for webgalleries as it is so complex and poorly documented (I use iView instead).

The best advice I can give you is to pop over to lightroomgalleries.com and use their templates instead. Joe and team have a lot more knowledge about this than me.

HTH
Chris

Anonymous said...

Best blog that I eveer seen!

Sydney Creative Photography
www.sydneyphoto.com.au

Infinity said...

Thanks so much for this posting. I've implemented this on our website to sell photography. It really works and was pretty easy to implement. Good work!

Infinity said...

By the way, this is where we implemented the technology...

Sydney Wedding Photography

Waqas Mushtaq said...

Mario Wedding Photography in Sydney: if someone needs any help please feel free to contact my developer at waqasc21@gmail.com