Last edited July 01, 2008
Multi-products variants (Workaround) This post is outdated
Hi Shopify gurus,
I'm just wondering whether you are considering the development of multiple products with related variants along with some other features you have in the pipeline.
In my own case, I want to be able to feature related products with multiple variants on the same product page, e.g. A set of bra and pant OR a suit of Jacket and trouser/skirt, each having its own variants such as colour and size achievable as a separate entity instead of the current practise of having to merge them together i.e. [Size - Small, Colour - Pink].
A good example of what I mean can be seen by visiting the ff link:
http://www.next.co.uk/shopping/women/petites/1/5
I believe there are website hosting of other stores out there that are in need of this feature.
I do appreciate what you guys are doing, please help.
Olu
www.cfancy.com
Cool, genuine + humble
www.cfancy.com
Posts:
Oh yeah ! In my case I have cosmetics and perfumes of different sizes and colour, but there are shareed attributes such as size and even colour, the ability to categorize attributes and have them available at product variant creation will only make our lives easier.
CookieMonster
http://aishwarya.shopify.com (pre-production)
Posts:
Hi,
I could easily build that for you.
You would have three Products:Each could come with size/color/style drop down variations.
Let me know if that interests you…
Dave
Posts:
It’s not easy when you have 8 ~ 12 variations, I my friend have products with different colour and sizes all with 1 SKU (I need the SKU for my inventory management. I already thought of that it’s un-manageable.
Posts:
Hi,
Not sure what your point is aishwarya. You can easily assign a single SKU to variants, where pricing changes per variant on some realistic hard attributes. The so-called fluff attributes, things that don’t affect price at all (is a red widget the same price as a blue widget – yes I think it is).. well these are all very easy to send to the order from drop downs provided with the product.
Seems pretty simple to me… but your mileage may vary of course…
Posts:
Good news to you all,
I’m glad to let you know that I have now solved one of the biggest obstacle I’m having using Shopify with the help of Hunky Bill.
I earnestly crave for the capability to be able to feature a set of bra with its respective colours and sizes for the bra and pant on the same product page.
Before the customisation, this is what it really looks like
http://www.cfancy.com/products/l425-seamless-racer-back-sports-bra-by-carrie-amber
having a combination of colours and sizes in a drop down menu, although, this is for a single product, a set is simply not possible.
After customisation, you have something like this
http://www.cfancy.com/products/plus-size-full-figure-bra-set-by-carrie-amber
Now, I am happy this great feature which is readily obtained with some other shopping carts, has been implemented by hunkybill@gmail.com
It has been a wonderful experience working with you, I must say, I’m really impressed with the level of work undertaken and the useful notes penned on the templates which was not included by my former web developer.
Thanks for your help.
Olu.
Posts:
Holy hell this is amazing!
I actually checked the database to make sure this is really Shopify. Just amazing what you guys can do with my humble tool these days :)
Posts:
so what is in the secret sauce?
Posts:
Nice work, Hunkybill ;)
Hunkybill’s doing some pretty creative product-customization stuff with javascript and cookies using whatever javascript library you choose to use (ie: Ext, jquery or pro-taculo.us—we dig Ext, especially)
I’m his partner at Resistor Software. Nice to see a happy customer show public gratitude like this.
Chris
www.resistorsoftware.com
Posts:
Yes, Hunkybill is doing AMAZING work. Please everyone, if you have a bit you need, he is totally worth it.
Shopify – take a hint. It sucks to have to pay someone else to make your “humble tool” workable for more than the most basic situation (and sizes and colors SHOULD be basic).
Posts:
I agree with Alchemist John, shopify is a little too humble at times.
And the support is poor for new users!
Posts:
I agree, this type of information and service should be available through shopify. It’s a very common issue.
Posts:
can you please do this so we can put up t-shirts with a drop down for color and size please?
Posts:
I second jj_bugs request. It would be great to have this option in the base code!!
Posts:
I third the request. I was one of the first bunch to join Shopify and this problem has plagued me ever since. My shop sells tees as well and it gets pretty ridiculous when you have to have variants for each size/color combo.
Posts:
I fourth the request.
Even for someone who’s not selling clothes… as this issue seems to crop up everywhere.
For example, my client is selling media that have 2 (not co-dependent) attributes: resolution and format. Each attribute has several options.
Posts:
Well, at least I’m not the only one struggling with this..
Posts:
I know what you guys are saying… You would think that with a cart you are paying for that something like this would be standard issue…
Phil
Posts:
Hi,
This problem is not really a problem. If you want the kind of functionality for your store that presents many options for any kind of product, and the options do not affect pricing, javascript works fine, in fact it works excellent.
Javascript is the lingua franca of web browsers. You either use it, or you have a site reminiscent of the early years on the web circa 1995-1999.
Enough has been written to fill a solid Wiki article, which I attempted a long time ago. The problem is, everyone has their own themes, layouts, and javascript libraries making the algorithms developed very hard to just give away for free.
You have to understand Shopify 100% and be a competent coder. Since most Shopifiers just want to sell their products, paying for this specialized service seems natural.
As for why it is not just built in…. choices have to be made when developing software. You provide 80% of what everyone needs and you’re in business. Trying to provide everything is a sure fire recipe for maintenance nightmares.
You get a steering wheel with your $500 used Chevy and you get one with your new $80,000 Lexus, sure, but in this case, multi-option products is more like having leather seats vs. cloth.
Posts:
I agree that it is a problem.
I think HunkyBill is doing a great service to Shopify customers to make up for this shortcoming, but judging by the incessant postings from confused customers I see that there is a real need for Shopify to offer multi-variants as there is constant demand for it.
Of course there is the complicated javascript solution, and even Tobi (above) has expressed surprise that Shopify is capable of offering multi product variants.
People are attracted to Shopify for the simplicity and price, and facing the daunting task of either coding it yourself, or paying someone more than the cost of a year’s Shopify’s service isn’t a friendly option.
Posts:
As I understand, the JavaScript solution relies on storing in a cookie the 2nd option selected (by buyer) on the product’s page, e.g. ‘color:red for cart item no 1’ (in plain english).
And then, on the cart page, one would, using JavaScript again, read that cookie and…
1- Write down the color picked in the cart item description and…
2- Submit that color info with the form using the cart ‘attributes’.
Am I correct?
A detailed algorithm is needed.
Actually, the Liquid variables we get are the same in all themes, for each template, and how we access the Cart ‘object’ and fiddle with the form—to add attributes—does not depend on the theme chosen.
JavaScript libraries look different, but they all offer the same tool set. (Some offer widgets on top.) You can select elements on the page, set attributes or CSS, wrap elements, move them, copy them, add event listeners to them, etc. A detailed algorithm would do the trick. One would be able to translate the algorithm in the syntax of his own library.
A coder competent with one JavaScript library, maybe..? If a detailed algorithm is provided by Jaded Pixel in the Shopify Wiki, I am sure that a few people will come forward and provide a detailed how-to using library x, z and z. Mark my words: I will provide one in jQuery.
I suspect that many Shopify users are intermediate users, that know HTML and could hack JavaScript. They’re just not as vocal on the boards as others. Or, these who cannot code may know someone who could, without prior knowledge of Shopify, and given the appropriate algorithm, code the solution for them in no time.
I agree. As a matter of fact, I just read recently (the opinion of the author of Designing the Obvious, Robert Hoekman Jr.) that any software company should concentrate on the 20% of their Nice to Have list of features that people will likely use 80% of the time. And drop the rest.
I am not sure where the multi-variant feature falls. From the look of it, it seems like 30-40% of buyers might actually use it. Maybe more. Not sure.
Posts:
Yay! Shopify – are you guys up to the challenge?
Posts:
@Caroline
If you want to scrape www.cfancy.com it comes with a fully working and tested jQuery library for multi-variant product drop downs.
If you improve that code, which is almost certainly possible since I hacked that together in no time with no jQuery experience… pass on the improvements to the community that uses jQuery.
Personally, I think the engineer in you sometimes forgets that non-engineers compute “provide an algorithm so we can make the code ourselves” as something akin to “Are you out of your f&&%#n mind, I can’t set the f&#&n ring-tone on my f&#^#n cell-phone, what makes you think I can convert a f*&##n algorithm of 100 lines into 400 lines of beautiful Javascript :)
Peace…
Posts:
@HunkyBill
I’m making some progress thanks to the code from your cfancy example. I’ve gotten drop-downs building via javascript, items are added to a cookie on cart.submit, and I can read the items from the cookie on the cart page.
However, I’m running into a problem: when I add the same item with different options to the cart, it doesn’t see the other item in the cart and append, it just overwrites the product’s options in the cookie and increments the quantity count. I see that on the collection.liquid you are pulling from the cookie somehow and pushing to the cart using the following line of javascript:
<script type="text/javascript"> cart.push({variant_id: '741541', quantity: '2' }); </script>My question is, how are you generating this line of code? I know that you get the variant_id from {{variant.id}}, but how do you know that there are currently two items of that variant in the cookie/shopping cart??
Thanks for your diligent Javascript hacking!
And Shopify, please don’t make me hack javascript for this feature! Please please please implement this in a clean way from the admin control panel. Pretty please. In the meantime, I shall hack.
Posts:
Hunky Bill,
The work on the cfancy.com site looks very slick, nice work!
If javascript isn’t switched on, then I’m unable to choose what size or colour I want.
I understand that javascript is becoming more and more commonplace, but we’re continually told that it’s best practices to have an app usable without javascript.
Then again, a quick skim through the admin section of shopify shows that a fair degree of the admin functionality doesn’t work without javascript enabled.
How have you managed to get around javascript dependency on client sites?
I ask, because I’m halfway theming a site, and it seems that without extensive hacking, your options are either:
a) slick like cfancy.com but reliant on javascript for users to choose their product properly
b) javascript independent, but much more clunky, and thus less likely for users to complete a sale
I can’t be the only one looking at shopify and wondering which road to go down when theming here.
Thanks for all the work so far, and sharing the code for others to build upon.
C
Posts:
Hi,
Javascript is the lingua franca, or dominant language of client side coding for web browsers.
If YOU control the server and the client, of course you can code a site to not need or use javascript. Since that is not the case here, you should by all means embrace it and use it wisely and to best effect.
Anyone who turns off javascript (yes, a lost sale in this case), is a weirdo in my books. Sorry, but it is just plain weird… if you think you are any safer browsing a Shopify site with no javascript… you probably also believe in fairies, elves and the tooth fairy. Some advice out there on the Interweb… like turn off javascript is best filtered with a dose of also asking very specifically…. why? To help blind people shop? To minimize Latvian hacker rings? Why? Good javascript is a good thing.
Thanks for pointing out the issue though.
If you want, just do this…
1) make the site work without javacript. Yes, it will suck, but it will work.
2) if the browser has javascript… build in all the fancy and replace the clunky code…
So… do twice the work, and double your sales??? Will it make even one extra sale?? Is it worth it??? You would want to know that right… and no one can tell you for sure ahead of time… the market is fussy…
Thanks for the thanks!!
Posts:
here here!
Posts:
@HunkyBill +1
Posts:
I have started working on a tutorial here: http://11heavens.com/shopify-multiple-attributes-without-variants
I hope it will be of help for those who already know a bit about HTML and web technologies in general.
I will be done in a week.
It goes into the details of the JavaScript implementation and I have set up a shop just for the purpose of showing the tutorial ‘in action’. The shop is here: http://11heavens.myshopify.com
Posts:
@Caroline This tutorial is awesome and very helpful! Looking forward to the completion of it. :-) Great great job!
HunkyBill’s code has been very useful as well. Nice to see more than one way to do things.
Posts:
& briefly peeking in, even the former Miss Manners is driven to exclaim, fuckin’ amazing, Caroline!
and you are indeed a woman of your word – as I am apparently not :)
Posts:
For folks looking for a mootools based solution, there is also this tutorial (also based on Vogue). The good thing about moo is that is used already by Vogue, so you don’t need another library.
Posts:
Kudos! A very nice donation of your time to write this up. Thank you for using jquery! (my fav) I was in the process of scraping cfancy for future reference. You have saved many people a bunch of time by volunteering to fill in this missing feature from shopify.
Thank you!
Posts:
You’re welcome, Jamie.
I can’t wait to fill in the second half of this tutorial, where I will show how to display the chosen attributes on the cart page and submit these with the cart at checkout… that part is easy enough.
However, some stuff that would be considered extra would be a little more involved, although I would still like to show how it can be done: for example, how to allow your customers to edit their options on the cart page, in case they’ve changed their mind. Hunkybill provided a particularly fabulous implementation for this ‘edit-in-your-cart’: http://customframesolutions.myshopify.com/
Posts:
The difference between my methodology and BBG’s is that I do not use variants at all—that’s the first difference I see.
So the method ‘saves’ on SKUs. But it is a little more complex I suppose.
Posts:
I just finished my tutorial.
The complete tutorial is here: http://11heavens.com/shopify-multiple-attributes-without-variants
It has 5 pages (or parts), you can scroll down to find the navigation buttons… and the Table of Content.
The Table of content (with links) is also in the left sidebar.
The site I worked on is here: http://11heavens.myshopify.com/
You can test the functionality.
You can download the theme here: http://11heavens.com/shopify-multiple-attributes-without-variants (Provided you register, and it is free).
The printer-friendly (but not forest-friendly) version is over here:
http://11heavens.com/book/export/html/433
If it’s useful to you, think about donating using Paypal (the link is here: http://11heavens.com/donate), or drop some change in my Tipjoy jar. I spent days working on this, taking time from paid work. But it was for the most part fun :-)
I hope it helps someone.
Posts:
Hey JP - why not give Caroline a BIG tip and pay her for this work and incorporate it into the core of Shopify?
I’d love to have the ability to do product variants, but am hesitant to custom code this much, since I’d have no ability to troubleshoot problems in the future. I’m not a programmer – just a typical shopify customer looking for a non-coding solution for managing a simple online store.
I hope you folks at JP can consider hiring Caroline to help you implement this for all of shopify, right into the GUI where it belongs.
Thanks.
Posts:
So Caroline,
(Since you are on such a great roll here :)...
When do we get to see part 3?
Effecting a price change on an object based on the dropdown selectors.
If a bag has an option for embroidery for instance which adds $5.00 to the base product price.
Or your bag can be bedazzled with rhinestones (gag) for an addition of $25 to the base product price.
Surely you knew we would want more! :-)
Posts:
You cannot affect price with JavaScript :-)
Price is something set in stone in the database for each variant, one way to change it would be through an API. But then the price would be set to an x value for that variant no matter what attributes are chosen for it.
One way to charge for these extras would be to create these extras as products in their own rights… and then you could, using the collection template, display one product and all its associated accessories… say rhinestones. You are free to show these products as if the main product is The Thing and the extra products add-ons…
You can save on SKUs like that, because if you have 10 products that all come with or without rhinestones, you only create 11 products.
10 products +
1 rhinestone product =
11 products
Instead of 10×2 variants (with or without rhinestones) = 20 variants.
You are probably better off using variants, if you can afford the extra SKUs. It’s simpler.
Posts:
So only by multipliers of a varient eh? That’s what I figured after looking at customframesolutions.com. Dang! I have a printing site that the options get far too long for to be practical. 70# paper X 5 quantities, 80# paper X 5 quantities and so on. It starts looking too damn messy with 30 things in a dropdown! No one can find what they want at that point. Oh what to do?
Posts:
Oh boy.
Your situation is probably the more complex to deal with, as you have a different price BASED ON each of these attributes:
1- Number of brochures
2- Type of finish
That list is just a little too long.
There is a way though to un-jumble the two ‘attributes’... using JavaScript. With some JavaScript code, one would take the picked option from SELECT box quantity, and the picked option from SELECT box finish, and determine what variant that is, then show the price for that variant. So, without altering your back-end at all, and without resorting to the cookie and cart.attributes ‘trick’, it is possible to break down this drop-down list into 2.
Is this something you can do yourself?
I could do this easily and for a reasonable fee. I am sure that HunkyBill can do this as well. (His fees are reasonable as well.)
Posts:
Caroline, I sent you a contact form to see what you think.
Posts:
I will give you quite a few hints here, Jamie.
I would use graceful degradation: everything would remain as is for those who browse without JavaScript.
Now with JavaScript enabled in the browser… the long SELECT box would be hidden,and 2 new boxes built (using DOM scripting). These 2 new boxes would NOT be part of the form. Event-handlers would be attached to them. When a selection is being made, in either box 1 or box 2, using Javascript we would go select the right variant in the hidden (LONG) box.
That’d be fun to do by the way. Let me know if you cannot do this on your own.
Posts:
Oh thanks, Jamie. Or messages here crossed each other.
Posts:
Ok, I’m following you until the point where I have to change my cart page. The problem is, is that I am using a different theme, so there is no HTML markup that looks like what you’ve got.
Posts:
Here’s a screen shot of my cart…
Posts:
What theme is this? I recognize one of the default themes. Do not have the time to run Vision now.
I will eventually provide a 2nd and 3rd tutorials, one based on another theme and that uses a mix of Shopify variants and JavaScript variants, and the 3rd tutorial will be based on the work I did for Jamie, which consisted in descrambling a long list of variants. Using jQuery.
You may reach me by using my contact form on 11 heavens.
Posts:
It’s the Minimify theme.
Posts:
Caroline, using your template, is it possible to have different variants for different products? i.e.- jerseys come in 20 colors and 5 sizes. Hats come in 5 colors and 2 sizes.
Posts:
Sure.
You can create different JavaScript arrays for different types of products (or different products) and build your select elements (for example) based on the content of these arrays.
The rest of the code will work ‘as is’.
Posts:
yeah… that sounds fun and all, but i’d like to take this opportunity to echo the numerous request for Multi-variants to be standard for shopify. Although Hunkybill and now Caroline would lose a little business, i think even they would agree that it would make for a better shopify experience! I was crossing my fingers in hopes that it would be a part of yesterday’s upgrade.
thanks for responding C. I’ve emailed you a few times to no avail, and held my breath as i’ve awaited a possible response to this post. Alas, you ARE real! I’d love to have you help me out, but that probably involves the green stuff that I’m lacking at the moment. Soooo… since i’m already paying shopify (or soon will be) can you guys PLEASE MAKE VARIANTS OF VARIANTS PART OF YOUR SYSTEM!
I must say, even scraping the surface of all this html stuff has been really cool! (yeah, now i’m really showing my rookieness)
Posts:
Will,
Just so you know, I really do not care about the potential loss of business for the variant code I had done. There are many other code snippets and services that address the many other things Shopify does not do in the bag of tricks. It is actually nice that Shopify is spare, sparse, what have you, since it works well in a sweet spot. I think it is preferable to nurture a third party developer community, as this has proven itself to work for many other systems.
Where you wish something was built-in, so do others, but when and where does it end? If you bloat Shopify, you certainly introduce other problems.
As mentioned many moon ago, from my perspective, the complexity of changing the variant handling code of Shopify is likely why you won’t see variant changes appear in an upgrade any time soon.
Posts:
Will, when you use my contact form, select the ‘request a quote’ option. These messages get transferred to my gmail account.
Other messages are sent to my domain mail which I only look at on a bi-monthly basis. I have 3048 registered users on my site. You read that correctly. And behind 11 heavens there is only one scared little girl : me. In my domain mail I get a lot of ‘thank you’ notes, ‘why will you not activate my account’ and ‘I need help! Urgent! How do you…But I cannot pay you anything!’.
I try and respond to most questions that are asked of me on Drupal.org. I created and maintain 4 popular modules over there, and provide help on the forums.
I do what I can. And like everyone else, I have to pay rent and live. My expenses are a little higher than most, as I am handicapped and need to drive an adapted vehicule to go places, and must live in a place with elevator, etc.
There is definitely a real person over here! :-)
Posts:
I am working on a second tutorial.
The fake site front for the tutorial has been set up.
Visit this page WITHOUT JavaScript, then enable JavaScript and refresh the page. :-) http://popsicles.myshopify.com/collections/frontpage/products/popsicles
(I wish I could use more variants but I am limited to 10 SKUs…)
The tutorial will be published soon.
This tutorial uses code that works for products that have any number of variants and categories of ‘attributes’: 2, 3, 4, etc.
If you know how to use Firebug, type
Descramblerin your console to see what this object holds.Posts:
You guys rock! I used methods gleaned from this tread to create a couple custom product pages! Works like a charm! THANK YOU!
http://www.fortunecookiesoap.com/products/create-a-set
and
http://www.fortunecookiesoap.com/products/custom-swirl-color
Posts:
I just wanted to hop on here and send some love towards Caroline, she is real, and awesome!
The plan she has in place for my store I have no doubt will have me fully up and running very soon. Before receiving her detailed action plan and quote, I really was a bit baffled about how I could recreate the functionality of my current, and far too costly store hosted by Volusion (www.woodeye.com) here on my new shopify store (www.woodeye-glassware.com). I had tried using the tutorials and forums, and made some progress, but the number and type of variations I offer on my custom glassware was literally giving me a headache… I just could not see how I could pull it off on my own, and I doubt I could have without spending a lot of time learning javascript rather than making my glassware.
I requested a quote from Caroline and she got back to me with great detail, and has proposed what I believe to be a very elegant solution for my store. I can’t wait to see it completed, and judging by the detail of the plan she presented me, and examples of her past work for other shopify users… I whole heartedly recommend her to others. Thanks again Caroline!
Posts:
Hey guys,
I have been following this multiple variant situation and thought, if I don’t vocalize then this may NEVER become a normal feature with Shopify.
Unless you are selling funny cat figurines then I cant see many stores that wouldn’t love this as a feature. From sizes and colors, to multiple size variations, and material options (ex. leather to pleather) to bathing suits that are a haulter top to a tank top option. I mean really, Caroline has been so awesome to create the code, cant you get it applied for all of us?
I am no designer but can copy and paste code chunks here and there but this one is over my head. I don’t want to screw it up and I dont want to keep grabbing a designer for something that is VERY standard for many other shopping cart systems and a common need for your customers….... Much like the common need for printing an invoice or packing slip for a customer or signing up for an e newsletter, but thats another section of this forum.
Shopify, please don’t waste Carolines hard work. Let’s Use it and increase sales and reduce customer confusion asap.
JP, Thoughts?
Thanks for all the hard work HunkyBill and everyone else and a huge thanks for Caroline for the tutorial.
Posts:
I second that emotion!
JP asked about “most wanted features” in their past survey, and specifically mentioned this as an option to vote on.
I would think they would not have done so if it were not something they would like to offer. I’m hoping it is just a matter of time and priorities. I want to believe.
Thanks!
Posts:
What Julene said :-)
Caroline, this is really terrific work. I upped the limits on your trial store so that you have access to all the features.
Multi Variants is across the board the most requested outstanding feature now by customers and JP employees. It used to be bulk import, discounts and comments for blogs(monday) but those are all done now. There are a lot of fingers itching to knock this one off the list in the office.
The reason for the lack of multi-variant support goes back to a design mistake i made almost 4 years ago in the early days of the software when it wasn’t meant to be more than a Snowboard shop for myself. At various times I and other programmers at JP tried to fix the issue but we always gave up because of the complexity of the task.
The good news is that we think we have a lock on the issue now. We found a way to implement multi-variants that will be backwards compatible, will not clutter the admin UI for people who don’t need it, will not significantly change the API and will work with existing liquid files and degrade properly if javascript is disabled.
Don’t expect this soon. For the forseeable future Caroline’s solution will be the best way to go. We will also try to make our official implementation compatible or at least reasonably simple to migrate to.
On a technical note: Our solution will evolve around the approach that the variant list can be read in a flat way with each dimension deliminated by either a slash (/) or a dash (-). We aren’t sure which character to choose yet. Unfortunately both are currently used by some shops as part of their variant names. We plan to add new liquid tags that will automatically generate the necessary javascript to split those variant lists into different drop downs. Any work done by the community in this direction will likely work when the official solution comes out and may even make it into the official codebase.
Posts:
Yay! I will be watching this post for updates.
Posts:
Caroline,
Thats pretty impressive – very nice work. Is there an option to use the Tags as the array generator? I’m looking to design a site to turn over to a client (for regular additions / changes). Could this be modified so that Colors (for example) could be separate tags and be passed to Checkout?
Thanks,
Jason
Posts:
Gee..
Caroline, thanks!
I wanna marry you.
Posts:
I finished a second tutorial that shows how to descramble a long list of Shopify variants using JavaScript.
The tutorial is here: http://11heavens.com/shopify-the-ultimate-variants-descrambler
It has 3 pages (or parts), you can scroll down to find the navigation buttons… and the Table of Content. The Table of content (with links) is also visible in the left sidebar when you look at any of the tutorial’s pages.
The fake site I worked on is here: http://popsicles.myshopify.com/
You can test the functionality, add something to the cart, and even checkout using the famous Bogus Gateway :-)
The printer-friendly version of the tutorial is over here:
http://11heavens.com/book/export/html/456
If it’s useful to you, again think about donating a little something, using Paypal (the link is here: http://11heavens.com/donate), or drop some change in my Tipjoy jar. I spent a few days working on this, taking time from paid work. But I enjoyed myself :-) I got no donation for the 1st tutorial, but eh! that is to be expected. We are all pretty much used to freebies on the web. It’s just that I cannot use AdSense on my blog cause I have used, on a few occasions, nouns that end with ‘is’.
Just to be clear, I do not understand Hunky Bill’s code, so I just figured out the methodology for creating JavaScript attributes from this thread and ran with it using my own coding style.
Something else: I came up with the Descrambler code thanks to doing some work for Jamie. Jamie perfectly understands JavaScript/jQuery but was a little too swamped at the time, so I helped him out. So you can thank him. :-)
@jmevius : Yes, and like I told you over e-mails, it is a very clever idea. Read your product’s tags, and build an array from them. Then use the Descrambler tutorial as ‘guide’ in writing that part of the code that will create the drop-down select element from your array. Look at the Descrambler.buildAttrLists() and Descrambler.addSelectBoxes() functions.
Right now, the Descrambler object uses any delimiter you like. By default, if you do not set Descrambler.delimiter to anything else, the code will use a dash. It will actually use space-dash-space, so that words that contain a dash will not break the code.
Thanks Tobi!
@Lloydie : Wedding invitations have been sent.
Posts:
How hard is it to make one of these multiple attribute solutions work with inventory? For example, we have a shirt that comes in 3 colors and 6 sizes but our inventory is small. So color #1 is only available in 4 of 6 sizes, color #2 is available in 3 of 6 sizes and color #3 is only available in 1 size.
I implemented this and it “looked” right but it made it seem like all sizes were available in all colors.
Posts:
Allo Yvette,
You would require what’s called in programmer lingo “interdependant” select boxes.
Based on a selection made in select box no 1, options in select box no 2 would be updated to new values.
Indeed. Logic must be added to the JavaScript. How easy can it be? For a programmer, that would be easy. I can do this for you if you cannot. Let me give you a few hints:
1- Better use a plugin to update the select boxes options. (Like in the Descrambler tutorial). That will minimize the code.
2- You will require to build a JavaScript matrix: a JavaScript object where the properties will be colors, and the value of each of these properties will be an Array of sizes.
Good luck!
Posts:
What’s the status on this happening. Also, has anyone posted a tutorial that doesn’t require payment.
Posts:
I just launched a site that uses this technique.
You can take a look at it in action at: http://www.lunandstella.com. Each birthstone necklace is either gold or silver and can have 1 to 5 birthstones (of which there are actually 15), so unique variants for each necklace was not realistic or possible.
Feel free to steal any front end code that you want, I implemented it using the YUI Library.
Posts:
Tlynch -
You’re missing a second a there… www.lunaandstella.com
Looks great btw, very smooth picking of options. How’s the YUI Library to work with?
Posts:
Been following this thread and I'm seeing most people seem to be working around this limitation by storing JSON in a cookie, but has anyone solved this with a non-cookie solution?
Cookies are limited to about 4k in most browsers, so this approach will fail for larger orders or orders with verbose options.
Thanks!
Posts:
@victorc,
I beg to differ. While you're right cookies have a limit, you have no limit to the number of cookies you write. Write one per variant and NOT one per store if you are challenged for space in 4K. And secondly, how do you propose to persist anything as people bounce around the site? If you don't use cookies, you're going to do what? Cookies are made for this activity and since Shopify does not work without cookies, why not embrace them. They are easy to use.
Only once has a site I tricked out ever had a cookie size issue, where 30 custom attributes per variant would bomb it out, so I changed the verbosity a bit and now it is 40 attributes PER variant.
So your perception of #fail here is not something most people ever need to worry about.
Posts:
@HunkyBill:
Thanks for your suggestion. Embrace the cookie, huh? I'll look into using one cookie per variant. Though I thought there was also a limit on the number of cookies as well. Something like 20 per server/domain per the RFC?
The use case for the client I'm evaluating Shopify for could exceed the 4k limit on large orders if we used a single cookie but I can see how multiple cookies might work.
Still I wonder if there would instead be a cleaner way to use the cart's attributes feature itself to store state there since it appears to be managing it there already. And it looks like ultimately that's where it has to go into the order anyway? I'll delve deeper...
I'm completely new to Shopify so we may be looking for a consultant to help us out on the cart to speed things along. Would you have any availability this month?
Thanks again.
Posts:
@victorc,
You can stuff as much data as you want in cart.attributes. If you code it cleaner than using cookies, by all means skip the whole exercise of using cookies. If you know apriori that your client's store could commonly generate a cart with > 20 full cookies of extraneous data maybe your not thinking of using Shopify quite right? That just sounds like a recipe for disaster.
I use cookies judicously, and where burning an SKU gets you nowhere, especially to collect important but ultimately fluffy information, that does not affect cost.
For other uses YYMV... I am always open to work that pays the going rate for my skills.
Good luck!
Posts:
You could try storing it using javascript window.name although it's a while since I've done this. Take a look at this article http://www.sitepoint.com/blogs/2009/09/02/cookieless-javascript-session-variables/ to find out more.
Posts:
window.name is not the end all be all. In this era of tabbed browsers window.name gets weird treatment by browsers. There is no reason to expect it to work, or not to work, it is what it is, leaving a wee bit of uncertainty in the equation.
Also, that Sitepoint article had a minimum of one BAD statement, that per domain cookies are limited to 4. ???? Um. Ya. Right. So if that was so wrong, I would not take the author too seriously.
Anyone care to show me a browser that chokes on even 30 cookies per domain? Anyone???
Posts:
Most browsers support 50 or more cookies per domain, including IE: http://www.infoq.com/news/2007/09/iecookies
Gavin.
(I have it on good authority that the author of that article is also rather dodgy...)
Posts:
Thanks for everyone's input and suggestions.
(@HunkyBill: I'll talk to my project lead to see if we have the budget for a Shopify consultant and speak with you offline about your rates and availability.)
Here is what the cookie RFC says (below). Draw your own conclusions but I think coping with the loss of a cookie would mean clearing out the cart altogether and making the user start over, otherwise critical data about the order would be missing.
Regardless if there is a choice between managing critical state on the server in a database versus the client, I usually opt for the former. So if cart attributes are managed that way, and if there's a way using the JavaScript or server-side API to do so, then I think that would be a more robust/reliable solution. I've played around a little and see that I can add and modify cart attributes but I can't seem to delete them, only set their values to null. In fact the API for clear doesn't appear to clear out cart attributes at all; they only seem to be cleared completely when an order is placed. I assume that is intentional so that they can hang around if a user comes back, though I wonder if I can get to the JS code for clear.js to verify that.
http://www.ietf.org/rfc/rfc2109.txt
Posts:
I should clarify that when I say a more robust/reliable solution, I mean one that NEVER fails. The last person I want to penalize is a customer with a very large order that has gone to a lot of trouble to define their chosen products' feature set. ;-)
Posts:
Never say never.. it is the web after all.. if you're so serious about Never Fails... don't bother using the Internet. Additionally, if you're clients are so concerned, why don't they run their own e-commerce instead of a hosted one? Makes no sense to say NEVER fails and then trust your empire to others... whatever rocks your boat...
Posts:
@HunkyBill:
My point is that I wouldn't want to *knowingly* build something with a flaw in the architecture or code that would penalize my client's best customers. That's just not acceptable. Of course, we can't plan for everything, but for those things we can, we hopefully do, and for those we can't, we respond as best we can. Maybe this is naive but it's worked for me over the years and I've had a lot of happy clients and employers because of it. I've personally never had an order fail for me using Amazon, so why would I accept less for my client?
Personally, I've never used a hosted ecommerce system like Shopify, but I wouldn't want to introduce a layer of unreliability to it, especially if, as you seem to imply, there is already that layer.