Shopify Countdown not showing on slider

  countdown, html, javascript, jquery, shopify

I’m trying to add a countdown-timer on my Shopify Theme Slider but seems like its not working.
I tried to add include my countdown-timer to my collection code and its working. I’m not sure what is the error when I tried to add on my slider

Test Live link:https://strokes-test.myshopify.com

slider.liquid

{%- assign index = 1 -%}
<section class="heroCarousel {% if section.settings.banner_type == true %}disable-carousel{% endif %}">
  {% for block in section.blocks %}
    <div class="carousel-slide slide-{{index}} image-text">
      {% if block.settings.img != blank %}
        <div class="imageBx">
          <img src="{{ block.settings.img | img_url: 'master' }}">
        </div>
      {% endif %}
      
      {% if block.settings.mobile != blank %}
        <div class="imageBxM">
          <img src="{{ block.settings.mobile | img_url: 'master' }}">
        </div>
      {% endif %}
      
      {% if block.settings.title != blank %}
          <h2>{{ block.settings.title }}</h2>
              <div class="products">
    <div class="products-container">
    {% if settings.count_down_collections %}
      {% assign dealTime = settings.home_productdeal_time | split: ' ' | join: ' ' | split: ' ' %}
      <h1> {% include 'countdown-snippet' %}</h1>
      {% endif %}
          </div>
          </div>
      {% endif %}
    </div>
    {%- assign index = index | plus: 1 -%}
  {% endfor %}
</section>



{% schema %}
  {
    "name": "Image Text",
    "settings": [
      {
        "label": "Title",
        "id": "title",
        "type": "text",
        "default": "Hero Carousel"
      },
      {
        "label": "Hide Controls?",
        "id": "banner_type",
        "type": "checkbox",
        "default": false
      }
    ],
    "blocks": [
    {
      "name":"block",
      "type":"image",
      "settings":[
        {
          "label":"Image",
          "type":"image_picker",
          "id":"img"
        },
        {
          "label":"Title",
          "type":"text",
          "id":"title"
        },
        {
            "type":"image_picker",
            "id":"mobile",
            "label":"Mobile Image"
        }
      ]
  }
    ],
"presets":[
    {
        "name":"Hero Carousel",
        "category":"New"
    }
]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

countdown-snippet.liquid

{% capture currentProducID %}{{ product.id }}@{% endcapture %}
{% if dealPro contains currentProducID %}
{% assign dealProTime = dealPro | replace: currentProducID,'' | replace: '_',' ' %}
<div class="deal-clock lof-clock-5928353923233-detail"></div>
<script>
  !(function () {
    ($.fn.lofCountDown = function (t) {
        return this.each(function () {
            new $.lofCountDown(this, t);
        });
    }),
        ($.lofCountDown = function (t, e) {
            if (
                ((this.options = $.extend(
                    {
                        autoStart: !0,
                        LeadingZero: !0,
                        DisplayFormat: "<ul class='list-inline'><li class='day'>%%D%% Days</li></ul><div>%%H%% Hours</div><div>%%M%% Minutes</div><div>%%S%% Seconds</div>",
                        FinishMessage: "Expired",
                        CountActive: !0,
                        TargetDate: null,
                    },
                    e || {}
                )),
                null != this.options.TargetDate && "" != this.options.TargetDate)
            ) {
                (this.timer = null), (this.element = t), (this.CountStepper = -1), (this.CountStepper = Math.ceil(this.CountStepper)), (this.SetTimeOutPeriod = 1e3 * (Math.abs(this.CountStepper) - 1) + 990);
                var n = new Date(this.options.TargetDate),
                    i = new Date();
                this.CountStepper > 0 ? (ddiff = new Date(i - n)) : (ddiff = new Date(n - i)), (gsecs = Math.floor(ddiff.valueOf() / 1e3)), this.CountBack(gsecs, this);
            }
        }),
        ($.lofCountDown.fn = $.lofCountDown.prototype),
        ($.lofCountDown.fn.extend = $.lofCountDown.extend = $.extend),
        $.lofCountDown.fn.extend({
            calculateDate: function (t, e, n) {
                var i = (Math.floor(t / e) % n).toString();
                return this.options.LeadingZero && i.length < 2 && (i = "0" + i), "<b>" + i + "</b>";
            },
            CountBack: function (t, e) {
                return 0 > t
                    ? void (e.element.innerHTML = '<div class="lof-labelexpired"> ' + e.options.FinishMessage + "</div>")
                    : (clearInterval(e.timer),
                      (DisplayStr = e.options.DisplayFormat.replace(/%%D%%/g, e.calculateDate(t, 86400, 1e5))),
                      (DisplayStr = DisplayStr.replace(/%%H%%/g, e.calculateDate(t, 3600, 24))),
                      (DisplayStr = DisplayStr.replace(/%%M%%/g, e.calculateDate(t, 60, 60))),
                      (DisplayStr = DisplayStr.replace(/%%S%%/g, e.calculateDate(t, 1, 60))),
                      (e.element.innerHTML = DisplayStr),
                      void (
                          e.options.CountActive &&
                          ((e.timer = null),
                          (e.timer = setTimeout(function () {
                              e.CountBack(t + e.CountStepper, e);
                          }, e.SetTimeOutPeriod)))
                      ));
            },
        });
})(jQuery);

  //<![CDATA[
  jQuery(document).ready(function($){
    $(".lof-clock-{{ product.id }}-detail").lofCountDown({
      TargetDate:"{{ dealProTime }}",
      DisplayFormat:"<ul class='list-inline'><li class='day'>%%D%%<span>D</span></li><li class='hours'>%%H%%<span>H</span></li><li class='mins'>%%M%%<span>M</span></li><li class='seconds'>%%S%%<span>S</span></li></ul>",
      FinishMessage: "Expired"
      });
  });
  //]]>
</script>
<style></style>
{% break %}
{% endif %}
{% endfor %}

Source: Ask Javascript Questions

LEAVE A COMMENT