on select varient change with image

Solved
Highlighted
Explorer
45 3 3
          <script
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
          <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              var title=variant.title;
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
                 $(".c-product-image-slider img").attr('src',imgpath);
    console.log(imgpath);
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
          </script>
          {% endif %}
          
          <!---- End variants slectionchangejs ----> 
0 Likes
Highlighted

Success.

Explorer
45 3 3

<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-title="{{ variant.title }}" data-img="{{variant.image|img_url:"master"}}"value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->

0 Likes
Highlighted
Explorer
45 3 3

<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-prices="{{variant.price | money }}" data-title="{{ variant.title }}" {%if variant.image != blank %}data-img="{{variant.image|img_url:"master"}}"{% endif%} value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->

0 Likes
Highlighted

Success.

Explorer
45 3 3
         <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              
              var title=variant.title;
              var imgpath=$('#variant-select option[data-title="'+title+'"]').attr("data-img");
             
              if(imgpath != null){
                 $(".c-product-image-slider img").attr('src',imgpath);
              }
              var variant_price = $('#variant-select option[data-title="'+title+'"]').attr("data-prices")
    console.log(variant_price); 
                $("#price_id").text(variant_price)
              // This is where you would put any code that you want to run when the variant changes.
            }
 
            var variantIdFieldIdentifier = 'variant-select';
            new Shopify.OptionSelectors(variantIdFieldIdentifier, { 
              product: {{ product | json }},     // Product object required to know how options map to variants
              onVariantSelected: selectCallback, // Function to do any interesting stuff (eg: update price field, image, etc) when selections change
              enableHistoryState: true           // When true, will update the URL to be a direct link to the currently-selected variant
            })
            
 
          </script>
          {% endif %}
          
          <!---- End variants slectionchangejs ---->  
0 Likes