Solved

On variant change JS event listener

rupeshadh
Shopify Partner
16 1 2


Hello,

I want to render Specification Sheet PDF dynamically when variants are clicked, just like how the image and price change when variants are changed. These PDFs come from metafields. I am using the motion theme. I found the following Variant Change event listener in their documentation.

 

document.addEventListener('variant:change', function(evt) {
  console.log(evt.detail.variant);
});

 

 

I implemented the above code as below:

 

 

 <script>

        document.addEventListener('variant:change', function () {
            $("#specVariant").attr("href", "{% for variant in product.variants %} {% if product.selected_or_first_available_variant.id == variant.id %} {{ variant.metafields.custom.spec_sheet | file_url }} {% endif %}{% endfor %}");
          });
          
    </script>

 

 

HTML and Liquid Code I have written:

 

 

 {% for variant in product.variants %}
    {% if product.selected_or_first_available_variant.id == variant.id %}
        
        {% if variant.metafields.custom.spec_sheet != blank %}
            <a id="specVariant" href="{{ variant.metafields.custom.spec_sheet | file_url }}" class=" manual-buttons">
            Specification Sheet</a>
        {% endif %}

    {% endif %}
    {% endfor %}

 

 

The result:

I can see the data is coming from metafield when the variant is clicked for the first time. But after that, the data doesn't change dynamically. It’s only on the first variant change. 

 

Please HELP.

Accepted Solution (1)

Jivan_Suhagiya
Shopify Partner
584 79 124

This is an accepted solution.

Hi @rupeshadh,
Liquid code does not work every time with variant change. use the following code 

<script>
  var variantSpecs = {};
  {% for variant in product.variants %}
    variantSpecs[{{- variant.id -}}] = "{{ variant.metafields.custom.spec_sheet | file_url }}";
  {% endfor %}
  document.addEventListener('variant:change', function (evt) {
    $("#specVariant").attr("href", variantSpecs[evt.detail.variant.id]);
  });
</script>

 

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder

View solution in original post

Replies 6 (6)

Jivan_Suhagiya
Shopify Partner
584 79 124

This is an accepted solution.

Hi @rupeshadh,
Liquid code does not work every time with variant change. use the following code 

<script>
  var variantSpecs = {};
  {% for variant in product.variants %}
    variantSpecs[{{- variant.id -}}] = "{{ variant.metafields.custom.spec_sheet | file_url }}";
  {% endfor %}
  document.addEventListener('variant:change', function (evt) {
    $("#specVariant").attr("href", variantSpecs[evt.detail.variant.id]);
  });
</script>

 

If helpful then please Like and Accept Solution.
Email: suhagiyajivan1992@gmail.com
Skype: jivan.suhagiya
First kind of Checkout Reminder APP: https://apps.shopify.com/checkout-reminder
rupeshadh
Shopify Partner
16 1 2

Thanks a lot, Jivan.

Yehya
Visitor
2 0 0

Hi All, hoping you can help me here. I am a beginner and I am tring to access when a specific size more specifically if someone selects Custom Size as an option I want to an input field to appear. 

 

I am access the following variable

{% assign current = product.selected_or_first_available_variant %}
{{ current.title }}

 

but this seems to be static. Can you please help me understand how I can check when the size value changes and access that?

LIYAShop
Excursionist
30 2 2

Hello!

I'm trying to adapt this solution, to my problem, but I'm lost when it comes to JS.
I need to update the Add to Cart button label, based on the variant that customers choose on the product page.
Since the page updates every time the variant changes, I thought that this solution might be close to what I need.

In my buy-buttons.liquid file, I've modified the span to output different labels for a button, depending on variant condition:

 

<span>
    {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
        {{ 'products.product.sold_out' | t }}
    {%- else -%}
        {% if product.selected_or_first_available_variant.inventory_policy == 'continue' and product.selected_or_first_available_variant.inventory_quantity < 1 %}
            {{ 'products.product.preorder' | t }} 
        {%- else -%}
            {{ 'products.product.add_to_cart' | t  }}
        {%- endif -%}
    {%- endif -%}
</span>

It's working, but only on page load and it doesn't work when variant is changed.
Could you please help me adapt your solution to this issue?

Thank you!

LIYAShop
Excursionist
30 2 2

Nevermind, I figured it out! Thank you.

jsob
Shopify Partner
1 0 0

hi LiyaShop... can you share how you manage it?