I'm running circles here and I'm out of idea's/google searches. There are so many different examples but all seem to do something different or don't work. According to shopify, this is the only documentation I can find around using their API: /tutorials/customize-theme-use-products-with-multiple-options

A ghost object I see, no matter, more and more searches I still can't figure out what this parameter is supposed to be.

I've attempted passing a json object of products as I've seen it done in various other theme examples:

  var product  = document.querySelector("[data-product-json]").innerHTML,
  product = JSON.parse(product || '{}');
  console.log(product);
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect-' + product.id, {
      product: product,
      onVariantSelected: selectCallback
      });
  });

The console log gives the correct object and json, nice.

OptionSelectors errors out:

Uncaught TypeError: Cannot read property 'parentNode' of null
    at Shopify.OptionSelectors.replaceSelector (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
    at new Shopify.OptionSelectors (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)

I've given it just the product.id and various other things.

I'm going to out on a whim here and say the Shopify documentation is detailed, yes, but it is not developer-friendly in my opinion. They give you so much information but never what you really need.

I'm running circles here and I'm out of idea's/google searches. There are so many different examples but all seem to do something different or don't work. According to shopify, this is the only documentation I can find around using their API: https://shopify.dev/tutorials/customize-theme-use-products-with-multiple-options

A ghost object I see, no matter, more and more searches I still can't figure out what this parameter is supposed to be.

I've attempted passing a json object of products as I've seen it done in various other theme examples:

  var product  = document.querySelector("[data-product-json]").innerHTML,
  product = JSON.parse(product || '{}');
  console.log(product);
  jQuery(function($) {
    new Shopify.OptionSelectors('productSelect-' + product.id, {
      product: product,
      onVariantSelected: selectCallback
      });
  });

The console log gives the correct object and json, nice.

OptionSelectors errors out:

Uncaught TypeError: Cannot read property 'parentNode' of null
    at Shopify.OptionSelectors.replaceSelector (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)
    at new Shopify.OptionSelectors (option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1)

I've given it just the product.id and various other things.

I'm going to out on a whim here and say the Shopify documentation is detailed, yes, but it is not developer-friendly in my opinion. They give you so much information but never what you really need.

• javascript
• shopify
• liquid

3 Answers 3

Shopify products have a pretty simple, but weird in a way organization. First off, a product has an array of up to three things known as options. Can be empty. But as soon as you assign an option to a variant, this gets filled in. So you have your three options. Eg: Name, Size, Color, Material and on and on.

A variant has the actual value of the options. So if you provided option 1 as Size, a variant would have option1 equal to a size value, like "large". Repeat and layer in the other options, till a variant perhaps has 3. Now, reverse that process to simply get an ID so you can update a price, or some other logic!

So in this way, up to 100 variants can have 3 distinguishing options, all different. Going way back to Shopify early days, they produced some code that ended up lasting about ten years, and your snippet of OptionSelectors is an offshoot of that mess.

The challenge is to do what that old code did, but for your theme purposes. Many libraries and themes have done just that. But be aware they also used code that is not exactly easy to fork and use for your own purposes either.

So if you find hacking this old Shopify code to be a mind-numbing experience, you might do better to just rebuild Humpty Dumpty yourself so you pletely understand it. You do not need to use their code. It is also super confusing because when Theme authors spawn yet another version of this code, they often thought they'd be clever and rename a few things or target a few different things, and thus establish themselves as "unique, more skilled" players, but in fact, this just adds to your misery, as they did not acplish much.

So yes, all the best to you in your endeavors. Taking apart that code and learning it is a rite of passage most theme authors undergo. Yes, they swear. Yes it reveals some WTF moments. But in the end, you'll control your variants, and achieve glory.

The problem you will encounter is that different themes change what they pass. You are better off creating your own event handler to get the variant id and lookup the variant details that your code requires.

See Shopify trigger function on variant selection but don't override existing functionality for some tips on how to set that up.

I strongly remend David Lazar's answer and that you take some time to build your own function(s) that can do the job of breaking down a product's options and associated values into customer-friendly options and then translating those selections into a single valid variant ID. It's not too hard and sometimes kinda fun.

However, if you just want to get the OptionSelectors code working:

var product  = document.querySelector("[data-product-json]").innerHTML,
product = JSON.parse(product || '{}');
console.log(product);
jQuery(function($) {
  new Shopify.OptionSelectors('productSelect-' + product.id, {
    product: product,
    onVariantSelected: selectCallback
    });
});

The first parameter that goes into the function is the ID of the (usually hidden) element inside your form that will store the value of the ID of the selected variant.

The error you are getting from the OptionSelectors code:

  Uncaught TypeError: Cannot read property 'parentNode' of null

is most often thrown when the code doesn't find that element.

So to fix your problem, in your product form you should just need to find (or create) an input field with name="id" and make sure that element has an ID that matches what you're using.

For example:

<input type="hidden" id="productSelect-{{ product.id }}" name="id" value="{{ product.selected_or_first_available_variant.id }}" />

(Alternatively, find your input with name="id" and take the ID attribute from that field and use it in your call to OptionSelectors)