Variant Metafield 2.0 changing with selection

[noovo]

I have variant metafields displayed on my product page but I need them to change to display only the text that refers to the currently selected variant.

Could anybody help?

[BSS-Commerce]

Hi @noovo 

If you have successfully displayed the meta field on your product page, I'm assuming that you have set up metafields correctly so far. For the text to display dynamically based on your variants, please following these steps:

Step 1: Go to the theme editor by Online store > Themes > Customize.

Step 2: Open the Product template.

Step 3: Under the Product Information section, add a “Custom Liquid” block.

Step 4: Copy the below code and paste it into the custom liquid box.

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong> {{ variant.metafields.my_fields.quantity_by_color }}</strong>
{% endif %}
{% endfor %}
<script src="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 refreshint = setInterval(function(){
location.reload();
}, 1000);    });   });
</script>

Please remember to replace this part {{ variant.metafields.my_fields.quantity_by_color }} with your metafield.

I hope that it works for you.

[noovo]

Fantastic... thank you. I have this working in Dawn but not in the theme I am using 'turbo'... hopefully I can find a work around.

[BSS-Commerce]

Hi @noovo 

Can you kindly share your product page link with me so we can check it more closely? It seems that each theme will have a different class name. 

[noovo]

Sure... this is the product page where I added the liquid code:

https://noovo-test-store.myshopify.com/products/lindisfarne-793-mead-12-5?variant=42089827434687

Thank you so much.

[BSS-Commerce]

Hi @noovo 

Thanks for sharing the page link. In this case, please try to change ".no-js-hidden" into ".single-option-selector." This refers to the change in Size.

Let me know if you find my answer useful by giving us a like or marking it as a solution.

If you have still a problem, please share your problem in detail along with page links and screenshots that will be a big help for us.

[noovo]

Hi, so it has changed slightly. The page now displays the information when the page is loaded but it doesn't change when the variant is changed:

https://noovo-test-store.myshopify.com/products/lindisfarne-793-mead-12-5?variant=42089827467455

Bri

[Teed]

I have pasted the following code into my custom liquid section in the product page

{% for variant in product.variants %}
{% if product.selected_or_first_available_variant.id == variant.id %}
<strong>SKU: {{ variant.sku }} </strong>
{% endif %}
{% endfor %}
<script src="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 refreshint = setInterval(function(){
location.reload();
}, 1000); }); });
</script>

And I can see the variant sku which is what I wanted. Now the problem is the page refreshes every time I click the Qty + or - button and reverts back to qty 1. How to change the script to only refresh when a new variation button is clicked, not any other button?

[marly_fifteen52]

This is the only work around I could figure out, because our variants change the URL, change the script to this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function($) {
    // Get the initial URL
    var current_url = window.location.href;
    
    // Check for URL changes
    setInterval(function() {
      var new_url = window.location.href;
      if (new_url != current_url) {
        // URL has changed, refresh the page
        location.reload();
      }
    }, 1000);
  });
</script>

[Rashley_LS]

Thank you for this solution. Is there any way rather than reloading the whole page, it reloads a specific section only where the dynamic content is found?

[Rashley_LS]

//if URL changes change content only
        if ( new_url != initial_url){
          $("#section-id").load( " #section-id");

[Don_Felice]

I tried your solution but I get a weird result. Part of the code is shown as text on the product page:

This is the code I was using:

{% for variant in product.variants %}

{% if product.selected_or_first_available_variant.id == variant.id %}

<strong> {{ variant.metafields.custom.angezeigte_lieferzeit }}</strong>

{% endif %}

{% endfor %}

<script src="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 refreshint = setInterval(function(){

location.reload();

}, 1000);    });   });

</script>

What am I missing? This is the page I am trying to add it to:

https://studiowohnglueck.de/products/90-wandleuchte?variant=49189101273356

[Gelden]

Hello, 

Is there a way to do this on Impulse Theme? I'm not able to do this work