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!

Using ReWriteRules to Improve SEO on a Tshirt Site

I was recently told by my SEO expert that my web site would rank higher for my search terms (Tshirts, Nerds, Recession, etc.) if the keywords appeared in my URLs.

I already had a categorical hierarchy, but was handling all my pages with one php file, section.php, which only needed a Printfection product or section ID to generate an entire page of relevant content and which sat in the root directory.

She suggested that my links, which then looked like this:

http://www.oncepressed.com/section.php?sectionid=293441

Would be much better regarded by search engines if they looked like this:

http://www.oncepressed.com/Tshirts/Clothe-The-Nerds/Back-In-Black



Getting this to work required a twofold approach.

1) I would need some help adding rewrite RewriteRules to my Apache configuration ...

and ...

2) I would need to change section.php to accept titles OR productIds as arguments.

You may have noticed, even as a casual web user, that more and more sites show paths rather than x.html or x.php files in the broswer's URL window these days. In the past, the only way to hide a script in a directory was to make it the index file. RewriteRules not only let you use different files as index was used in the past, but they will create the appearance of directories in your site where there are none.

The rewrite rules for my site (as written by my expert) look like this:

RewriteEngine on
RewriteRule ^/Tshirts/[^/]+/(.*) /section.php?section_name=$1
RewriteRule ^/Tshirts/(.*) /section.php?section_name=$1

This can be read simply as:

If a URL is presented to Apache, and it starts with /Tshirts, take the last field separated by slashes and pass it to section.php as a new argument called section_name.

The RewriteRules were done.

Next, I took on the PHP portion of the challenge by making section.php friendly to section_name OR section_id. At first I thought I would need a hard-coded look-up table at the beginning of my code to convert names to IDs. Then I had a better idea.

I wasn't currently using the "Teaser" field associated with each product in Printfection's API, so I decided that I would put it to use as way to do a name_to_id lookup in the MySql-esque Printfection database. I revisitied each of my products and sections and gave them a carefully chosen look-up-name in the Teaser field. This look-up-name would become the path to that product. See screenshot for clarification.

It seems that search engines also prefer that words be separated by dashes or underscores so as to read them separately, so I went with Citizens-Of-The-Word, rather than CitizensOfTheWord, my preferred method.

After adding the look-up-name to the teaser field and writing a lookup_id_by_teaser function which called the Printfection database, I had my ID and could leave most of the rest of the code untouched.

Any link code had to be revisited and converted to something like:

<?php
echo '<a href="'.$product_array->teaser.'">'.$product_array->name.'</a>';
?>

It was a bit more complicated than this, because, I also had to remember what my current hierarchy was before building the proper link, but by using the $_SERVER["REQUEST_URI"] variable to determine my current level -- this was a tool I did not have at my disposal before, I was thrilled that the browser was actually going to help me remember where I was -- I was able to solve this problem too.

In summary:

* RewriteRules are powerful tools for the SEO element of your site as well as ease of readability.

* I was reasonably happy with my final solution, but was unhappy to lose my Teaser field. Although I wasn't using it, I know others do and I may want to again some day. I played briefly with imbedding the look-up-name in a <!-- comment --> in the teaser field, but the inability of the API to query by wildcards prevented this.

Anyone else have an idea, short of using the Teaser field? I'd love to hear it.

See the new URLs in action: www.oncepressed.com

thanks,

-matt

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!