Error with OptionSelectors causing products without variations to NOT render a product page

New Member
8 0 0

Hi Guys,

 

I have been trying to sort a problem with one of my stores currently using a custom template and an options app, in which all products with variations render the product details page fine, but if a product has no variations, the product details page doesn't render at all. I get the following error in console:

 

Screen Shot 2019-09-30 at 17.39.13.png

 

I have contacted support for my template and support for the switcher app, both have come back to me with no answers cause according to each one of them, it's not related to their product.

 

I'm running out of ideas so if anyone can offer some help, would be appreciated!

 

To better understand the issue, you can preview the frontend site here:

use code: dequay to access the site

https://wydels-electrical-wholesalers.myshopify.com/collections/wiska-boxes

 

If you try to access any of the products above, the product page doesn't render (products without variations), but if you try any product with variations like this:

 

https://wydels-electrical-wholesalers.myshopify.com/collections/collingwood-wall-lights/products/mc0...

 

then it works fine.

 

Thanks in advance for your help,

LEP1981

0 Likes
Trailblazer
142 12 15

Hi LEP1981,
Which App are you using?

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
Shopify Expert
96 17 12

@LEP1981 - Since it seems to be related to the existence of an option being present, you can easily create an option of "Default" and then hide this in the product form using an {% unless %} statement.  Quick fix.

 

If you send over a snippet from your product form, I can assist in where to place the code :)

0 Likes
New Member
8 0 0
0 Likes
New Member
8 0 0

_cascadia,

 

Even though I'm a web developer, I'm not an seasoned shopify developer. I have found the following code within the product-template.liquid file

 

