How do I get the variant I clicked on

New Member
1 0 0

Hi I have been banging my head with this problem. I have this store where I want to change some text as I change the variant on the product page. 

So I am setting up some Metafields that contain the information I change. I am creating a hidden JSON object on the product page and getting the information on JS file using the following. 

var variantsMetafields = jQuery.parseJSON($("#hidden-variant-metafields-container").html());
$('.productOptionVariant').on('click',function(){
  var clickId = $("select[name='id']").val();
  variantsMetafields.forEach(function(variant){
    alert(variant.variant_id == clickId);
  });
});

class 'productOptionVariant' is applied to each variant div in the list of all variants 

So if I have 4 products with ids 1,2,3,4. 1 is selected initially on page load. Now if I click on 3, the above code alerts: true, false,false,false

Whereas I want it to alert: false,false, true, false

Below is the html where I am getting the values and putting it in the hidden container.

{% assign metafields-data = '[' %}

{%for variant in product.variants%}
{% assign variant-color = variant.metafields.color.var %}

{% assign metafield-value = variant.metafields.additionalinfo | replace: '"', "''" %}

{% assign metafields-data = metafields-data | append:
	'{
	"variant_id":"' | append: variant.id| append: '" ,
	"variant_color":"' | append: variant-color | append: '"
	},' %}

{%endfor%}

{% assign metafields-data = metafields-data | append: ']'%}
{% assign metafields-data = metafields-data | replace: ",]", "]"%}

<span id="hidden-variant-metafields-container">
  {{ metafields-data }}
</span>

<span id="hidden-current-variant-metafield" style="display:none;"></span>

Please help me with this. Thank you

  

0 Likes