I figured I’d dedicate a post to this topic since I just wrapped up a rather painful learning experience with skinning Shopify (the Ruby on Rails-based shopping cart service) with a complete Flash frontend. Judging from the lack of documentation online, I’m willing to bet I’m one of the first crazy enough to take on such a challenge, and I’d hope to save some other poor developer some time.

Shopify tools

For starters, here’s a few of the tools Shopify provides for skinning:

• Shopify’s API, which allows you to communicate with the inventory, products, collections, and cart on Shopify.com
• Vision, a toolkit for creating a Shopify theme.

Working with Vision

If you're wondering how to access Shopify's API for your store--and your store only, check this link in your Shopify admin.

I  started with Vision, which is this handy application that you can run locally, modify Rails/HTML theme files, and then test in a browser. Once ready, you simply zip up the theme’s contents and upload it via your Shopify store’s browser-based admin. A nice setup, though I came across a few technicalities–

• As of this writing, Vision themes are limited a 40 MB size limit, and rightly so, since it’s a browser-based file upload. I happened to be working with a site with roughly 300 MB worth of photos, so I was forced to host the assets on a different site.
• Shopify’s admin allows you to individually edit theme files, but if you want to upload a replacement you have to first delete the existing file. This made it very time consuming, since SWF files can’t be edited in a text editor.
• Themes are broken down into three folders:
  1. assets – files associated with your theme. Think images, javascript, swf files, etc.
  2. layout – this contains the theme.liquid file, which is basically the wrapper in which all of the templates are loaded
  3. templates – this contains a variety of necessary pages for a shopping cart site, like a product page, cart page, etc.

  A few things to note here: Unfortunately, I learned that the assets folder can’t contain subfolders, which lead me to a rather messy site structure. Your Shopify site will require all of the default template files. Since I was essentially rebuilding these all in Flash, I embedded my main SWF in theme.liquid and HTML-commented the include calls in theme.liquid.

Getting ActionScript working with Shopify’s API

The key here is authentication, as described in Shopify’s API. The API spits out XML, which is easy enough to parse in ActionScript, however, since API calls look like this:

https://API_KEY:SOME_PASSWORD@some-shop.myshopify.com/admin/orders.xml

they shouldn’t be queried from within Flash directly, as this exposes the shop owner’s API Key and password. Instead, it’s safer to create a server-side script, open the XML, and then feed it to Flash.

Once I got past this, it was pretty straightforward, with one exception–I couldn’t find the cart contents in the API documentation. After doing some asking around, I discovered that the cart contents can be found at your-shop.myshopify.com/cart.js. Now, unlike the API, this list of products contained in the cart is not XML, but Javascript Object Notation (JSON). Sure, I could have taken the time to write a JSON parser for ActionScript 3, but thankfully the good people at Adobe have already written one. It’s in as3corelib, which is hosted on Google Code.

Security and crossdomain goodness

Anytime a SWF file attempts to access content from a URL other than the one it’s on it first checks for a crossdomain policy. This is basically an XML file named crossdomain.xml that is hosted on the root level of the server (You can catch the dry documentation on this here and here).

Fortunately, Shopify has crossdomain.xml files prepared, however, it’s still a bit tricky.

Since they don’t want anyone hacking their main site, there’s no policy file on *.shopify.com. Granted, your-shop.myshopify.com has a policy, but there’s no way to pull your theme files.

In the end, I explicitly referenced all of my SWF files from static.shopify.com and relied on the crossdomain policy file on your-shop.myshopify.com, which looks like this:

<cross-domain-policy>
<allow-access-from domain="*.shopify.com"/>
<allow-access-from domain="*.myshopify.com"/>
<allow-access-from domain="www.mydomain.com"/>
</cross-domain-policy>


So that’s it in a nutshell. If you’re out there using Flash as a complete skin for Shopify, drop a comment and let me know that I wasn’t alone!

I figure I’d post this since I reached out to the Twitterati for reinforcement. I wanted to avoid the cliché of a red label and a character with horns, despite this being TorchBearer’s hottest sauce. Apparently my Twitter friends agreed, and I was able to convince the TorchBearer crew to go with something else.

As for the sauce itself, I have a bottle in my office, but haven’t touched it. Even I have limits

Is your laptop screen going dim when attempting to install Mac OSX 10.6 Snow Leopard? I figured I’d just mention this for those who have yet to install it.

I recently purchased a family pack and I proceeded to install the new OS on my unibody Macbook Pro–no problem there. Then I proceeded to install it on my circa-2007 all-gray Macbook Pro-and noticed that the screen went to minimum brightness. Initially, I thought it fell asleep, but after restarting it, it kept going dim. I then tried plugging in different external monitors–with no luck (the monitors kept turning off).

Finally, I came across this post on Mac Forums where someone used a flashlight behind the screen to find their cursor and complete the process. Hopefully, the word’ll get out.

Judging by the the bump in Twitter followers and the number of phone calls I’ve received this past week, I probably don’t need to share this link, but I/Hauck Interactive was featured in this past week’s Central Penn Business Journal.

(Yup, a little late with the link. I’ve been a bit busy)

My company just relaunched HersheyPantry.com,  making the site the second of four targeted to launch this month (the first being Broadway Video Digital Media, which provided a nice HII mention here).

I was pretty eager to redo the Hershey Pantry’s site because they have one of the best breakfasts I’ve ever had. Fortunately, they were very receptive to my recommendation of adding pictures of food to their site, so I did a number of photo shoots to provide all of the photographs. What I learned: Don’t take pictures of food on an empty stomach.

Okay, the kerning is off, but it’s still pretty cool.

Daphyn decided to make me chocolate mousse for Father’s Day this year. I guess I must be doing something right . . . Oh, and those gourmet cookbooks are definitely paying off

This past weekend I traveled down to University of Pennsylvania’s Wharton School of Business in Philadelphia (via NYC in a roundabout way) to attend HigherEdCamp Philly. My interest in attending was to see how others were using the Internet in their classrooms (I can’t imagine taking speech class with an assignment to record myself and post it on YouTube!).

I caught a session on Oscelot‘s push to promote Open Source tools in education, Flat World Knowledge‘s drive to provide textbooks online for free, and a pretty interesting study by MIT comparing the results between online classes and in-class presentations.

In being a good camper, I’m posting the slides from my presentation. It’s by no means all-inclusive, as I assembled it during breakfast.

Overall, I found this unconference to be rather refreshing, as attendees weren’t all tech-oriented (as they are at most BarCamps I attend), but were instead a mix of students, instructors, and administrators. Hopefully, the organizers will host another one next year.

During last month’s Central PA Tweetup I ran into a few friends that I hadn’t really seen since we were part of a group visiting Rome in 2002. The encounter reminded me of a Website of my Rome pictures I’d built shortly after the trip.

I posted the site to share the photos with friends (pre-Flickr, mind you), and I remember being scolded by people that were offended of a bunch of Penn State students hitting foreign bars so close to 9/11.

Apparently I’d taken the site down years ago, but I decided to restore it in its table layout, 800×600-supporting glory (you can check it out here).

The way I built the site and formatted the photos reminds me more of my age than any old picture of me ever would (Ugh, I’m getting old!).