Uncaught TypeError When using option_selection.js

joshua-isaac
Tourist
7 0 1

Hey all, I am trying to add the javascript code that allows me to have multiple product options following this shopify guide. 

 

I have the following code in the <head> of my theme.liquid file:

   {{ 'https://code.jquery.com/jquery-1.12.1.min.js' | script_tag }}
   {{ 'option_selection.js' | shopify_asset_url | script_tag }}

 

I have the following code in my product.liquid file:

      <script type="text/javascript">
        var selectCallback = function(variant, selector) {
          if (variant) {
            if (variant.available) {
              // Selected a valid variant that is available.
              console.log('available')
            } else {
              // Variant is sold out.
              console.log('sold out')
            }
            // variant doesn't exist.
            console.log('no variant')
          }
        }
        // initialize multi selector for product
        jQuery(function($) {
          new Shopify.OptionSelectors("product-select", { product: `{{ product | json}}`, onVariantSelected: selectCallback });
        });
      </script>

 

 

However, i am getting an error in my console: 

Uncaught TypeError: Cannot read property 'length' of undefined
    at Shopify.Product.getVariantById,
    at Shopify.OptionSelectors.selectVariant
   at Shopify.OptionSelectors.selectVariantFromParams
   at option_selection-fe6b72c2bbdd3369ac0bfefe8648e3c889efca213baefd4cfb0dd9363563831f.js:1

 

 

Anyone experience this before? What am i doing wrong?

0 Likes
GastonM
New Member
3 0 0

Hello, were you able to solve this error? I am following the same guide, having the same error and I still have not found how to correct it!

Thanks!

0 Likes
PaulNewton
Shopify Partner
3120 190 570

@GastonM other people are not mind readers or see what you see; without providing base level information like a url where other people can see and inspect the problem your unlikely to resolve this because of the wide array of things that can cause this issue.

Help others help you, provide detail.

 

Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes
GastonM
New Member
3 0 0

Hello Paul!
The error was exactly the same, with the code exactly the same, simply arranged in different files. For this reason the message was addressed to the author.
Anyway I managed to fix it, the documentation seems not to be entirely correct in the example.

0 Likes