Product Customization Lesson

by HunkyBill - Member - 09:09PM, Nov 06, 2007

Hi,

There have been many posts in the forums about Product Customization and how the current product/variants scheme does not work. There have also been many examples of how to workaround this. Here is yet another example, using the very common I have a zillion products in a zillion colors with a zillion sizes and I can’t make 20,000 zillion products as an example.

You know that theme.liquid sucks product.liquid into itself, so if you declare some function in the product.liquid template, you can probably use it later, in theme.liquid.

In product.liquid, let us pretend we have a certain Product XYZ with some crazy crazy options… and we just can’t quite figure out how to collect the color and size without major obnoxious HTML surgery. If we edit the product description and stick this little code block in…



<script type="text/javascript">

function initProduct() {
   var colors = ["red", "green", "blue"];
   var sizes = ["small", "medium", "large"];
   var product = {
     colors: colors,
     sizes: sizes
   }
   return product;
}
</script>

We now have a function we can play with called initProduct(), which creates an object called product, with three colors and three sizes. I am assuming you can buy any Product XYZ you want, in any listed color, and any listed size.

Let’s flip now to theme.liquid where we hope our product.liquid template has been sucked in when viewing Product XYZ. What can we do? Try this one…


 if(initProduct instanceof Function) {
   var product = initProduct();
   //got my product.colors and product.sizes to play with now
 }

Now, we have product which is an object we can exploit any way we want on the product page. It’s not hard to create a couple of drop downs or some other elements from these values, capture the settings and write a cookie for the cart for example.

I wrapped the javascript in the Product description in notextile tags to ensure Shopify did not add markup to the javascript.

I have not used this technique for much, but it proves the concept that in just a few minutes and a few lines of code, you can have any product represented with any amount of customization on the Product page.

I am sure there are many superior techniques, but I thought I would throw this one out there for fun.

---

Implement the Logic.
Email: hunkybill@gmail.com
WWW: http://wiki.shopify.com/Resistor_Software

Last edited 09:10PM, Nov 06, 2007

Jump to comment form | subscribe to this topic

