What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Countdown Timer works on Android and PC but not IOS

Countdown Timer works on Android and PC but not IOS

bryanquek
Tourist
17 0 1

 

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 8 (8)

JasmeetVT14313
Shopify Partner
292 63 76

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

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

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
292 63 76

@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.

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1

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
292 63 76

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

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com
bryanquek
Tourist
17 0 1
Please use this! Thank you
http://oppostoresg.com/
JasmeetVT14313
Shopify Partner
292 63 76

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

 

 

- VTN Customer Dashboard enhances your customer's dashboard with advanced features, profile management, and order tracking. Free trial available.
- Feel free to contact me at jasmeet.kaur@vtnetzwelt.com

AliAl-baity
Visitor
2 0 0

When you create the targetDate...

 

const targetDate = new Date('{{ section.settings.custom_liquid }} 00:00:00').getTime();

 

you pass a string value. Different browsers can parse that string differently. The universally recognised format for times is yyyy-mm-ddThh:mm:ss.sssZ, as explained here. By adding ".000" you should solve the problem. 

 

Check this.