Countdown Timer - Shopify Section

countdown_timer_shopify_section.liquid

{%- if section.blocks.size > 0 -%}
  {%- for block in section.blocks -%}
    {%- case block.type -%}
    {%- when 'html' -%}
      {%- if block.settings.enable_promo -%}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.5.0/jquery.marquee.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
        <script>
          $(function() {
            $('.marquee').marquee({
                //If you wish to always animate using jQuery
                allowCss3Support: true
                , //works when allowCss3Support is set to true - for full list see http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function
                css3easing: 'linear'
                , //requires jQuery easing plugin. Default is 'linear'
                easing: 'linear'
                , //pause time before the next animation turn in milliseconds
                delayBeforeStart: 1000
                , //'left', 'right', 'up' or 'down'
                direction: 'left'
                , //true or false - should the marquee be duplicated to show an effect of continues flow
                duplicated: false
                , //speed in milliseconds of the marquee in milliseconds
                duration: 20000
                , //gap in pixels between the tickers
                gap: 20
                , //on cycle pause the marquee
                pauseOnCycle: false
                , //on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
                pauseOnHover: false
                , //the marquee is visible initially positioned next to the border towards it will be moving
                startVisible: false
              });
          });
        </script>
        <style>
            .marquee {
                width: 100%;
                height: 35px;
            }
            /* even out the elements */
            .marquee div {
                height: 35px;
                line-height: 35px;
            }
        </style>
        <div class="w-100 px-3 top-promobar marquee text-center" style="background-color: {{ block.settings.background_color }}; color: {{ block.settings.text_color }};">
          <div class="marquee__promobar_text">{{ block.settings.promobar_text }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ block.settings.promobar_text }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ block.settings.promobar_text }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ block.settings.promobar_text }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
          {% if block.settings.enable_countdown %}
            <span class="px-3 mx-3 line-separator position-relative"></span>
            <span id="countdown_message">
              <span class="mr-2">{{ block.settings.countdown_message }}</span>
              <span id="countdown_timer"></span>
            </span>
            <style>
                .line-separator::before {
                    content: "";
                    display: block;
                    height: 1px;
                    width: 14px;
                    background: white;
                    position: absolute;
                    margin: auto;
                    top: 4px;
                    bottom: 0;
                    left: 0;
                    right: 0;
                }
            </style>

            <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.25.0/luxon.min.js" integrity="sha512-OyrI249ZRX2hY/1CAD+edQR90flhuXqYqjNYFJAiflsKsMxpUYg5kbDDAVA8Vp0HMlPG/aAl1tFASi1h4eRoQw==" crossorigin="anonymous"></script>
            <script>
              const convertTime12to24 = (time12h) => {
                const [time, modifier] = time12h.split(' ');

                let [hours, minutes] = time.split(':');

                if (hours === '12') {
                  hours = '00';
                }

                if (modifier.toLowerCase() === 'pm') {
                  hours = parseInt(hours, 10) + 12;
                }

                if (hours < 10) {
                  return `0${hours}:${minutes}`;
                }

                return `${hours}:${minutes}`;
              }

              function getTimeValues () {
                {% assign end_date_array = block.settings.countdown_end_date | split: "/" %}
                var currentTime = luxon.DateTime.local().setZone('America/Chicago');
                var convertedTime = convertTime12to24('{{ block.settings.countdown_end_time }}');
                var overrideZone = luxon.DateTime.fromISO(`{{ end_date_array[2] }}-{{ end_date_array[0] }}-{{ end_date_array[1] }}T${convertedTime}:00`, { zone: "America/Chicago" });
                var timeDiff = overrideZone.diff(currentTime, ['days', 'hours', 'minutes', 'seconds']);

                return timeDiff.values;
              }

              function showTimeValues (timeValues) {
                // Display the result in the element with id="demo"
                var countdownTimerString = "";

                if (timeValues.days > 0) {
                  countdownTimerString += "<strong>" + timeValues.days + "</strong>days ";
                }

                if (timeValues.hours > 0) {
                  countdownTimerString += "<strong>" + timeValues.hours + "</strong>hrs ";
                }

                if (timeValues.minutes > 0) {
                  countdownTimerString += "<strong>" + timeValues.minutes + "</strong>min "
                }

                if (timeValues.seconds > 0) {
                  countdownTimerString += "<strong>" + Math.floor(timeValues.seconds) + "</strong>sec ";
                }

                document.getElementById("countdown_timer").innerHTML = countdownTimerString;
              }

              var timeValues = getTimeValues();
              showTimeValues(timeValues);

              // Update the count down every 1 second
              var x = setInterval(function() {

                var timeValues = getTimeValues();
                showTimeValues(timeValues);

                // If the count down is finished, write some text
                if (timeValues.days <= 0 && timeValues.hours <= 0 && timeValues.minutes <= 0 && timeValues.seconds <= 0) {
                  clearInterval(x);
                  document.getElementById("countdown_message").innerHTML = "{{ block.settings.countdown_message_after }}";
                }
              }, 1000);
            </script>
          {% endif %}
        </div>
      {%- endif -%}
    {%- endcase -%}
  {%- endfor -%}
{%- endif -%}

{% schema %}
{
  "name": "Promobar",
  "blocks": [
    {
      "type": "html",
      "name": "Promobar",
      "settings": [
        {
          "type": "header",
          "content": "Promo"
        },
        {
          "type": "checkbox",
          "id": "enable_promo",
          "label": "Enable Promo"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Name of Promo",
          "default": "Current Promo",
          "info": "Used to identify current promo. Not added to site."
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#f2ebe1"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        },
        {
          "type": "html",
          "id": "promobar_text",
          "label": "Promobar Text",
          "default": "Sale!"
        },
        {
          "type": "header",
          "content": "Countdown"
        },
        {
          "type": "checkbox",
          "id": "enable_countdown",
          "label": "Enable Countdown",
          "info": "Timezone: CST"
        },
        {
          "type": "html",
          "id": "countdown_message",
          "label": "Message"
        },
        {
          "type": "text",
          "id": "countdown_end_date",
          "label": "End Date",
          "info": "Format example: Month/Date/Year -> 07/07/2021",
          "default": "07/07/2021"
        },
        {
          "type": "text",
          "id": "countdown_end_time",
          "label": "End Time",
          "info": "Format example: 8:00 am"
        },
        {
          "type": "html",
          "id": "countdown_message_after",
          "label": "After Countdown Message"
        }
      ]
    }
  ]
}
{% endschema %}