Multiple countdown using metafield values

Technical Q&A
1

Dear community,

I am trying to build a specific feature for my products. The goal is to display each available variant of the product in a row . In each row I need to show a countdown timer above the “add to cart” button.

Since I am importing products directly from a third party supplier, I am using metafields to specify the ending date of the timer. So far I was able to sort out the countdown code in javascript which should display the remaining time to purchase in days, hours, minutes and seconds. Using the {% if %} tag, the countdown should be displayed only for variant where a metafield is specified.

The problem as you can see is that the countdown is identical for all variants even when dates are specified for other variants. Could you please help me understand what I missed so that the countdown works for each variant’s metafield?

Joiakim_0-1635974220206.png
Joiakim_0-1635974220206.png1013×650 65.9 KB

Here is my code :

{% if variant.metafields.custom_fields.launch  %}

{% assign launch_date = variant.metafields.custom_fields.launch.value %}

  
    
    days
    
    hours
    
    minutes
    
    seconds    
  

{% endif %}