CODEWITHSUNDEEP
javascripthtmlformsselectshopify
Carlvic Lim
Carlvic Lim

Reputation: 29

How to connect my variant swatches to my option value?

I want to connect my option value to my swatches like when I click the variant swatches the option value will change also.

Example when I click on the swatches[circle color] dropdown options will change also. image sample

Here's my code below and site link: https://strokes-test.myshopify.com/collections/frontpage

and Im using JQuery v1.8.1

HTML

<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
  
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% else %}
<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<ul class="item-swatch color_swatch_Value">  
{% for option in product.options %}
  {% if option == 'Shades' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}  
      {% assign text = color | handleize %}
      <li>
       <label value="{{ variant.id}}" style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
        {% if variant.image != null %}
        <div class="hidden">
          <img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
        </div>
        {% endif %}
      </li>
        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
</ul>

<div><button type="submit" name="add">Add to cart</button></div>  
</form>

JS

initColorSwatchGrid: function() { 
   jQuery('.item-swatch li label').click(function(){ 
         var newImage = jQuery(this).parent().find('.hidden img').attr('src');
         jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 
         return false;
  });
}

Upvotes: 0

Views: 535

Answers (1)

Onkar
Onkar

Reputation: 2584

Try this one

initColorSwatchGrid: function() {
  jQuery('.item-swatch li label').click(function () {
    var newImage = jQuery(this).next().find('img').attr('src');
    jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
    // JS code for product switching
    jQuery(this).parents('ul.item-swatch').prev().val(jQuery(this).attr('value'));
    return false;
  });
}

Upvotes: 1

Related Questions