Hi everyone,
I have just change the Variant Picker from ‘Button’ to ‘Drop down’ for a cleaner visual. However, there is an issue as the product image does not change when I select another variant (it changes when I was using ‘Button’ option).
I have attached the code below. Hope that you could help me out with this. Thank you very much!
{%- if block.settings.picker_type == 'button' -%}
<variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}">
{%- for option in product.options_with_values -%}
{% if option.name == 'Color' or option.name == 'Style' or option.name == 'Material' %}
<fieldset class="js product-form__input" data_options="color">
<legend class="form__label">{{ option.name }}: <span> {{ option.selected_value}} </span> </legend>
{%- for value in option.values -%}
{% assign option_image = nil %}
{% for variant in product.variants %}
{% if variant.title contains value %}
{% assign option_image = variant.image %}
{% endif %}
{% endfor %}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label class="vv_image" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
<img src="{{ option_image | img_url: '100x' }}">
</label>
{%- endfor -%}
</fieldset>
{% else %}
<fieldset class="js product-form__input">
<legend class="form__label">{{ option.name }}</legend>
{%- for value in option.values -%}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}
</label>
{%- endfor -%}
</fieldset>
{%endif%}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-radios>
{%- else -%}
<variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}">
{%- for option in product.options_with_values -%}
{% if option.name == 'Color' or option.name == 'Style' or option.name == 'Material' %}
<fieldset class="js product-form__input" data_options="color">
<legend class="form__label">{{ option.name }}: <span> {{ option.selected_value}} </span> </legend>
{%- for value in option.values -%}
{% assign option_image = nil %}
{% for variant in product.variants %}
{% if variant.title contains value %}
{% assign option_image = variant.image %}
{% endif %}
{% endfor %}
<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>
<label class="vv_image" for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
<img src="{{ option_image | img_url: '100x' }}">
</label>
{%- endfor -%}
</fieldset>
{% else %}
<div class="product-form__input product-form__input--dropdown">
<label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<div class="select">
<select id="Option-{{ section.id }}-{{ forloop.index0 }}"
class="select__select"
name="options[{{ option.name | escape }}]"
form="product-form-{{ section.id }}"
>
{%- for value in option.values -%}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
{% endif %}
{%- endfor -%}
<script type="application/json">
{{ product.variants | json }}
</script>
</variant-selects>
{%- endif -%}