5543c76f3e68c16fc1618952de4d830a Alchemist John Member 11:34PM, Nov 06, 2007	Hey – Thanks! I was following along very nicely until I hit the “we leave the final coding as an exercise to the student”. :-( I know html pretty well, and code in other languages, but to customize Shopify has required me to become vaugely familiar with Liquid. I LOVE that it is customizable, but that knowledge base is starting to get a bit chasm like. I have a business (2 actually) to run, and I just don’t have the time and energy to learn even more. You make it seem SO easy, but those that know it always make it sound easy. That’s why I don’t tend to use the wiki pages. They assume you know more than they are saying and that gap from this user’s POV is just too much most days. OK, with all that off my chest, any chance I can request a Lesson #2? GREAT. I have SHIRTS that come in red, green and blue. How do I create a drop down for SHIRTS only, cause my PANTS only come in black and I don’t want a one item dropdown? And of course get it into my cart so my customer sees they ordered the right thing, and onto my interface so I know what to ship to him. Well, that is probably Lesson 3, 4 and 5, but are you game? --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
21b6cb8e51629521ad0d5dc8625c791e Russell Tanner Member 09:29PM, Nov 19, 2007	A less on 2 would be great! I think the lack of this type of functionality is one of Shopify’s biggest weaknesses. I’m not sure why this would not have been built into the core architecture.
d7d3e30deee39781c832d5c9efb7d58b HunkyBill Member 09:56PM, Nov 19, 2007	Hi, Well, I can see why they did not expand beyond Product + Variant(s). You cannot please everyone all the time, and inventory is notoriously variable. Beer is beer, but people who drink Molson or Labatt beer are drinking piss compared to comparable Ales and Lagers from almost any other brewery in Canada. Extending that, almost all mainstream American beer tastes like piss compared to almost any Canadian beer, or further, Canadian beer tastes like piss compared to most Belgian beer, etc, ad nauseum. That being said.. what do you want an example of to make you happy here? You can do anything with this technique but that leaves me kind of stuck with what you want to know. Give me something specific you’d like to see. Beware too!!! I do not use Prototype or Scriptaculous javascript, so what I provide to you here may be of less use to those who rely on those libraries.. although I can always make it as generic as possible. --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
5543c76f3e68c16fc1618952de4d830a Alchemist John Member 02:18AM, Nov 20, 2007	I put it right in my post, but here it is – I want to make this as easy as possible for you to assist. GREAT. I have SHIRTS that come in red, green and blue. How do I create a drop down for SHIRTS only, because my PANTS only come in black and I don’t want a one item dropdown? And of course get it into my cart so my customer sees they ordered the right thing, and onto my interface so I know what to ship to him. Well, that is probably Lesson 3, 4 and 5, but are you game? --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
d7d3e30deee39781c832d5c9efb7d58b HunkyBill Member 03:22AM, Nov 20, 2007	Hi, It is hard for me to answer your request. I need more information. You have Shirts, and Pants.. Is your Product a 3 color shirt, a one color pant, or a costume made of the both? I expect you know how to create a select element with options for your dropdown, and how to read/write cookies.. so your cart.liquid script can be made to deal with the options set on the product page… right? Please setup your scenario with more meat and potatoes and I will see what can be done to shed some light for you. --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
5543c76f3e68c16fc1618952de4d830a Alchemist John Member 05:44PM, Nov 20, 2007	I expect you know how to create a select element with options for your dropdown, and how to read/write cookies.. so your cart.liquid script can be made to deal with the options set on the product page… right? Nope – bad assumption. I don’t know how to do the dropdowns even, let alone cookies. Sorry. With that extra hassle in mind, let’s do this scenario if you are still willing: I have SHIRTS. They come in red, blue and purple. We need a drop down for those. They also come in small, med and large. Drop down for that. In both cases <select a color> and <select size a> should be default and not allow the choice until a selection is made. I have PANTS. The only come in Black. I am sure there is a liquid IF THEN statement that if there is only one choice (Black), then there is no drop down. And just to be crazy, since you mentioned it, I have a Product (the costume) which is one SHIRT and one PANT with the above options. Do I have to code all that again, or is there a way to replicate the choices? --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
d7d3e30deee39781c832d5c9efb7d58b HunkyBill Member 06:40PM, Nov 20, 2007	Hi, Ok. so you have one Product in your inventory, called Shirt. You have no variants of shirt. You have 100 of them. You have no real concern for how many RED SMALL vs. GREEN LARGE you have sold. Right??? Is that the way you run your inventory? Anyway.. If that is the case.. I can show you what to do. --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
5543c76f3e68c16fc1618952de4d830a Alchemist John Member 06:54PM, Nov 20, 2007	Yes, that is correct. I would inventory separately basically. These are sort of turning into Variants. Although, would what you have in mind work for Variants? Let’s still work with SHIRTS, but I will give you an real example of what I ask. I have various Kits. One is an “Alchemist’s Kit”. The current variants add different pieces of equipment for different prices. Kit $100 Kit w/Mill $200 Kit w/Mill and Grinder $300 In all cases a drop down of which cocoa bean (one of 6 I carry) they want in the Kit is what I am after regardless of the variant. In this case I would want a drop down, but would not be fussy if it is one “global” product drop down or three individual drop downs. Global would be nice. Seems it would be easier to code also. BTW, THANK YOU! --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
d7d3e30deee39781c832d5c9efb7d58b HunkyBill Member 10:01PM, Nov 20, 2007	Hi, I am stopping this thread, and will instead add a wiki entry for Product Customization. That way I can collect all my thoughts into one document and maybe some other coders can add their 0.02.. http://help.shopify.com/design/show/Product+Customizations --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software — Last edited 02:46PM, Nov 21, 2007
9886ab482258e3724ed7b49ccca7f08e Christina Miss Manners 10:59PM, Nov 20, 2007	anyway, this conversation caused me to go have a look at your site, John – wow! it’s fascinating. i’ll certainly be going back, there’s so much interesting stuff to read. & i suddenly felt hugely ignorant, just blithely munching on my piece of chocolate, without wondering for a second whether i was tasting earthiness, the liveliness of plum, bright high notes, or broodiness…wow squared. good luck with the customization! & thanks for the tutorial, Hunky Bill! --- operation absurdist feature requests: terminated (http://en.wikipedia.org/wiki/Absurdism)
5543c76f3e68c16fc1618952de4d830a Alchemist John Member 12:43PM, Nov 21, 2007	Not a wow cubed? LOL. Thanks Christina. Bill, Thank you yet again. If you would be do kind to drop a final post here with the link, so we know when and where to look, that would be great. --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate
d7d3e30deee39781c832d5c9efb7d58b HunkyBill Member 04:46PM, Nov 21, 2007	@Alchemist John I posted an entire Wiki article to the help system that you can use to putter around with the concepts I described. It may be too involved code wise for you, but I tried my best to keep it generic, simple, and easy to expand/enhance. http://help.shopify.com/design/show/Product+Customizations Hope that helps you, and others interested in the same thing. Dave --- Implement the Logic. Email: hunkybill@gmail.com WWW: http://wiki.shopify.com/Resistor_Software
5543c76f3e68c16fc1618952de4d830a Alchemist John Member 05:45PM, Nov 21, 2007	Dave (hunkybill) – thank you for the effort. You are right – it is too involved code wise. I had hoped to do it stepwise, suss it out each step of the way, etc, but that didn’t work out. So once again, it is just way to overwhelming like most of the help sections and assumes the user knows way more than most of us store operators do. I hope it helps others out. I do appreciate the effort even if it does sound a little like sour grapes. :( --- John Nanci www.ChocolateAlchemy.com The Art and Science of Homemade Chocolate