How to hide irrelevant variant in Debut theme?

Tourist
5 0 2

G'day forum mate, 

I have read and applied the article Link product options which teaches how to hide irrelevant product variant. I applied exactly the same steps but it wasn't working. Is there anyone out there who faced the same issue but got it fixed? Appreciate it.

2 Likes
Shopify Staff
Shopify Staff
544 4 81

Hi Bobbie!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to customise your product pages to improve the user experience, so let's see how we can get this smart product options feature working. I have checked your theme's code and it does appear you have followed the steps of the tutorial perfectly. Can you give me some examples of products whose variant options should be hidden because they are unavailable?

Hope this helps, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

1 Like
Shopify Partner
1 0 1

+1

1 Like
Shopify Partner
2 0 1

Hi @Liam, 

Thanks for your reply! 

Not sure why my post went disappeared, but here is the sample for your investigation! :-)

https://hursey-seafood.myshopify.com/collections/coffee-tea/products/sauces

Sachets (Tomato and Tartare)... $0.50/pc
Medium (Tomato, BBQ and Vinegar)... $1.50/pc
Medium (Tartare, Seafood, Aioli or Mayo)... $2.00/pc

In short, the combination of Sachets with BBQ, Vinegar, Seafood, Aioli and Mayo should never be selected. 

Thanks again!

0 Likes
Tourist
10 0 3

Anyone find a solution to this ?

1 Like
Shopify Partner
2 0 1

I'm still waiting as well. :-)

1 Like
Tourist
14 0 1

No still no solution!!!

1 Like
Shopify Staff
Shopify Staff
544 4 81

Hi again Bobbie.

Thank you for your reply and my apologies for not seeing this until now.

It is looking like the reason why this customisation is not working is because your theme is not compatible with this customisation. It appears you are using the Debut theme, and the tutorial outlines that this theme will not work with the code added:

An alternative option you could consider would be to use the Custom Product Options by W3 app to set up the conditional logic options for your variants. 

For Peter, Jo and Rick- could I confirm the names of your themes so I can check if this customisation will be compatible on your theme.

I hope this helps guys, and I really appreciate your patience on this. 

Liam Griffin | Customer Success Guru

0 Likes
Highlighted
Shopify Partner
2569 39 593

Hi Bobbie,

I kinda have a solution for you.

0. Make a copy of your theme by clicking on 3-dot button by the theme name and selecting Duplicate.  Try this modification in that copy before applying to a live shop.

1. Modify your  theme.liquid  Layout: find this line and remove the defer="defer" part.

  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->

2. Open your linked-options.liquid Snippet and paste this code after var Shopify = Shopify || {};  line:

Shopify.arrayIncludes = function(e, t) {
    for (var n = 0; n < e.length; n++)
        if (e[n] == t)
            return !0;
    return !1
};

Shopify.uniq = function(e) {
    for (var t = [], n = 0; n < e.length; n++)
        Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);
    return t
};

3. Save, test and report problems, if any.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
4 Likes
Tourist
14 0 1

Hi Everyone

This is the code I used in the product-template.liquid to make it work. But as you can see from www.vibrams.co.uk it does work. Took me three weeks to get this to work lol. Hope it helps.
        <hr>
    
        <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form" id="AddToCartForm">

          {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js product-form__item">
                <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
    
                
                {% assign option_index = forloop.index %}     
                     <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                      name="{{ option.name }}"
                      id="ProductSelect-option-{{ forloop.index0 }}" data-index="option{{ option_index }}">
                      {% for value in option.values %}
                        {% assign variant_label_state = true %}
                        {% if product.options.size == 1 %}
                          {% unless product.variants[forloop.index0].available  %}
                            {% assign variant_label_state = false %}
                          {% endunless %}
                        {% endif %}        
                          <option  
                          
                  
                      {% if option.selected_value == value %} selected="selected"{% endif %}
               
                               
                          {% unless variant_label_state %} disabled="disabled"{% endunless %}
                          value="{{ value | escape }}"
                          
                          name="{{ option.name }}"
                                id="ProductSelect-option-{{ option.name }}-{{ value | escape }}">{% if variant_label_state %}{{ value | escape }}{% else %}{{ value | escape }} - Currently out of Stock {% endif %}</option>
                      {% endfor %}             
                    </select>

0 Likes