Configure Magento Products by URL

Being able to link to a configurable product page with particular product options configured is clearly a valuable feature to have in an ecommerce platform. Both to satisfy one of the primary goals of ecommerce: reducing friction in the sales process (by having a product configured and ready for purchase for a visitor), and to meet requirements of services like Google Checkout by providing unique URLs to pre-configured products, are among the many reasons. Happily Magento gives us this ability, at least for configurable if not grouped products, though as with many features of Magento it’s not immediately obvious how to do so.

The Code

A clue to configuring products via a product page url can be found in the core javascript file /js/varient/product.js around line 289:

var separatorIndex = window.location.href.indexOf('#');

if (separatorIndex != -1) {

  var paramsStr = window.location.href.substr(separatorIndex+1);
  var urlValues = paramsStr.toQueryParams();

  if (!this.values) {
    this.values = {};
  }

  for (var i in urlValues) {
    this.values[i] = urlValues[i];
  }
}

this.configureForValues();

Here we find a snippet of javascript, who’s purpose is to yank everything following the hash mark (#) in the URL, treat that substring as a query parameter string, and finally configure the page product with those values. It’s a peculiar and for me unexpected method of passing parameters to a page and configuring a product. Typically parameters are passed to a page/script in the query string following the question mark (?) while the fragment identifier (that portion following the hash) usually identifies a portion of the document, allowing internal links that jump clients to a specific part of a page. While I’m sure there’s a good reason, I don’t know what the explanation is for Magento using the fragment identifier like a query string to configure products, but in any event it’s something we can take advantage of.

How To

To put the above theory into practice, view the source of your configurable product page, or better yet inspect with Firebug or your favorite HTML inspector, and locate the attribute ids and value ids you wish to configure. An example such as a shirt configurable by color and size might look like the following:

<select class="required-entry super-attribute-select" id="attribute132" name="super_attribute[132]">
  <option value="">Choose an Option...</option>
  <option value="50">Blue</option>
  <option value="51">Red</option>
  <option value="52">Green</option>
</select>

<select class="required-entry super-attribute-select" id="attribute133" name="super_attribute[133]">
  <option value="">Choose an Option...</option>
  <option value="1">Small</option>
  <option value="2">Medium</option>
  <option value="3">Large</option>
</select>

To configure ourselves a small red shirt we would construct a url similar to the following:

/apparel/shirts/polo.html#132=51&133=1

Any number of attributes can be configured in a similar manner, as long as you respect the precedence that you defined when setting up the product in the admin. For instance in the above example we can configure a shirt with a given color and size, or just a color leaving the size unspecified, but we couldn’t configure just a size.

A Helpful Bookmarklet

It can be tedious for a technical person, and perhaps insurmountable for a lay person, to construct the configuration URLs for more than a few products. To make this process easier I created the following bookmarklet to generate the configuration URLs for you:

Bookmarklet: Config Product URL

If you’re not familiar with bookmarklets, this can be used in the following manner:

1. Drag the above bookmarklet URL to your browsers bookmarks toolbar, where it is convient to click
2. Visit a configurable product page on your Magento site
3. Configure the product as you desire
4. Click the ‘Config Product URL’ bookmark and the browsers URL will be rewritten to include the configuration fragment. You can copy it and use it where desired.
5. Profit!