Untitled

(function () {
    try {
      /* main variables */
      var debug = 0;
      /* all Pure helper functions */
      function waitForElement(selector, trigger, delayInterval, delayTimeout) {
        var interval = setInterval(function () {
          if (
            document &&
            document.querySelector(selector) &&
            document.querySelectorAll(selector).length > 0
          ) {
            clearInterval(interval);
            trigger();
          }
        }, delayInterval);
        setTimeout(function () {
          clearInterval(interval);
        }, delayTimeout);
      }
      function live(selector, event, callback, context) {
        /****Helper Functions****/
        // helper for enabling IE 8 event bindings
        function addEvent(el, type, handler) {
          if (el.attachEvent) el.attachEvent("on" + type, handler);
          else el.addEventListener(type, handler);
        }
        // matches polyfill
        this.Element &&
          (function (ElementPrototype) {
            ElementPrototype.matches =
              ElementPrototype.matches ||
              ElementPrototype.matchesSelector ||
              ElementPrototype.webkitMatchesSelector ||
              ElementPrototype.msMatchesSelector ||
              function (selector) {
                var node = this,
                  nodes = (node.parentNode || node.document).querySelectorAll(selector),
                  i = -1;
                while (nodes[++i] && nodes[i] != node);
                return !!nodes[i];
              };
          })(Element.prototype);
        // live binding helper using matchesSelector
        function live(selector, event, callback, context) {
          addEvent(context || document, event, function (e) {
            var found,
              el = e.target || e.srcElement;
            while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
            if (found) callback.call(el, e);
          });
        }
        live(selector, event, callback, context);
      }
      var intervalFn;
      function init() {
     //write variation code here
     if(window.innerWidth < 700) {
	    const egHtml = '<div class="s001-banner-wrapper" style="display:none;">\
		    <div class="s001-banner-data">\
		        <p>Fitting Reserved. Checkout in <span class="whole-time-block"><span class="s001-timer-m"></span>min <span class="s001-timer-s"></span>sec to confirm.</p>\
		    </div>\
		</div>';
		document.querySelector('.navigation .checkout-nav').insertAdjacentHTML('afterend',egHtml);
	}else {
		const egHtml = '<div class="s001-banner-wrapper" style="display:none;">\
		    <div class="s001-banner-data">\
		        <p>Your fitting time has been reserved. Checkout in <span class="whole-time-block"><span class="s001-timer-m"></span>min <span class="s001-timer-s"></span>sec to confirm your fitting.</p>\
		    </div>\
		</div>';
		document.querySelector('.navigation .checkout-nav').insertAdjacentHTML('afterend',egHtml);
	}
     
		
	//jQuery(egHtml).insertBefore('.checkout-section.checkout-details .checkout-fields.checkout-details-fields');
   live('.checkout-date-option>label','click',function(){
	clearInterval(intervalFn);	
    timerfn();
   document.querySelector('.s001-banner-wrapper').style.display = 'block';
   setTimeout(function(){
    document.querySelector('body .checkout-date_time').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
   },1000);
  	});
    
      }
      function timerfn () {
		let ss02minutes = 10;
		let ss02seconds = 0;
		 intervalFn = setInterval(function() {
		  --ss02seconds;
		  if(ss02minutes === 0 && ss02seconds === 0) {
		  	 clearInterval(intervalFn);
		  	 timerfn();
		  	 ss02minutes = 10;
			 ss02seconds = 0;
		  }
		  if(ss02seconds <= 0) {
		  	ss02seconds = 59;
		  	--ss02minutes;
		  }
		  // console.log(ss02seconds);
		  document.querySelector('.s001-timer-m').innerHTML=ss02minutes;
		  if (ss02seconds < 10) {
		  	document.querySelector('.s001-timer-s').innerHTML= '0' + ss02seconds;
		  }
           else
		  	document.querySelector('.s001-timer-s').innerHTML=ss02seconds;
		  
		}, 1000);
	}
      /* Initialise variation */
      waitForElement(".navigation .checkout-nav", init, 50, 15000);
    } catch (e) {
   console.log(e, "error in Test");
    }
  })();


.s001-banner-wrapper {
  background : rgb(17, 17, 17);
  display : block;
  z-index : 9999;
}

.s001-banner-data p {
  margin-bottom : 0px;
  text-align : center;
  padding : 10px 0px;
  font-weight : 500;
  color : white;
  letter-spacing : 0.2px;
  font-family : Montserrat, sans-serif;
  font-size : 15px;
}
@media only screen and (max-width: 600px) {
  .s001-banner-wrapper {
    padding : 7px;
  }

  .h2-custom {
    margin-top : 20px;
  }

  .s001-banner-data p {
    font-size : 12px;
  }
}
@media only screen and (max-width: 1242px) {
  .s001-banner-wrapper.green-floating {
    background : rgb(80, 158, 49);
    display : block;
    position : fixed;
    top : 115px;
    width : 80%;
  }
}
@media only screen and (max-width: 1170px) {
  .s001-banner-wrapper.green-floating {
    top : 110px;
    width : 80%;
  }
}
@media only screen and (max-width: 1075px) {
  .s001-banner-wrapper.green-floating {
    top : 97px;
    width : 86.2%;
  }
}
@media only screen and (max-width: 1000px) {
  .s001-banner-wrapper.green-floating {
    top : 97px;
    width : calc(100% - 141px);
  }
}
@media only screen and (max-width: 725px) {
  .s001-banner-wrapper.green-floating {
    top : 89px;
    width : calc(100% - 62px);
  }
}
span.whole-time-block span {
  font-weight : 700;
  color : rgb(255, 0, 0);
}

.s001-banner-data span span {
  font-weight : 700;
  color : rgb(255, 0, 0);
}