Just recently, ELC Innovations was approached by one of our clients to develop a custom web photo gallery that the client could use to sell photos from various events. The goal of the project was to create a system that met several requirements. The final solution was to use Photoshop Automator to add google checkout to a photo gallery.

1. The project needed to be done in one week.
2. The solution needed to be able to be reused for future events.
3. The solution needed to be created in such a way that a non-web programer could generate new content.
4. The solution needed to conform to an already existing site design.

This particular client spends a lot of time in Photoshop, and is very familiar with the tools, and its environment. Knowing that, we decided that developing a custom template for the automator web gallery function was the right way to go.

In the inital research phase of the project, there was not much out there for creating the custom solutions, especially when it came to integrating a shopping cart.

To make this solution easiest to implement, we went with Google Checkout, a great product, on par with using PayPal for order processing. They give many options for businesses, ranging from email invoices, buy-now buttons, 3-rd party shopping cart systems, to their own shopping cart solution. For speed of deployment, and ease of integration, Google's shopping cart system was ideal for this situation.

The Photoshop Automator solution woks by using a series of template html documents, and has its own language for replacement text strings to insert file name and meta data information into the gallery. The Photoshop action works by creating pages for each "full size" image, that is linked from thumbnail pages.

To implement this solution, we needed to edit the template that creates the page for each photo, to allow for an "Add to Cart" button, as well as activate the cart system in general.

The edits take place in the file SubPage.htm, and includes adding the custom code provided by google to implement your shopping cart that uses your unique merchant ID, as well as the code for the button.

The code for the button (appearing below) must be wrapped in its own table in order to function and render properly in this solution.

div class="product" br / input class="product-title" type="hidden" value="%FILENAME%" / br / input class="product-image" type="hidden" value="%IMAGESRC%" / br / select class="product-attr-custom" option selected="selected" value="Digital File" Digital File - $20.00/option option value="5x7 Print" 5x7 Print - $10.00/option option value="8x10 Print" 8x10 Print - $15.00/option /select input class="product-price" type="hidden" value="14.99" / br / br / /div

In this code, notice the use of %FILENAME%. We are using that tag from Photoshop to name the item to be purchased. So, when a shopper adds a particular photo to the shopping cart, the owner of the site receives and order for a particular file name, making it much easier to complete an order.

Also, the use of %IMAGESRC% in its current location, allows the Google Shopping cart to have an image of the photo(s) being ordered in the shopping cart. This gives the shopper confidence that the shopping cart is working, and that they will recieve the image they desire.

The final part of the code to note are the sets of options being used to power a pull-down selector. This area is completely customizable, and allows the owner to set various price levels for different services.

Once your custom template is ready, you can create web galleries, and get them published, ready to take orders through the Google Checkout system. In the coming weeks, I will talk a little more about the Google Checkout infrastructure, and how it can be used as a great solution for a small business looking for an inexpensive online sales solution for their site.

ELC