Solved

Countdown Timer - Text not showing - Dawn Theme

thingsontheway
Tourist
37 0 3

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. 

 

thingsontheway_0-1717152612559.png

 

 

 

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?

 

thingsontheway_0-1717151524475.png

 

 

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 %}

 

 

Accepted Solution (1)
Rishihuptech
Shopify Partner
589 105 119

This is an 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 %}

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 6 (6)

Rishihuptech
Shopify Partner
589 105 119

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,

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
thingsontheway
Tourist
37 0 3

Right!. Thank you. I missed that. 

 

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

Rishihuptech
Shopify Partner
589 105 119

This is an 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 %}

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
thingsontheway
Tourist
37 0 3

@Rishihuptech I tried this code but getting this error while saving the file. 

 

thingsontheway_0-1717155294014.png

 

Rishihuptech
Shopify Partner
589 105 119

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
thingsontheway
Tourist
37 0 3

Thank you @Rishihuptech . That's exactly what I wanted.