Fully API'ed and Open for T-Shirt Business - Part 1

Part 1 - The Product Page.

This summer the OncePressed T-Shirt store began using the Printfection API with happy results. We were initially only using it as a kind of showroom for store sections, though, and when it came to business, we reverted to Printfection for the product customization page, cart and ordering.

I am happy to announce that OncePressed now supports the API through product customization and cart handling and gracefully hands off the process to Printfection to accept payments (there is no other option for this and frankly, I am happy not to have to run a secure server and handle credit cards.)

In the process of reverse-engineering the Printfection product page (where sizes and colors are chosen) we lost a few features, then went one better. Printfection version. API Version. One casualty of our implementation was the tabs above the product image. Of the three, "Detailed Images," "Pricing" and "Size Chart" (we've got a replacement for this) Size Charts will be missed the most. Another casualty is the ability to order more than one sized product at once. This doesn't seem like a very commonly needed featured and can be worked-around.

Improvements we've added are mostly gathered through the addition of FancyBox, the jQuery answer to LightBox. A "Zoom-It" link is our answer to the "Detailed Images" tab as alluded to above. The greatest improvement provided by using FancyBox is the requirement of full-page reloads to see product options. (I'll be blogging about my new-found love for FancyBox, , in another post. Could I please have more Kool-aid?)

Much of the complexity of the code behind the Product page was reduced, but the biggest remaining problem? Page load time. This hurts. The reason? Too many API calls. Printfection has the advantage of being able to make speedy local SQL calls. It takes on the order of 15-20 API calls (the more colors, the more calls) to build a product page and this is mostly tied up in the generation of the Javascript which provides the ability to dynamically change prices based on size and color. This is a feature I just couldn't give up. My next experiments will involve moving any delay-able calls later in load time to allow the page to render and to add a Spinner as they complete. This will relieve customer anxiety with an explanation of load times and give them a chance to hit Back if they already don't what they see. (I believe it's better to send the customer on look at another product than to annoy them into leaving.)

In summary: We are very happy with our simpler product page, but wish it were faster. Efforts in that direction will be our next project.

Please post any questions or contact me directly. I am happy to share what I've learned.

Up next ... Part 2: The Shopping Cart!

Read more!

My Printfection API T-Shirt Store Generator Code

The t-shirt store portion of oncepressed.com is running in my custom PHP. That PHP is calling the Printfection API to build the entire store. I'd call the code about 50% solid at the time of this writing.

Over the past few months I have been testing this code on oncepressed.com and will some day make it available to the public, depending on interest. It is essentially a way to run existing Printfection templates from your own domain. It is similar, although much less feature-full, to an existing product called myPFstore made by an Australian developer who got so involved in Printfection customization that they ended up hiring him.



Some highlights of the store-generator are:

* All pages and breadcrumbing are handled in one file: section.php which, for the purpose of visual clarity, includes a few files with self-explanatory names like header.php, menu.php, footer.php and functions.php.

* Every page, even index.php calls section.php since even the top level of your store has a section ID.

index.php ends up looking like this:

<?php
$section_id = "254933";
include 'section.php';
?>


The advantage of this is approach is that you only have to maintain one main body page for the whole site.

Other niceties of this burgeoning platform:

1) I have maintained the standard Printfection DOM, so any template CSS should still apply nicely.
2) I have referenced every field possible in your Printfection settings, so that you can still change most of your site without touching PHP. You can definitely add products and sections without worry. You can also change things like Store Title and Description and have your site automatically updated.
3) When you are ready to touch PHP, I have extended the template approach adding new variables to the header.php file like $header_code (for an advanced header or sale section) , $footer_code (I use this for a "popular designs" section) and $title_appender which can add a string to all titles to help your AdWords landings.
4) Other fields in header.php (because I was surprisingly unable to grab these through the API) are $meta_keywords and $meta_description. If anyone knows how to pull these through the API, I'd love to hear how.
5) I even fixed a Printfection bug in my code and the section marker tick graphic will stay, marking a major section you've entered, no matter how deep you descend into it.

The only time a user's browser will actually see the printfection.com URL is when they go to place an order, which I've done as a browser pop-out to let the user know this change is happening. But this is not as jarring as you may guess since you can have the exact same template in both places, I have even failed to notice the transition myself. You can see this in action on my site by choosing a shirt type: http://www.oncepressed.com/section.php?sectionid=282113 (Hell, while you're there why not buy one.)

To do:
1) Image and content caching per the API conditions.
2) Handle the shopping cart portion of the purchase as well.
3) Extra link handling (like the link to this Blog)
4) Being able to list popular designs by number to create the "popular designs" section
5) More things I haven't thought of yet, I'm sure.

My general impressions of the API are good. Documentation is excellent, although, examples are few. What was written is excellent and was put together by the previously-mentioned Australian gentleman named Gavin. I started right where his examples leave off. It seems the few adopters of the API who have used it have had the idea of extending the functionality of the store and to make new products, I just wanted to put it under my own roof.

Stay tuned to track my progress and feel free to post any questions. I'm holding on to my code for now, though, as I haven't decided just how I'll distribute it.

thanks,

-matt

Read more!