Product Customizations

From Shopify Wiki

A brief but hopefully helpful tutorial by me, Dave, a.k.a hunkybill @ gmail dot com for getting some simple custom product information into the administrative back end for Shopify store owners.

This tutorial will be of little use for those who want to maintain a store that works without javascript. While it is possible to use liquid to provide the same end results, for a store with many products requiring customization, this javascript approach is very flexible and extensible. The javascript code presented will be as generic as possible, avoiding lock-in to any particular flavor or library since that is a choice of the store owner. We will use the example of a Product (called a Kit) that has three variants:

• Kit $100
• Kit w/Mill $200
• Kit w/Mill and Grinder $300

Each product variant selected is conditional on the shopper registering a choice of one of six types of cacao bean. In this tutorial, the options are beans. We can present these beans in a standard HTML select element or dropdown list to present the options. If no bean is selected, the Kit will be sold with whatever bean the store owner decides.

NOTE: For those selling clothes, this is all really the same as saying "I have a Product with 4 sizes and 10 colors". You would setup colors instead of beans, and perhaps use built in variants to present sizes with different prices.

Step 1: Create a Product Object

We will take advantage of the Shopify Blogs to enable us to customize our Products. When we create a product, we assign that product a type. If we create a Blog called products and create an article in that blog with a Title that matches the product.type, we can essentially inject some code into our product.liquid template that will enable us to customize products. If we have a product.type set to Kit, and a product blog article entitled Kit, the body of that article will be the following code.

<script type="text/javascript">

function initProduct() {
   var beans = ["cacao1", "cacao2", "cacao3","cacao4", "cacao5", "cacao6"];
   var product = {
     options: beans
   }
   return product;
}
</script>

Yes, this is a very *simple* Object but it serves to demonstrate the technique, not blow anyone away with complexity. You can make your options as complex as you want. If you save this you will now have a nice function you can call, which will return an Object with some options, specifically, six types of cacao bean. If you wanted colors instead, you might choose to embed this code:

<script type="text/javascript">

function initProduct() {
   var options = ["Red", "Green", "Blue","White", "Black", "Orange"];
   var product = {
     options: options
   }
   return product;
}
</script>

In order to pull this code into Shopify, it makes sense to pull it into the product.liquid template. This simple, brilliant hack (not mine!!) allows us to do this:

{% for article in blogs.products.articles %}
   {% if {{article.title}} == {{product.type}}%}
      {{article.content}}
   {% endif %}
{% endfor %}

If your product.type matches the blog's article title, and you view your source, you should see your javascript object. Note that if you wanted to do a customization per product, you would use product.title and create a corresponding article for each product. Yes, that sounds obnoxious, but you can really customize products sweet this way.

Another way to test if your object is functioning, would be to embed the following code in theme.liquid, at the bottom of the file.

<script type="text/javascript">
if(initProduct instanceof Function) {
   var product = initProduct();
   for(var i = 0, len = product.options.length; i < len; i++) {
      alert('Option ' + i +' is bean type ' + product.options[i]);
   }
 }
</script>

If you refresh your standard javascript enabled web browser while looking at your product, ie) view your product, with this code pasted in place, you should see an ugly Alert pop up six times, once for each type of cacao bean, color, etc. Notice how we have a Product with variants and additionally we now have six other options to play with? Now we can decide what to do with this extra information since we have established that a) it exists and b) that it contains some information we would like to pass on to the order for this Product.

Step 2: Presenting the Extra Product Options

We need to do something with the extra data on the Product page. My suggestion is to trigger a function when the product/variant is selected to be put into the cart. Saving a cookie with the variant ID along with the custom options is a good idea. Using a javascript Json encoding function, usually included with any decent library like Prototype, Moo, JQuery or Moo, you can save the options as the value of the cookie.

In cart.liquid, we have the usual for loop to dump the contents of the cart. We want to save each one in a javascript array. We also want to check to see if a cookie exists with the item's ID. If a cookie was written when the product was added to the cart, in the cart we can then use a Json decoder to create for ourselves a complete javascript object containing all the customization information for the Product. Plus, we can now provide customization for each item in the cart. When looping, we insert an empty container to hold whatever it we want to use to present the custom options. We can now grab a hold of this element once the whole page has loaded.

<div id="item:{{item.variant.id}}"></div>

Once the document has loaded, we can use a little loop to go through the array we created. For each item in the cart, if it has options assigned to it, we can build a drop down box of options, create a text box to collect extra data, etc. Once we have created the needed new DOM elements, we append them to our placeholders. That way we get custom inputs for each item in the cart, and only if we wanted it in the first place.

Since a person can change the quantity from 1 to 2, 3, 10 or even zero!! We need to take this into account. We read the value of the Quantity field which has a unique ID per product, and in that extra loop, we can then clone the elements we need and give them a unique ID based on the current quantity. Since updating the cart is a *submit* action, we can first save the values of any customization done in cookies for each item and quantity. That way, a shopper can add more things to the cart, update quantity and not lose what they have selected.

Finally, when the checkout button is pressed, we go through the cart one more time, and for each Product that was in the cart, we grab all the custom information collected and assign it to a hidden field, with the name=attributes[{{item.variant.id}}] attribute. The order administration now shows the Products purchased, and a ton of extra custom information.