Website Banner Countdown

myangelsn
New Member
16 0 0

Good Evening,

I followed this article

https://appstore.mageworx.com/blog/no-app-required-boost-sales-by-adding-announcement-countdown-time...

 

And I got the Announcement Bar to show up in my customized edit website section but for some reason it does not show the bar at the top of the page. I can't figure out what I did wrong. If anyone could please help me out? Thank you!

 

Below is the code I am using. I do have it enabled but no matter what I do the countdown does not show up. Attached is the code that I'm using.

{% if section.settings.enabled %}
  <script>
    window.onload = function() {
      if (typeof jQuery === 'undefined') {
          return;
      }

      mwAnnouncementBar.init();
    }

    var mwAnnouncementBar = (function() {
      var ID = 'mw-announcement-bar', 
          TEXT = '{{ section.settings.text }}', 
          LINK = '{{ section.settings.banner_link }}', 
          BACKGROUND_COLOR = '{{ section.settings.background_color }}', 
          TEXT_COLOR = '{{ section.settings.text_color }}', 
          TOP_MARGIN = {{ section.settings.top_margin }},
          COUNTDOWN_TIMER_ENABLED = {{ section.settings.timer_enabled }}, 
          COUNTDOWN_TIMER_DATE = {{ section.settings.timer_date | json }}, 
          $timer,
          $bar;

      function buildBar() {
        var $textContent = $('<div class="mw-announcement-bar__text" />');
        $textContent.html(TEXT);

        $bar = $('<div id="' + ID + '" />')
        .css({
          'background': BACKGROUND_COLOR,
          'color': TEXT_COLOR,
          'margin-top': TOP_MARGIN + 'px'
        })
          .append($textContent);

        if (COUNTDOWN_TIMER_ENABLED &&
            new Date(COUNTDOWN_TIMER_DATE) instanceof Date &&
            !isNaN(new Date(COUNTDOWN_TIMER_DATE))) {
          $timer = $('<div class="mw-announcement-bar__timer"/>');
          $bar.append($timer);

          var timer = buildTimer($timer);

          if (timer === false) {
            return;
          }
        }

        $('body').prepend($bar);

        if (LINK.length) {
          $bar.wrap('<a href="' + LINK + '" class="mw-announcement-bar__link" />');
        }
      }

      function buildTimer($timer) {
        var today = new Date().getTime();
        var endTime = new Date(COUNTDOWN_TIMER_DATE).setHours(0, 0, 0, 0);
        var diff = endTime - today;

        if (diff > 0) {
          var timer = setInterval((function tick() {
            var now = new Date().getTime(),
                distance = (endTime - now),
                days = Math.floor(distance / (1000 * 60 * 60 * 24)),
                hours = ('00' + Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).slice(-2),
                minutes = ('00' + Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).slice(-2),
                seconds = ('00' + Math.floor((distance % (1000 * 60)) / 1000)).slice(-2);

            if (distance < 0) {
              clearInterval(timer);

              return null;
            }

            $timer.html(
                        '<span class="mw-announcement-bar__timer__value">' + 
                              '<span class="mw-announcement-bar__timer__digit">' + days + '</span>' + 
                              '<span class="mw-announcement-bar__timer__label">{{ section.settings.timer_days_label }}</span>' + 
                        '</span>' + 
                        '<span class="mw-announcement-bar__timer__value">' + 
                              '<span class="mw-announcement-bar__timer__digit">' + hours + '</span>' + 
                              '<span class="mw-announcement-bar__timer__label">{{ section.settings.timer_hours_label }}</span>' + 
                        '</span>' + 
                        '<span class="mw-announcement-bar__timer__value">' + 
                              '<span class="mw-announcement-bar__timer__digit">' + minutes + '</span>' + 
                              '<span class="mw-announcement-bar__timer__label">{{ section.settings.timer_minutes_label }}</span>' +
                        '</span>' + 
                        '<span class="mw-announcement-bar__timer__value">' + 
                              '<span class="mw-announcement-bar__timer__digit">' + seconds + '</span>' + 
                              '<span class="mw-announcement-bar__timer__label">{{ section.settings.timer_seconds_label }}</span>' + 
                        '</span>'
                      );

            return tick;
          })(), 1000);
        } else {
          return false;
        }
      }

      function init() {
        buildBar();
      }

      return {
        init: init
      }
    })();
  </script>

  <style>
    #mw-announcement-bar {
      width: 100%;
      padding: 10px;
      text-align: center;
      line-height: 1.5;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .mw-announcement-bar__link {
      text-decoration: none;
      color: {{ section.settings.text_color }};
    }

    .mw-announcement-bar__text {
      width: 100%;
    }

    .mw-announcement-bar__text a:link,
    .mw-announcement-bar__text a:visited {
      text-decoration: underline;
      color: {{ section.settings.text_color }};
    }

    .mw-announcement-bar__timer {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-left: 15px;
    }

    .mw-announcement-bar__timer__value {
      padding: 5px;
      border-radius: 3px;
      background: {{ section.settings.background_color | color_darken: 10 }};
    }

    .mw-announcement-bar__timer__value:not(:last-child) {
      margin-right: 5px;
    }

    .mw-announcement-bar__timer__digit {
      display: block;
      font-size: 18px;
      font-weight: bold;
      line-height: 1;
      margin-bottom: 5px;
    }

    .mw-announcement-bar__timer__label {
      display: block;
      font-size: 12px;
      font-weight: light;
      text-transform: uppercase;
      line-height: 1;
    }

    @media screen and (max-width: 749px) {
      #mw-announcement-bar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
      }

      .mw-announcement-bar__timer {
        margin-top: 10px;
        margin-left: 0;
      }
    }
  </style>
{% endif %}

{% schema %}
  {
    "name": "Announcement bar",
    "tag": "section",
    "settings": [
      {
         "type": "checkbox",
         "id": "enabled",
         "default": false,
         "label": "Enable announcement bar"
      },
      {
         "type": "textarea",
         "id": "text",
         "default": "Hello",
         "label": "Text"
      },
      {
         "type": "color",
         "id": "background_color",
         "label": "Background color",
         "default": "#d62020"
      },
      {
         "type": "color",
         "id": "text_color",
         "label": "Text color",
         "default": "#ffffff"
      },
	  {
        "id": "banner_link",
        "type": "url",
        "label": "Banner link"
      },
	  {
         "type": "number",
         "id": "top_margin",
         "default": 0,
         "label": "Top margin (px)"
      },
	  {
         "type": "header",
         "content": "Countdown timer"
      },
	  {
         "type": "checkbox",
         "id": "timer_enabled",
         "default": false,
         "label": "Enable countdown timer"
      },
      {
         "type": "text",
         "id": "timer_date",
         "label": "Expiration date",
		 "info": "Format: YYYY-MM-DD"
      },
      {
         "type": "text",
         "id": "timer_days_label",
         "label": "Days label",
		 "default": "Days"
      },
      {
         "type": "text",
         "id": "timer_hours_label",
         "label": "Hours label",
		 "default": "Hours"
      },
      {
         "type": "text",
         "id": "timer_minutes_label",
         "label": "Minutes label",
		 "default": "Minutes"
      },
      {
         "type": "text",
         "id": "timer_seconds_label",
         "label": "Seconds label",
		 "default": "Seconds"
      }
    ]
  }
{% endschema %}
Replies 2 (2)
DMT-Andre
Shopify Partner
19 2 18

Can you share the store URL?

Need expert help with your Shopify Website? Message me or contact the team.
myangelsn
New Member
16 0 0

BecauseYoureUnique.com