Liquid, JavaScript, themes, sales channels
I want to change the variant when clicking on the variant image I have found the solution but its only works in select and option but in my theme, I am using input type radio button instead of the select option button.
------------------------------------------Here is my code for the variant-----------------------------------------------------------
<!-- productOption.liquid -->
{%- if section.settings.product_selector == 'radio' -%}
{%- assign isColor = false -%}
{%- assign optionName = option.name | handleize -%}
{%- if optionName contains 'colo' -%}
{%- assign isColor = true -%}
{%- endif -%}
<fieldset class="single-option-radio"
name="{{ option.name | handleize }}"
id="ProductSelect-option-{{ forloop.index0 }}">
{%- assign option_index = forloop.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 -%}
{%- for variant in product.variants %}
{%- assign vOption = 'option' | append: option_index -%}
{%- if value == variant[vOption] -%}
{%- assign currenVariant = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- assign hasImage = false -%}
{%- if isColor and currenVariant.image -%}
{%- assign hasImage = true -%}
{%- endif -%}
<input type="radio"
{%- if option.selected_value == value -%} checked="checked"{%- endif -%}
{%- unless variant_label_state -%} disabled="disabled"{%- endunless -%}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name | handleize }}"
class="single-option-selector-{{ section.id }} single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">
<label {% if hasImage %}data-tooltip="true" title="{{ value | escape }}" style="background-image:url({{currenVariant.image.src | img_url:'100x'}})"{% endif %}
for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>
{%- unless hasImage -%}{{ value | escape }}{%- endunless -%}
</label>
{%- endfor -%}
</fieldset>
{%- else -%}
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-name="{{ option.name }}"
data-index="option{{ forloop.index }}">
{%- for value in option.values -%}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{%- endfor -%}
</select>
{%- endif -%}
---------------------------------------------------Variant Code Ended-----------------------------------------------------------
-----------------------------------------------------------here is the js to change variants---------------------------------------------------
https://help.shopify.com/en/manual/online-store/themes/os/customize/select-variants-click----------------------------------------------------------------------------------------------------
Thanks In Advance if someone helps me to resolve this issue.
Can you please provide store URL ?
actually, I am working on a copy and don't want to make it publish . You can see the Brooklyn theme variant style it is the same as my store. Waiting for Your response
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024