How to dynamically render PDFs with variant changes in JS?

[rupeshadh]

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.

[Jivan_Suhagiya · 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>

[rupeshadh]

Thanks a lot, Jivan.

[Yehya]

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]

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]

Nevermind, I figured it out! Thank you.

[jsob]

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