on select varient change with image

Solved
Highlighted
Explorer
57 4 4
          <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
Explorer
57 4 4

This is an accepted solution.

<!---- 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
57 4 4

<!---- 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
Explorer
57 4 4

This is an accepted solution.

         <!---- 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
Highlighted
Explorer
57 4 4

This is an accepted solution.

add js for variant selection

{{ 'option_selection.js' | shopify_asset_url | script_tag }}

0 Likes
Highlighted
Explorer
57 4 4
 <!---- variants slectionchangejs ---->
          {% if product.variants.size > 1 %}
          <script>
            function selectCallback(variant, selector){
              var title=variant.title;
              //variants quantity check
              var vqty = $('#variant-select option[data-title="'+title+'"]').attr("data-qty");
               console.log(vqty);
              if(vqty > 0){
              $(".btn").attr("disabled", false);
                $(".btn").text("Add to cart");
              
              }
                else{
                 $(".btn").attr("disabled", true);
                 $(".btn").text("Sold Out")
                }
             
         
              
             // end variants qty
              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
            })
            
            if (variant) {
  if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 0) {
      jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
    } else {
      jQuery('#variant-inventory').text("This product is sold out");
    }
  } else {
    jQuery('#variant-inventory').text("This product is available");
  }
} else {
    jQuery('#variant-inventory').text("");
}
 
          </script>
          {% endif %}
          
0 Likes