Gavin Terrill's Blog

Phusion Passenger RewindableInput Error Parsing with REXML

Ran into this funny little bug and didn't find too much about it on the interwebs, so for prosperities' sake here are the gory details...

The error is "RuntimeError: PhusionPassenger::Utils::RewindableInput is not a valid input stream. It must walk like either a String, an IO, or a Source."

The offending line of code occures when using REXML to parse an XML document as part of a webhook controller:

doc = REXML::Document.new request.body()

Under the covers, it is this line of code that generates the error:

/opt/ruby-enterprise-1.8.7-2011.03/lib/ruby/1.8/rexml/source.rb:21:in `create_from'

This is a rails 3 app, running under Phusion Passenger 3.0.10 and REE 1.8.7.

The solution, courtesy of jsierles, is to fixup Passenger with an ImprovedRewindableInput: https://gist.github.com/281126 Basically, create a /config/initializers/phusion-rexml-phixup.rb file and paste the code from that gist.

 

 

37 Signals Interviews Shopify

There is a nice Q & A with Shopify's CEO Tobias Lütke over at 37 Signals talking about the history, culture, product and philosophy of the company.

It's a great, motivating success story, and I'm proud to have played a small part of that by making the introduction to John Phillips after I had experienced the product and was so impressed with the company and technology choices:

We ended up taking an investment from an angel investor, who just called us up one day because he heard about our company. This is certainly an outlier, but taking this investment from John H. Phillips was probably the best decision we ever made. Apart from allowing us to meet payroll for the first year, he has spent countless hours teaching me all the things I needed to know about running a company. Without him, we simply could not have survived the years and would not be around today.

There are some interesting comments on Hacker News, including Tobi talking about a momentous occasion in their lifetime when the new business model was put in place (which I blogged about at the time):

The problem was that our old system was setup so that Shopify was very cheap for people who weren't successful and became quickly expensive for people who actually sold a lot of product. Everyone who expected to setup a 1M revenue store ( e.g. everyone ) picked up a calculator and realized that.

I really admire how Shopify stuck to their guns on the new pricing structure despite huge pushback from the community at the time. Now with the benefit of hindsight, it was clearly a very smart move.

jQuery Cycle Plugin - Adding Image Links

The jQuery cycle plugin is pretty freakin' awesome, but I couldn't figure out how to put a link behind each image. Sure there is a tutorial, but the images refused to show up no matter how much CSS tweaking I applied.

So I came up with a quick and dirty solution that uses jQuery to handle the click event for each image in the slideshow.

First the markup for the slideshow images:

<div id="slideshow">
  <img src="'banner1.jpg" alt="" rel="/" />
  <img src="'banner2.jpg" alt="" rel="/collections/skincare" />
  <img src="'banner3.jpg" alt="" rel="/collections/men" />
  <img src="'banner4.jpg" alt="" rel="/collections/men" />
  <img src="'banner5.jpg" alt="" rel="/products/the-ultimate-guide-to-beauty-by-anjana-gosai" />
</div>

It is basically the same as what you normally use, but each image has an additional "rel" attribute with the location to link to.

Now the javascript:

<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function() {
    jQuery('#slideshow').cycle({fx: 'fade', timeout:5000, speed:1000});
    jQuery('#slideshow img').click(function (){
      document.location.href = jQuery(this).attr('rel');
    }).css('cursor', 'pointer');
  });
</script>


I am adding a click handler to each <img> element in the slideshow div, and using whatever is specified in the rel attribute as the location to go to. Finally, I make the cursor a pointer for each image so the user knows it is click-able.

You can see it in action here.

Shopify Liquid Tip: Product Vendor Collection Handle

Here's a rather arcane one for you. It is very technical, very liquid (i.e. pertains to Shopify's templating language), and probably would be of interest to at least 2 people on the planet that I can think of, so please feel free to skip over.

Anyways...

In collection.liquid, you can find out what collection you are operating on using {{ collection.handle }}. For most collections it works quite well:

Collection	URL	{{ collection.handle }}
All products in "shoes"	/collections/shoes	shoes
All products in "shoes", filtered by those tagged "High Heels"	/collections/shoes/high-heels	shoes
All products of type "expensive"	/collections/expensive	expensive
All products made by Manolo Blahnik	/collections/vendors?q=blahnik	null

Can you spot the odd one out? That's right - collection.handle is null on the collection page when querying by vendors.

So, if you need to find out if you are on a vendor collection page, you will need to do something like this:

{% if collection.handle == null %}
 Browsing products lovingly crafted 
 by {{ collection.products[0].vendor }}.
{% endif %}

Multi-Level Shopify Sub-Menus

Recently I worked on a Shopify site (moderno theme) that required a multi-level navigation system for their extensive product inventory. Here are the steps:

1. Find a good menu-ing system

Dynamic Drive, Dev Snippets and CSS Play are good places to look. This is the fun part, but be careful as you can spend many hours wading through the plethora of options.

For this project, I went with cssMenus (a variant of the infamous and totally awesome Suckerfish menus). My main criteria for choosing the menu implementation were:

• CSS based
• SEO friendly
• Supports for nested menus at least 4 levels deep
• Easy to understand and implement

2. Integrate cssMenus into Shopify

This is straight-forward. First, upload the CSS and Javascript files to your theme (Admin > Assets > Theme Assets).

Now, add the following liquid code in the head section of theme.liquid:

{{ 'nav-vr.css' | asset_url | stylesheet_tag }}
{{ 'nav-vr.js' | asset_url | script_tag }}

Finally, set up your menu structure using standard <ul> and <li> HTML tags in collection.liquid. Here is an excerpt :

<ul id="navmenu-v">
 <li><a href="/collections/all">ALL PRODUCTS</a></li>
 <li><a href="/collections/dexterity">DEXTERITY</a>
 <ul>
 <li><a href="/collections/dexterity-usa">USA</a>
 <ul>
 <li><a href="/collections/dexterity-usa-colmor">Colmor</a></li>
 <li><a href="/collections/dexterity-usa-gilbert">Gilbert</a></li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

I placed this code inside the "collection-desc" <div>.

3. Creating Collections for each menu item

You will notice in the excerpt above that each menu item is associated with a collection.

I created collections for parent items as well, so that users can click on "USA" to see products across the child menus "Colmor" and "Gilbert". The naming convention I used means the names can be used as a breadcrumb.

The final step is to associate each product with the relevant collections. You do this on the product page - just check off the appropriate collections (listed on the right hand side of the page).

Summing up

Creating this navigation system for Shopify took about 2 hours. A lot of that time was spent coding up the list of menu items as there were a lot! For more information or help with this technique, please feel free to contact at Shopify Concierge.

Shopify Blogs Enhanced

Shopify continues to build out functionality, with the latest addition being support for blog comments.  This feature is great news for small businesses who are considering using Shopify as their CMS (as Karora is doing with their new site), in addition to their e-commerce needs. No longer will you need to integrate a separate blogging service (Typepad, Blogger, etc) with your store. A couple of cool features:

• It is possible to enable comments for specific blogs only.
• Comments are run through Defensio's spam filter, which has a 99.77% accuracy rate.
• The look and feel of comments can be customized using liquid.

Nice thing about this: pricing remains the same.

Ruby on Rails not ready for prime time

Ok, I admit it - it is a sensationalist headline, but I wanted to highlight something I came across this morning while reading "the dailies" (my battery of google alerts):

The other major weakness is the product is built using Ruby On Rails. Ruby On Rails seems to be a development environment with a lot of future possibilities, but as a general rule you don’t want your revenue-generating product to be based on cutting edge technology.

The quote is from a "Rick Wilson", listed as Executive Vice President of Miva Merchant, offered up as a criticism of Shopify.

Rick, small suggestion: stay clear of the techncial stuff.  It is hard to take someone seriously when they are willing to talk about things with authority that they clearly know very little about.

How to customize product colors in Shopify

I spent the weekend updating my Shopify backed site so that it now allows customers to choose their preferred flower color.

It involves a fair bit of javascript fu, utilizing cookies and JSON. Here is a write-up on how to provide product customizations for Shopify.

Help Wanted - Rails Jockey

If you are a gun RoR developer looking for an opportunity to work with some of the best Ruby talent in Canada then you may want to check out Shopify - Tobi and team are looking for help.

Shopify Changes Pricing - Community Not Happy

Pricing for Software as a Service is hard.

I used Shopify to build Poetry in Flowers. The thing that sold me on Shopify initially was the "If you don't make money neither do we" philosophy. Their model was a 3% commission on sales of less than $10,000 (2% above). That suddenly (i.e with no prior communication) changed this week with the announcement that they are going to a pay per month + commission model going forward (fortunately I am grandfathered).

There has been a huge backlash from the Shopify community, who basically feel they have been deceived by Jaded Pixel, the company behind Shopify. This also comes on the back of several outages while they moved their hosting facilities to Toronto. Personally, I will stay on because I am grandfathered, but I will be having a good look at alternatives for the next project. This is the rub for Jaded Pixel, a big differentiator was their no-cost-up-front price of entry.

Shopify was a long tail distribution play. The revenue from lots of little shops should be significantly greater than a few big ones. What they did right was lower the barrier to adoption - making it dead simple to create a shop and requiring no monetary commitment. But the problem is that each of these shops use resources - bandwidth, disk and compute cycles. My guess is a lot of those shops don't actually sell anything (could Pareto be right on this one too?),  so at that point the commission model is broken.

I wonder if there is a pricing model that would work with the no payment up front model? My suggestion is to price the service based on commission AND pay as you go based on usage of resources.

The thing I like about this is it scales. You can still allow a trial version with limited SKUs, or resource allowance. For the little guys, if you aren't selling anything you would still need to pay for actual cost of hosting your shop online. Successful merchants pay less commission, but would still pay fairly for the amount of resource they use.

Technically, I can't imagine this would be too difficult. Shopify already tracks disk usage and page hits. You can extrapolate compute usage based on those two metrics. I would price type of resource independently as disk is cheap, compute cycles relatively cheap and bandwidth expensive.

Logistically, this could be a challenge. You need to offer merchants a flexible payment system. Conveniently, one was announced today. The  Amazon Flexible Payment Service:

Using a capability called “Payment Instructions” developers can easily create the charging model that works best for them. For example, they can charge customers in small increments until their accumulated balance reaches a limit, pay a percentage of a digital transaction as a royalty, earn a commission on a marketplace transaction, or allow one customer to pay for another customer and limit their usage to a specific amount.

There is a lot to like about Shopify. I hope they can get this straightened out.