Shopify metafields doesn't work with javascript

[DanielKreiner]

Hello, 

i have generated a metafield for the variants to divide them into different months.

Now I want to show the customer how much he saves in each variant.

The metafield is an integer.
Metafield: variant.metafields.my_fields.months

I used this code to display the savings:

{%- if settings.product_save_amount -%}
                        
                          {%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: current_variant.metafields.my_fields.monate | money }}{%- endcapture -%}
                        
                        <span data-save-price class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
                          {%- unless hide_sale_price -%}
                            {{ 'products.general.save_html' | t: saved_amount: saved_amount }}
                          {%- endunless -%}
                        </span>
      
                      {%- endif -%}

This code also works very well.
If I now change the variant this is no longer loaded, so I would like to change this in Javascript as well.

Here the javascrip variable:

var savings = variant.compare_at_price - variant.price;

I have already tried all of this:

 var savings = (variant.compare_at_price - variant.price) * variant.metafields.my_fields.monate;

and:

 var savings = (variant.compare_at_price - variant.price) * current_variant.metafields.my_fields.monate;

Can someone please show me my mistake?

[MetafieldsGuru]

Hi Daniel,

Sasha here from Metafields Guru team.

Assuming that you got the "current_variant" variable from the "selected_or_first_available_variant" attribute of the product object, it might be the reason for your problem. Liquid is preprocessed (compiled), so it can't track the changes after the code it generates is sent to the browser. In other words, the aforementioned attribute returns the first available variant until the page is refreshed. Once you refresh the product page, it would parse the active variant ID based on the product URL and your code should display the correct saving amount.

However, refreshing the product page every time a different variant is selected doesn't seem to be a great idea. The problem is that there's no change event for the option (variant) selector elements. You may want to create your own event listener to track the variant selection. Luckily, I managed to find a solved thread dedicated to a pretty similar issue.

Hope this helps!

Best regards,

Sasha Kachkovskyi

Co-founder and CEO

256 Development

[DanielKreiner]

That is not the problem.
My issue is that I can't address the metafield in javascript.

The price updates every time I change the variant, I have already solved this problem.
My problem right now is that I don't get a return value when I address my metatag in my Theme.js.

This is my metatag:
variant.metafields.my_fields.months

In my product-template.liquid I get a value back, but this does not work in Theme.js

Is there another variable needed here or do I still need to define it?
I hope you understand my problem

[MetafieldsGuru · Accepted solution]

Hi Daniel,

Oh, I see. I've been playing around with a similar thing on my dev store and ended up creating a hidden block on the product page to keep the variants data in form of a JSON object:

And then I was able to access the data in my theme.js file with the following code:

var variantsMetafields =
    jQuery.parseJSON($("#hidden-variant-metafields-container").html());
variantsMetafields.forEach(function(variantMetafield) {
    if (variantMetafield.variant_id == variant.id) {
        $("#hidden-current-variant-metafield").html(variantMetafield.metafield_value);
        $("#hidden-current-variant-metafield").show();
    }
});

That's definitely not the most elegant solution, but worked for me as a "quick fix" for testing purposes.

Best regards,

Sasha Kachkovskyi

Co-founder and CEO

256 Development

[DanielKreiner]

Could you send me how you have created your JSON object 🙂

[MetafieldsGuru]

Hi Daniel,

Sure. I do that with a combination of Liquid and JavaScript code:

{% assign metafields-data = '[' %}
{%for variant in product.variants%}
 {% assign metafield-value = variant.metafields.my_fields.months.value | replace: '"', "''" %}
 {% assign metafields-data = metafields-data | append: '{"variant_id":"' | append: variant.id| append: '" , "metafield_value":"' | append: metafield-value | append: '"},' %}
{%endfor%}
{% assign metafields-data = metafields-data | append: ']'%}
{% assign metafields-data = metafields-data | replace: ",]", "]"%}

<span id="hidden-variant-metafields-container" style="display:none;">{{metafields-data}}</span>
<span id="hidden-current-variant-metafield" style="display:none;"></span>

Best regards,

Sasha Kachkovskyi

Co-founder and CEO

256 Development

[DanielKreiner]

No i have the problem, that the JSON.parse  doesn't work on mobile.
Is there any other option?

[cfeichtinger]

The code was working in every browser except Safari on my Iphone.

The reason was that the variant_id was automatically detected as phone number "tel.132566565156312" so javascript was not able to find the matching variantid.

By adding the following code to your product page Safari stops this behavior:

<meta name="format-detection" content="telephone=no">

See also:

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/...

[KHHH]

I understand what you are doing, but it seems t miss a call to the variantsmetafields code. Can you please explain how to actually display the information?