{% if product.available and bold_variants_size > 1 %}
    new Shopify.OptionSelectors('product-selectors', {
      product: {%- include 'bold-product', output: 'json' -%},
      onVariantSelected: selectCallback, 
      enableHistoryState: true
    });   

    {% comment %}
    Use color swatch and linked options (copyright by @carolineschnapp)
    {% endcomment %}
    {% if section.settings.use_color_swatch and product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({%- include 'bold-product', output: 'json' -%});
    {% endif %} 

    {% if section.settings.use_color_swatch != true %}
    jQuery('.single-option-selector').selectize();
    jQuery('.selectize-input input').attr("disabled","disabled");
    {% endif %}

    {% endif %}
    {% if product.options.size == 1 and product.options.first != 'Title' %}
    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
    {% endif %}
    {% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}
     $('.selector-wrapper').hide();
    {% endif %}

    {% assign found_one_in_stock = false %}
    {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
    {% if variant.available and found_one_in_stock == false %}
    {% assign found_one_in_stock = true %}
    {% for option in product.options %}
    $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
    {% endfor %}
    {% endif %}
    {% endfor %}

Not sure if this is the part of the code required for your solution. If not, could you be more specific as to where to find the option selector code you are referring to?

 

Thanks

0 Likes
New Member
8 0 0

@PremierStores 


@PremierStores wrote:

Hi LEP1981,
Which App are you using?


The app we are using is called Perfect Switcher

https://apps.shopify.com/perfect-switcher?surface_detail=perfect+switcher&surface_inter_position=1&s...

 

Thanks,

LEP1981

0 Likes
New Member
8 0 0

@__cascadia wrote:

@LEP1981 - Since it seems to be related to the existence of an option being present, you can easily create an option of "Default" and then hide this in the product form using an {% unless %} statement.  Quick fix.

 

If you send over a snippet from your product form, I can assist in where to place the code :)


@__cascadia 

 

Even though I'm a web developer, I'm not an seasoned shopify developer. I have found the following code within the product-template.liquid file

 

{% if product.available and bold_variants_size > 1 %}
    new Shopify.OptionSelectors('product-selectors', {      product: {%- include 'bold-product', output: 'json' -%},      onVariantSelected: selectCallback, 
      enableHistoryState: true
    });   

    {% comment %}
    Use color swatch and linked options (copyright by @carolineschnapp)
    {% endcomment %}
    {% if section.settings.use_color_swatch and product.available and product.options.size > 1 %}
    Shopify.linkOptionSelectors({%- include 'bold-product', output: 'json' -%});
    {% endif %} 

    {% if section.settings.use_color_swatch != true %}    jQuery('.single-option-selector').selectize();    jQuery('.selectize-input input').attr("disabled","disabled");
    {% endif %}

    {% endif %}
    {% if product.options.size == 1 and product.options.first != 'Title' %}    $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
    {% endif %}
    {% if bold_variants_size == 1 and bold_selected_or_first_available_variant.title contains 'Default' %}     $('.selector-wrapper').hide();
    {% endif %}

    {% assign found_one_in_stock = false %}
    {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
    {% if variant.available and found_one_in_stock == false %}
    {% assign found_one_in_stock = true %}
    {% for option in product.options %}    $('.single-option-selector:eq({{ forloop.index0 }})').val({{ variant.options[forloop.index0] | json }}).trigger('change');
    {% endfor %}
    {% endif %}
    {% endfor %}

Not sure if this is the part of the code required for your solution. If not, could you be more specific as to where to find the option selector code you are referring to?

 

Thanks

0 Likes
Shopify Expert
96 17 12

@LEP1981 - Unfortunately, the code you provided is not the correct snippet to edit.  You should be looking for the ".product-variants" class within the <form> element and hiding that when a product has only one variant.

 

You could also create a new product.liquid template to assign to single variant items and drop in this code at the bottom:

 

.product-variants {
display:none;
}

Not ideal as it creates an unnecessary template but might be easier if you are not too familiar with liquid.  Hopes this helps point you in the right direction!

 

0 Likes
New Member
8 0 0

@__cascadia wrote:

@LEP1981 - Unfortunately, the code you provided is not the correct snippet to edit.  You should be looking for the ".product-variants" class within the <form> element and hiding that when a product has only one variant.

 

You could also create a new product.liquid template to assign to single variant items and drop in this code at the bottom:

 

.product-variants {
display:none;
}

Not ideal as it creates an unnecessary template but might be easier if you are not too familiar with liquid.  Hopes this helps point you in the right direction!

 


@__cascadia 

 

Thanks again for your reply. I think I have found the snippet you suggest:

 

<div id="product-variants">
                {% assign variantCount = bold_variants_size %}
                {% if product.available %}
                {% if variantCount > 1 %}
                <div class="">
                  <select id="product-selectors" name="id" class="hidden box-sellect" style="display:none">
                    {% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                    <option {% if variant == bold_selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ bold_variant_price | money }}</option>
                    {% endfor %}
                  </select>
                </div>
{%- unless qb_loaded == 'true' -%}
<div class='shappify-qty-msg'>{{bold_selected_or_first_available_variant.metafields.shappify_csp.pricing_html}}</div>
{%- assign qb_loaded = 'true' -%}
{%- endunless -%}

                {% if product_colorswatch %}
                {% for option in product.options %}
               <!-- {% include 'swatch' with option %}-->
                {% endfor %}
                {% endif %}
                {% else %}
                <input type="hidden" name="id" value="{{ bold_selected_or_first_available_variant.id }}" />
{%- unless qb_loaded == 'true' -%}
<div class='shappify-qty-msg'>{{bold_selected_or_first_available_variant.metafields.shappify_csp.pricing_html}}</div>
{%- assign qb_loaded = 'true' -%}
{%- endunless -%}

                {% endif %}
                {% endif %}

              </div>

Could you explain how to insert the "Default" option suggested in you first reply?

 

Big thanks in advance!

LEP1981

0 Likes
Shopify Expert
96 17 12

@LEP1981 - Replace that code with the below.  We are asking Shopify to query the product option titles and if any of them are input as "Default", it will assign a variable to the product of "default_option = true".  We then tell the page to only render the variant wrapper when a product has a "default_option = false".

 

Let me know if it works!

 

{% for product_option in product.options_with_values %}
{% if product_option.name contains 'Default' %}
{% assign default_option = true %}
{% endif %}
{% endfor %}

{% unless default_option == true %}
<div id="product-variants">
{% assign variantCount = bold_variants_size %}
{% if product.available %}
 {% if variantCount > 1 %}
   <div class="">
      <select id="product-selectors" name="id" class="hidden box-sellect" style="display:none">
{% for variant in product.variants %}
{%- include 'bold-variant' with variant, hide_action: 'skip' -%}
                    <option {% if variant == bold_selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ bold_variant_price | money }}</option>
                    {% endfor %}
                  </select>
                </div>
{%- unless qb_loaded == 'true' -%}
<div class='shappify-qty-msg'>{{bold_selected_or_first_available_variant.metafields.shappify_csp.pricing_html}}</div>
{%- assign qb_loaded = 'true' -%}
{%- endunless -%}
                {% if product_colorswatch %}
                {% for option in product.options %}
               <!-- {% include 'swatch' with option %}-->
                {% endfor %}
                {% endif %}
                {% else %}
                <input type="hidden" name="id" value="{{ bold_selected_or_first_available_variant.id }}" />
{%- unless qb_loaded == 'true' -%}
<div class='shappify-qty-msg'>{{bold_selected_or_first_available_variant.metafields.shappify_csp.pricing_html}}</div>
{%- assign qb_loaded = 'true' -%}
{%- endunless -%}
                {% endif %}
                {% endif %}
 </div>
{% endunless %}

0 Likes