Countdown Timer - Text not showing - Dawn Theme

[thingsontheway]

I have added a new custom section countdown.liquid to my website. You can find the code at the bottom of this question.

I can see the countdown is working perfectly fine. But the text which I am writing in the text box is not showing up. Please refer the screenshot. 

Can anyone please help fixing it?

Also, is there any way to update this code to change the countdown using textboxes or any other object (to make it user friendly) rather than having a constant?

Website: hamperpick.myshopify.com

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @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="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
    <div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
      <div class="rich-text__blocks {{ section.settings.content_alignment }}">
        <h2
          class="rich-text__heading rte inline-richtext {{ section.settings.block_heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: 0;"
          {% endif %}
        >
          <div id="countdown" class="countdown" style="opacity: 0;">
            <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
          </div>
          <style>
            .countdown {
              display: inline;
              text-align: center;
              font-weight: 600;
            }
          </style>
          <script>const targetDate=new Date;targetDate.setUTCHours(18,30,0,0);const countdownElement=document.getElementById("countdown");function updateCountdown(){let t=new Date,e=targetDate-t;e>0?(document.getElementById("hours").textContent=formatTime(Math.floor(e/36e5)),document.getElementById("minutes").textContent=formatTime(Math.floor(e%36e5/6e4)),document.getElementById("seconds").textContent=formatTime(Math.floor(e%6e4/1e3))):(targetDate.setDate(targetDate.getDate()+1),targetDate.setUTCHours(17,0,0,0))}function formatTime(t){return t<10?`0${t}`:t}updateCountdown(),document.getElementById("countdown").style.opacity=1,setInterval(updateCountdown,1e3);
          </script>
        </h2>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Countdown",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
        {
        "type": "inline_richtext",
        "id": "block_heading",
        "default": "Talk about your brand",
        "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
      },
      {
        "type": "select",
        "id": "block_heading_size",
        "options": [
          {
            "value": "h2",
            "label": "t:sections.all.heading_size.options__1.label"
          },
          {
            "value": "h1",
            "label": "t:sections.all.heading_size.options__2.label"
          },
          {
            "value": "h0",
            "label": "t:sections.all.heading_size.options__3.label"
          },
          {
            "value": "hxl",
            "label": "t:sections.all.heading_size.options__4.label"
          }
        ],
        "default": "h1",
        "label": "t:sections.all.heading_size.label"
      },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.desktop_content_position.label",
      "info": "t:sections.rich-text.settings.desktop_content_position.info"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.rich-text.settings.full_width.label"
    },
    {
      "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": "Countdown"
    }
  ]
}
{% endschema %}

[Huptech-Web]

Hi @thingsontheway 

The Heading is never called in the code
Use 👇 below code to call the section heading.

{{ section.settings.block_heading }}

I didn't understand the 2nd point 👇

Also, is there any way to update this code to change the countdown using textboxes or any other object (to make it user friendly) rather than having a constant?

Can you please explain with screen shot what exactly you need there

Thank you,

[thingsontheway]

Right!. Thank you. I missed that. 

@Huptech-Web 2nd point is - right now I have added a constant to calculate the time value. I just want to add some kind of textbox where a user can update the countdown  and it will reflect on the page (rather than a user going and update the timer setting).

Please refer 2nd screenshot in the original post where I want to have some kind of text boxes or dropdown to update the countdown value. 

[Huptech-Web · Accepted solution]

Hi @thingsontheway 
Here is the complete code with changes.

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @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="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
    <div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
      <div class="rich-text__blocks {{ section.settings.content_alignment }}">
        <h2
          class="rich-text__heading rte inline-richtext {{ section.settings.block_heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: 0;"
          {% endif %}
        >
        {{ section.settings.block_heading }}
          <div id="countdown" class="countdown" style="opacity: 0;">
            <span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
          </div>
          <style>
            .countdown {
              display: inline;
              text-align: center;
              font-weight: 600;
            }
          </style>
          <script>
            document.addEventListener("DOMContentLoaded", function() {
              const hoursInput = {{ section.settings.countdown_hours }};
              const minutesInput = {{ section.settings.countdown_minutes }};
              const secondsInput = {{ section.settings.countdown_seconds }};

              const targetDate = new Date();
              targetDate.setHours(targetDate.getHours() + hoursInput);
              targetDate.setMinutes(targetDate.getMinutes() + minutesInput);
              targetDate.setSeconds(targetDate.getSeconds() + secondsInput);

              const countdownElement = document.getElementById("countdown");

              function updateCountdown() {
                const now = new Date();
                const timeLeft = targetDate - now;

                if (timeLeft > 0) {
                  document.getElementById("hours").textContent = formatTime(Math.floor(timeLeft / 3600000));
                  document.getElementById("minutes").textContent = formatTime(Math.floor((timeLeft % 3600000) / 60000));
                  document.getElementById("seconds").textContent = formatTime(Math.floor((timeLeft % 60000) / 1000));
                } else {
                  targetDate.setHours(targetDate.getHours() + hoursInput);
                  targetDate.setMinutes(targetDate.getMinutes() + minutesInput);
                  targetDate.setSeconds(targetDate.getSeconds() + secondsInput);
                }
              }

              function formatTime(time) {
                return time < 10 ? `0${time}` : time;
              }

              updateCountdown();
              countdownElement.style.opacity = 1;
              setInterval(updateCountdown, 1000);
            });
          </script>
        </h2>
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Countdown",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "inline_richtext",
      "id": "block_heading",
      "default": "Talk about your brand",
      "label": "t:sections.rich-text.blocks.heading.settings.heading.label"
    },
    {
      "type": "select",
      "id": "block_heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        },
        {
          "value": "hxl",
          "label": "t:sections.all.heading_size.options__4.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.desktop_content_position.label",
      "info": "t:sections.rich-text.settings.desktop_content_position.info"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.rich-text.settings.content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.rich-text.settings.content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.rich-text.settings.content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.rich-text.settings.content_alignment.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "default": true,
      "label": "t:sections.rich-text.settings.full_width.label"
    },
    {
      "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
    },
    {
      "type": "range",
      "id": "countdown_hours",
      "min": 0,
      "max": 23,
      "default": 18,
      "label": "Hours"
    },
    {
      "type": "range",
      "id": "countdown_minutes",
      "min": 0,
      "max": 59,
      "default": 30,
      "label": "Minutes"
    },
    {
      "type": "range",
      "id": "countdown_seconds",
      "min": 0,
      "max": 59,
      "default": 0,
      "label": "Seconds"
    }

  ],
  "presets": [
    {
      "name": "Countdown"
    }
  ]
}
{% endschema %}

[thingsontheway]

@Huptech-Web I tried this code but getting this error while saving the file. 

[Huptech-Web]

Hi @thingsontheway 
I have updated my code recheck the code and change the number to range

[thingsontheway]

Thank you @Huptech-Web . That's exactly what I wanted.