Syndicate

Feed

A store that sells popsicles

Let's start with a context, as a context makes the whole process fun. You want to sell frozen sweets. Each frozen sweet has its variants. Generally-speaking, these variants specify a quantity, and a flavor — and some sweets come with the option of being sugar-free. The following is a screenshot of the popsicle product page as it is now.

Your product page showing all variants without JavaScript

To be fair, there could be much more variants here. I was limited to 10 SKUs when I set up my fake shop for this tutorial. Still, seeing these 8 options in a table next to 8 radio buttons is not very pretty.

What we'd aim for would be something like this:

Your product page showing variants with JavaScript

The algorithm is super simple, and the JavaScript code needed to implement it will be easy too — easy enough.

  1. Hide the current selection box. (I say hide, not remove.)
  2. To the page, add select boxes and their labels based on reading the titles of all variants.
  3. Add a placeholder element to the page where we will display the price for the current selection.
  4. Add a listener to the new select elements so that whenever a visitor picks something from either of these boxes, we update the price displayed on the page and select the corresponding variant in the hidden select box. That hidden box will still be part of the document and its value will get submitted with the form when the customer clicks on the Add to Cart button.

That's it and all. Now, let's get to it.

Last edited by Caroline Schnapp about 8 years ago.

Comments

Before I buy, what exactly am I going to learn?

I'm interested, but you don't really tell me what I'm going to learn here.

Basically, I want to solve the problem of having multiple drop downs for my product options (variants) and auto-selecting the "best" variant combination. The solutions you've presented on the forums is not desired. For example, I always want this:

Option Color [ option 1 [V]
Option Size [ option 2 [V]
Option Length [ option 3 [V]

I don't want:

[option 1 / option 2 / option 3 [V]

Which appears to be the "go-to" solution in Shopify. No good.

If this article tells me how to get to multiple options selecting the next available "best" variant, you'll earn my 29.00CAD.

Regards,
Tim

Let's start with a context,

Let's start with a context, as a context makes the whole process fun. You want to sell frozen sweets. Each frozen sweet has its variants. Generally-speaking, http://e-papierossy.com.pl/en/e-papierosy/109-e-papierosy-zerok-z9152211.html these variants specify

http://e-papierossy.com.pl/en/e-papierosy/112-e-papierosy-zerok-zg5421.html a quantity, and a flavor — and some sweets come with the option of being sugar-free. The following is http://e-papierossy.com.pl/en/e-papierosy/114-e-papierosy-zerok-z5412.html a screenshot of the popsicle product page as it is now.