Monday, July 03, 2006

Online ordering available

I spent the last 5 days or so (or at least, what time I had available) working on getting online ordering available from my website ( I thought I'd just post a little about what I did there.

It starts with your standard process: view each image, when you find one you like, click the buy now button, and then choose your print size. From there is where it deviates a bit from what most other photography sites I've seen do. Typically, everyone sells prints online unmatted. However, I feel having the prints matted provides a much stronger product offering.

Of course, the problem becomes how to show them online in their matting. You could take a photo of each photo in each matting combination you offer, but that can get to be time consuming and tedious each time you add a new photo to your collection. You need to setup the print and your camera, adjust it all so it's at the proper angle and so that there aren't any glare or reflections on the print, load it into your photo program, do any color correction, cropping, transformation, etc. It really can get to be a lot of work. And then what happens if you later want to offer a different color matting on a photo. Start all over.

I set out to solve this with a bit of my computer programming know-how (after all, web development is a large part of my day job). I started by taking a piece of each color matboard, scanning each one into Photoshop, cropping it down to a 200x200 pixel image, touching it up so it can be tiled seamlessly, and saving it to a jpeg file. Then I created a database table to catalog each mat color with a unique id#, color description, file name, and core color.

GEEK ALERT: the following paragraph contains some web development techno-jargon which may not mean a whole lot to you!

Next in the HTML for my web page, I took the photo's IMG tag and wrapped it in 4 DIV tags. The first (outermost) one represents the width of the outer mat. The second one represents the bevel of that mat. The third and fourth tags represent the width and border of the inner mat. The 2 mat DIVs were CSS styled to have enough padding to give them their appropriate dimensions. The web page (which is actually a PHP script) then dynamically generates a series of CSS classes for each mat color. Each CSS class simply specifies to use the corresponding jpg file to tile the DIV's background. I also generate a corresponding CSS class for each mat color which defines border colors that will give the bevel DIVs the appearance of white core or black core bevels. Finally, I have javascript code which, when given a pair of colors (or a color and no second mat) assigns each of the 4 wrapping DIVs to have the appropriate CSS class to give the appearance of the desired matboard (or matboard combination).


For each photo I have defined an "Artist's Pick" color combination(which I think best accents the photo), a simple single layered white mat option, and a pick-your-own custom mat option.

Now we are back to the ordinary shopping experience. After you make your selections, you can add the photo to your cart. The cart stores all of your choices in a database, calculates prices and totals, and handle discounting options. The discounting option was bit complicated to work out in a reliable and flexible manner, but I eventually got it working...I'll leave it at that save you from having to sit through another geek alert.

When you are done and go to checkout, you are presented with 2 options. The first is to order online, which sends all of your cart data over to paypal, where you can pay with either a credit card or a paypal account. The other option is a mail-in order form, where you can pay by credit card, check, or money order. This option gives you an order form with all of your photos and pricing filled in. You simply print the order form, fill in your name, address, etc. and payment information, and mail it to my PO box.

Now I just have to sit and wait for my first order to come in...any blog readers want to volunteer (you know one of my photos would look perfect in your living room) :-) I'm always nervous when rolling out new features like this. I did extensive testing but I'm still paranoid I overlooked something critical.

Now that this is done and out of the way, I can get back to working on my prints. Maybe I can get everything all done and ready in the next day or 2 so that I don't have to stay up until 1AM the night before this weekend's show. It's feeling really good to have my initial shows out of the way and to start to fall into a regular, less panic-filled routine each time, as all the additional pieces of the puzzle gradually fall into place. Maybe one day soon, getting ready for a show will be as routine (in a good way) as getting up for work each weekday. Probably not, but one can always hope.

No comments: