Variants are completely messed up, please help!

DaveyBoy
New Member
3 0 0

Okay so, we're using the Mixture Shopify theme and we have a problem with variants. I'm not sure if it's a problem in the theme's code or I did something wrong, so if someone could have a look at the pics and let me know what's wrong and maybe offer a solution if it's an easy task. 

 

We want variants to be picked from a drop-down menu instead of a swatch. If you go to theme customizer, there are settings for changing the layout of variants picker, swatch or drop-down, but it simply doesn't work. Here's the link to our product page.  As you can see, you can pick variants by clicking on them. 

 

Now if you go to customize, and enable/disable swatch or just simply change anything there, in the preview it will show variants as a drop-down. 

 

84aa347c24831086cf85697412e7b6c5

Drop-down working perfectly fine in a preview mode. 

301fccc2bd375b67f5997f466c437665

 

As soon as you save the changes and visit the store, variants will be back to swatch mode, for no reason at all. Let's see the code.

 

bd5f0d2b76b60a66e23c93045143f1cd

 

And swatch has it's own file "nov-swatch.liquid".

 

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}
{% capture variantsswatch %} {% endcapture %}
{% capture variantsswatch %}{{ nov-swatch }}{% endcapture %}
{% if nov-swatch == blank %}
    <div class="swatch error">
        <p>You must include the snippet nov-swatch.liquid with the name of a product option.</p> 
        <p>Use: <code>{% raw %}{% include 'nov-swatch' with 'name of your product option here' %}{% endraw %}</code></p>
        <p>Example: <code>{% raw %}{% include 'nov-swatch' with 'Color' %}{% endraw %}</code></p>
    </div>
{% else %}
{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}
{% assign indexChild = 0 %}

{% for option in product.options %}
    {% if option == nov-swatch %}
        {% assign found_option = true %}
        {% assign option_index = forloop.index0 %}
        {% assign indexChild = forloop.index %}
        <style rel="stylesheet" type="text/css" >
            .selectorVariants .selector-wrapper:nth-child({{ indexChild }}){display: none;}
        </style>
        {% assign downcased_option = nov-swatch | downcase %}
        {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
            {% assign is_color = true %}
        {% endif %}
    {% endif %}
{% endfor %}
{% unless found_option %}
    
{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
    <div class="watch_availabel">
        {% assign values = '' %}
        {% for variant in product.variants %}
            {% assign value = variant.options[option_index] %}
            {% unless values contains value %}
                {% assign values = values | join: ',' %}
                {% assign values = values | append: ',' | append: value %} 
                {% assign values = values | split: ',' %}
                <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
                    {% if is_color %}
                        <div class="tooltip">{{ value }}</div>
                    {% endif %}
                        <input id="swatch-{{ option_index }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
                    {% if is_color %}
                        <label for="swatch-{{ option_index }}-{{ value | handle }}" style="background: {{ value | split: ' ' | last | handle }}">
                            <img class="crossed-out" alt="" src="{{ 'soldout.png' | asset_url }}" />
                        </label>
                    {% else %}
                    <label for="swatch-{{ option_index }}-{{ value | handle }}">
                        {{ value }}
                        <img class="crossed-out" alt="" src="{{ 'soldout.png' | asset_url }}" />
                    </label>
                    {% endif %}
                </div>
            {% endunless %}
            {% if variant.available %}
                <script>
                    jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
                </script>
            {% endif %}
        {% endfor %}
    </div>
</div>
{% endunless %}
{% endif %}

 

Please help! 

 

 

0 Likes