Countdown Timer works on Android and PC but not IOS

bryanquek
New Member
14 0 0

 

Hello,

The countdown timer on the site has a "NaaN" error when viewed on iOS devices (right screenshot). However, it looks ok when viewed on Desktop/Android (left screenshot).

Can you advise how to fix please? The code is below. Thank you.

Screenshot 2024-04-16 at 4.29.07 PM.png

 

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: calc({{ section.settings.padding_top }}px * 0.75);
    padding-bottom: calc({{ section.settings.padding_bottom }}px  * 0.75);
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}
<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="section-{{ section.id }}-padding">

    {%- if section.id == 'template--20243326697784__fd66ea91-20e6-4508-ab6d-1bb16e7dc913' %} 
      <section>
  <div class="timerhead" >
    <h2>Flash Sale</h2>
  </div>
  <div style="display:flex; align-items: center; font-weight: 700; padding-right:40px; max-width:100%;">
    Ends&nbsp;In&nbsp;:&nbsp; 
    <div class="countdown">
      <div id="days" class="countCls"  style="margin-right: 10px;"></div> :&nbsp; 
      <div id="hours" class="countCls"  style="margin-right: 10px;"></div> :&nbsp; 
      <div id="minutes" class="countCls"  style="margin-right: 10px;"></div> :&nbsp; 
      <div id="seconds" class="countCls" ></div>
    </div>
  </div>
</section>

<script>
  // Set the target date for the product arrival
  const targetDate = new Date('{{ section.settings.custom_liquid }} 00:00:00').getTime();

  // Update the countdown every second
  const countdownInterval = setInterval(function() {
    const now = new Date().getTime();
    const timeRemaining = targetDate - now;

    if (timeRemaining <= 0) {
      clearInterval(countdownInterval);
      document.getElementById('countdown').innerHTML = 'Product has arrived!';
    } else {
      const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
      const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

      document.getElementById('days').innerHTML = `${days}D`;
      document.getElementById('hours').innerHTML = `${hours}H`;
      document.getElementById('minutes').innerHTML = `${minutes}M`;
      document.getElementById('seconds').innerHTML = `${seconds}S`;
    }
  }, 1000);
</script>
    {% else -%}
      {{ section.settings.custom_liquid }}
    {% endif -%}
    



    
  </div>
</div>

{% schema %}
{
  "name": "t:sections.custom-liquid.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "liquid",
      "id": "custom_liquid",
      "label": "t:sections.custom-liquid.settings.custom_liquid.label",
      "info": "t:sections.custom-liquid.settings.custom_liquid.info"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 40
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    }
  ],
  "presets": [
    {
      "name": "t:sections.custom-liquid.presets.name"
    }
  ]
}
{% endschema %}


Replies 7 (7)

JasmeetVT14313
Shopify Partner
204 48 57

Hi @bryanquek 
Tested it on IOS device and it is working fine on my end.
However, you can try updating your script as

document.addEventListener("DOMContentLoaded", function(){ 
//your script here
})

 Please hit Like and Mark as a solution if it helps

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
14 0 0

I tried adding the script and viewed again on my iPhone14 device but still has that error.

What iOS phone are you using?

JasmeetVT14313
Shopify Partner
204 48 57

@bryanquek 
I have tested it on iPhone 11, iPhone 11 Pro, iPhone 12 as seems to working fine on my end.
Can you share the URL on which you are getting the issue. If you'd like to discuss this more, don't hesitate to send me a PM.

Please hit Like and mark it as a solution if this has helped you.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
14 0 0

I tried on a few other physical iPhones as well and all of them still has the 'NaN' error.
Could you be trying via the Chrome inspect tool?

JasmeetVT14313
Shopify Partner
204 48 57

Hi @bryanquek 
Please share your store URL as I can check better in that case.

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
New Member
14 0 0
Please use this! Thank you
http://oppostoresg.com/
JasmeetVT14313
Shopify Partner
204 48 57

Hi @bryanquek 
Can you update the date for any future one so that I can check it.
Also, found that you are using countdown as a class in HTML but in script you are trying to get it by ID.

JasmeetVT14313_0-1713524276942.png

 

 

- Helpful? Please hit Like and mark it as a solution
- VTN Power Wishlist ultimate solution for effortless wishlist management. Free plan available
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com