Easy solution for product variations!

James L — Fri, 25 Apr 2008 00:36:07 +0000

If you want to add product variations, just like I did – you can take advantage of my 2-day hunt to find the answer!

In your admin section, click Assets. Click Theme Editor and under Templates click cart.liquid.

Scroll down the code until you see this:


<h2>You have selected the items below for purchase</h2>

        <h3><a href="{{item.product.url}}">{{ item.title }}</a></h3>
        <span class="money">{{ item.price | money}} each.</span>

Now all you need to do is add the following code here…


<label for="{{ item.title }}">CHANGE ME 1<label>
   <select name="attributes[{{ item.title }}]" id="{{ item.title }}">
   <option value="CHANGE ME 2" 
       {% if cart.attributes.item.title ==  "CHANGE ME 2" %} checked="checked" {% endif %} CHANGE ME 2 </option>
    <option value="CHANGE ME 3" 
       {% if cart.attributes.item.title ==  "CHANGE ME 3" %} checked="checked" {% endif %} CHANGE ME 3 </option>
</select>

For more options in the drop down, keep adding:


<option value="CHANGE ME 2" 
       {% if cart.attributes.item.title ==  "CHANGE ME 2" %} checked="checked" {% endif %} CHANGE ME 2 </option>

before </select>

Make sure to keep all “CHANGE ME”s that end in the same number the same as each other. So all three “CHANGE ME 2” should become the same word.

You can add another drop-down list just by copying the first code snippet, and customizing again.

After a purchase, if you go to your Orders page, the results from the drop-down menus will be shown in the orange “note” box.
Each result will be named as the exact product type it refers to, so it is easy to match it up!

Extra hint: If you have two drop-downs like I do (Fabrics and Colours), just add the word Fabric to the 1st form select label, and Colour to the second select label. So this:


<label for="{{ item.title }}">

will look like this:


<label for="{{ item.title }} Colour">

Just makes it easier to tell the difference at a glance.

Hope you enjoy guys!

James

James MacAulay commented

James MacAulay — Wed, 07 May 2008 23:47:50 +0000

That looks nifty, great work! It doesn’t look like it would really persist past the user clicking to update the cart, though, since this code…

{% if cart.attributes.item.title ==  "CHANGE ME 2" %}

...wouldn’t reference item.title correctly because it would take cart.attributes.item.title to be a literal attribute called “item.title.” Or am I wrong?

HunkyBill commented

HunkyBill — Thu, 08 May 2008 00:26:57 +0000

Hi,

I remember talking James through this one. He started with the basics, advanced some, and through persistance came up with his code here. It has numerous obvious problems, that I neglected to point out, but hey, he was on a roll. In fact, he went from an IF statement with 40 ELSE cases, to a CASE statement with 40 possible WHEN conditions, to this…so he was justifiably proud.

Why on earth would you, as a SHOPIFY DEVELOPER post to this with the question Or am I wrong?.

You think we, the community, will hesitate to jump on you and not ask the obvious question, If you don’t know what you’re doing, how can you expect us to stick with you?

Are you wrong? here James. Do you really not know your own Shopify? Hehehehe…..

Just having a little fun.. poking the dog with a stick…maybe he’ll growl… maybe he’ll bite…rrrrr… nice doggy…

puniour commented

puniour — Thu, 08 May 2008 02:27:17 +0000

Hey James,

When I goto “Templates click cart.liquid”, I dont see the code that you described? why?

tobi commented

tobi — Thu, 08 May 2008 14:10:54 +0000

HunkeyBill: I wrote most of the original code for Shopify and probably still log most surviving lines of code in the codebase as well as 100% of liquid but you are way ahead of me in terms of clever liquid applications :-)

James L commented

James L — Fri, 09 May 2008 01:15:04 +0000

Hey, looks like my old post finally got some attention!!

Thanks James – I think it’s nifty too :) but you’re right, it doesn’t stay put after an Update Cart.

Thanks again HunkyBill for even responding, and then helping me too – very kind of you. BTW, aside from the Update Cart issue which resets the selection boxes, what other problems are there?

puniour – The code might not be exactly the same in different themes. The one I am using is Tangerine but at the time of posting the instructions, I could have been using Summersteps. (I changed themes as Summersteps was not playing nicely) If you are having issues try changing themes.
Anyway, the code is still the same, it’s just a case of where to put it.

Tobi – you are a legend. Shopify is great. Just thought it had to be said.

: }}

P.S. Not finished yet, but this is my site showing the drop-downs:
http://m-interiors.myshopify.com/

Just add items to your cart to test them out.

James L commented

James L — Fri, 09 May 2008 01:36:23 +0000

... Thought I’d add a screenshot to show how the order looks when it comes through.

James L commented

James L — Fri, 16 May 2008 23:28:50 +0000

Does anyone know how to add these results to an email (formatted).

I can add them, but they come through as one long line of text, very hard to read, e.g. colourredfabricarizona

Is it possible to automatically format the attributes, similar to how they look in the RSS?

HunkyBill commented

HunkyBill — Sat, 17 May 2008 18:57:35 +0000

@JamesL

If your email is sent as plain text, the tab and newline characters will help…. they are ”\t” and ”\n” respectively. I think this is the case, but I am not 100% on that.. try it..

James L commented

James L — Sun, 18 May 2008 00:34:37 +0000

I can’t add tabs or line breaks, I’m just pulling the info from my drop-downs, which is something like {{ attributes.etc }}

Another question, is is possible for my drop-downs to only show up, when items in the cart belong to a certain collection. I don’t know how to do this in liquid, but it sounds possible.

I would only need a simple if/else, as the drop-downs should only be invisible for 1 category.

What I’m after is…

if the product in the cart belongs to collection A, show the following, else... don’t!