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!

Published by Justin Stern

Justin is one of our co-founders, and is our resident overengineer. He likes to write developer tutorials and make black magic happen in our plugins. He thinks that writing code is a lot easier than writing words.

7 Comments

  1. very useful!

  2. Hi!

    This seems to work only for selects, although it’s great.
    Are you aware of a way to set by url TEXT options (i.e. fill the input with a text)?

    Thank you

    • Sadly I’m not aware of anything for Text options, there may well be, but it would take a little digging. I was always surprised this feature wasn’t listed in the docs as it seems pretty handy

  3. I can’t get the bookmarklet to work, it just gives me a #. Do you know if there’s a way to export URLs for all simple products in magento? It would be great to add these to our google shopping feed.

    • Hey, not sure why the bookmarklet wouldn’t be working for you, last time I tried it worked fine. I’m afraid I’ve gotten a bit rusty with the Magento stuff as I now spend all my time working in WooCommerce. Best of luck!

  4. Hi!
    Thanks for that useful explanation. I successfully go to a configure product url by your link.

    But I want also to know that how can I directly add that configurable product to my shopping cart?

    I mean after a link clicked for example “/apparel/shirts/polo.html#132=51&133=1” it should add to basket?

  5. I thought all variations of a product were contained in the page already and displayed via javascript when you select size/colour etc.

    Passing the options this way seems logical to me. What ever size/colour you look at, the page from the server will be the same. Since it is JS that is displaying the one you want then it’s the JS you need to point in the right direction.

    I guess the page could have had the options pre-selected but that adds complications and upsets caching if the page is different each time.

    I think this method is quite elegant.

Hmm, looks like this article is quite old! Its content may be outdated, so comments are now closed.