Need to change the variant meta field while switching the variant without page reload

Technical Q&A
, ,
1

I need to show the part number for all product variants. I used variant meta field for that. when, I switch the variant I needs to auto change. This is the code I used to show the variant part number and tried to change the variant. But every time I need to refresh the page to see the updated part number after switching the variant.

I have don’t know, how to show the meta field data without refreshing the page. Can anyone help ?

{% assign display_value = "" %}
{% for variant in product.variants %}
  {% if [product.selected_or_first_available_variant.id](http://product.selected_or_first_available_variant.id) == [variant.id](http://variant.id) %}
    {% if variant.metafields.custom.part_number %}
      {% assign display_value = "Part Number: " | append: variant.metafields.custom.part_number %}
    {% else product.metafields.shopify--facts.mpn %}
      {% assign display_value = "Part Number: " | append: product.metafields.shopify--facts.mpn %}
    {% endif %}
  {% endif %}
{% endfor %}

<p id="display-element">{{ display_value }}</p>

<script src="[https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js](https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js)"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
  $(".no-js-hidden").on("click", function() {
    var refreshInterval = setInterval(function() {
      location.reload();
    }, 500);
  });
});
</script>

Thanks

2

Hello @selvadev13 ,

If you are looking for idea please follow.

  1. Get the ID of the variant on click of it with the JS.
  2. Assign a dynamic ID/attribute with a string to the metafield element.
    Now get back to first step 1 and use show/hide concept.

Thanks

3

Hi @Guleria

Can you show any code examples to achieve this thing ? That would be appreciated : )