Untitled

 avatar
unknown
plain_text
2 years ago
8.8 kB
7
Indexable
(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";

    /* 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 getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    }

    function setCookie(name,value,days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days*24*60*60*1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=/";
    }

    var egToster =''+ 
    '  <div class="eg-popup">'+ 
    '  <div class="eg-popup-overlay"></div>'+ 
    '  <div class="eg-toster">'+ 
    '      <span class="eg-toster-cross">×</span>'+ 
    '      <div class="eg-toster-content">'+ 
    '          <h2 class="eg-toster-heading">Order in the next 30 minutes and get 10% off</h2>'+ 
    '          <div class="eg-promo-timer">'+ 
    '              <div class="eg-promo-timer-inr">'+ 
    '                  <div class="eg-minutes eg-box">'+ 
    '                      <span class="eg-number">00</span>'+ 
    '                      <span class="eg-text">min</span>'+ 
    '                  </div>'+ 
    '                  <span class="eg-colon">:</span>'+ 
    '                  <div class="eg-seconds eg-box">'+ 
    '                      <span class="eg-number">00</span>'+ 
    '                      <span class="eg-text">sec</span>'+ 
    '                  </div>'+ 
    '              </div>'+ 
    '          </div>'+ 
    '         <a href="https://thespanishgroup.org/billing?offerDiscount=true" class="eg-link">Place Order Now</a>'+
    '      </div>'+ 
    '      </div>'+ 
    '  </div>';

    var offset;
    
    function createSession() {
      if(getCookie('firstVisitSP') == null) {
        setCookie('firstVisitSP', '1',365);
      }
    }

    function init() {
    
        document.querySelector('body').insertAdjacentHTML('beforeend', egToster);
            
      document.querySelector('.eg-toster-cross').addEventListener('click', function(){
        createSession();
        document.querySelector('body').classList.remove('eg-top-toster');
      });

      document.querySelector('.eg-popup-overlay').addEventListener('click', function(){
        createSession();
        document.querySelector('body').classList.remove('eg-top-toster');
      });
     

//add mouseout event 
document.addEventListener("mouseout", function(e) {
  if (e.toElement == null && e.relatedTarget == null) {
    if(getCookie('firstVisitSP') == null) {
        startTimer();
      document.querySelector('body').classList.add("eg-top-toster");
     //create session 
      createSession();
      offset=window.pageYOffset;
    }
  }
});

if(window.screen.width < 1024)
{ 
  // listen to "scroll" event
  window.onscroll = function(){
      var a= checkScrollSpeed();
    if (a < -100 && getCookie('firstVisitSP') == null) {
        document.querySelector('body').classList.add("eg-top-toster");
        //create session 
        startTimer();
         createSession();
  }
  };
}

    }

    var checkScrollSpeed = (function(settings){
        settings = settings || {};
    
        var lastPos, newPos, timer, delta, 
            delay = settings.delay || 50; // in "ms" (higher means lower fidelity )
    
        function clear() {
          lastPos = null;
          delta = 0;
        }
    
        clear();
    
        return function(){
          newPos = window.scrollY;
          if ( lastPos != null ){ // && newPos < maxScroll 
            delta = newPos -  lastPos;
          }
          lastPos = newPos;
          clearTimeout(timer);
          timer = setTimeout(clear, delay);
          return delta;
        };
    })();
function startTimer(){
    var countdown = 30 * 60 * 1000;
    var timerId = setInterval(function(){
      countdown -= 1000;
      var min = Math.floor(countdown / (60 * 1000));
      //var sec = Math.floor(countdown - (min * 60 * 1000));  // wrong
      var sec = Math.floor((countdown - (min * 60 * 1000)) / 1000);  //correct
    
      if (countdown <= 0) {
         clearInterval(timerId);
         document.querySelector('body').classList.remove('eg-top-toster');
         createSession();
      } else {
        if (min < 10) {
          document.querySelector(".eg-minutes .eg-number").innerHTML = min = "0" + min;
        } else {
          document.querySelector(".eg-minutes .eg-number").innerHTML = min;
        }

        if (sec < 10) {
          document.querySelector(".eg-seconds .eg-number").innerHTML = sec = "0" + sec;
        } else {
          document.querySelector(".eg-seconds .eg-number").innerHTML = sec;
        }

      }
    
    }, 1000); 
}
    /* Initialise variation */
    if(!getCookie('firstVisitSP')){
      waitForElement("body", init, 50, 15000);
    }
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();


<style>
html body.eg-top-toster .eg-popup{
    display: block;
}

html body .eg-popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999999;
}
html body .eg-popup-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00000042;
    z-index: 1;
}
.eg-toster {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #3aa6a8;
    max-width: 382px;
    width: 95%;
    -webkit-box-shadow: 0px 3px 9px 0px rgb(136 136 136 / 50%);
    -moz-box-shadow: 0px 3px 9px 0px rgb(136 136 136 / 50%);
    box-shadow: 0px 3px 9px 0px rgb(136 136 136 / 50%);
    border-radius: 20px;
    z-index: 2;
}

html body .eg-toster-heading {
    font-size: 23px !important;
    font-weight: bold !important;
    color: #ffffff;
    letter-spacing: 0.66px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 16px;
    margin-top: 10px;
}
html body .eg-toster-subheading {
    color: #333333;
    font-size: 16px;
    letter-spacing: 0.53px;
    line-height: 24px;
    text-align: center;
    margin: 16px 10px 22px;
}
html body .eg-toster-content {
    padding: 20px 18px 30px;
    text-align: center;
}

html body .eg-toster-cross {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 30px;
    line-height: 18px;
    cursor: pointer;
    color: #ffffff;
    padding: 3px;
    display: inline-flex;
    width: auto;
    z-index: 9;
    font-weight: 600;
}
.eg-promo-timer-inr {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.eg-promo-timer .eg-hours,
.eg-promo-timer .eg-date {
    display: none;
}
.eg-promo-timer .eg-box {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0px 5px;
    align-items: center;
    flex-direction: column;
}

.eg-promo-timer .eg-box .eg-text {
    text-transform: capitalize;
    color: #fff;
    font-weight: 600;
    margin-top: 10px;
}
.eg-toster .eg-link {
    display: inline-flex;
    background: #2e7182;
    padding: 9px 20px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 4px;
}

.eg-toster .eg-link:hover {
    opacity: .9;
}
.eg-promo-timer .eg-box .eg-number {
    background: #fff;
    border-radius: 2px;
    color: #1f3d5c;
    font-weight: 600;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 16px 29px 0px rgb(0 0 0 / 25%);
    -webkit-box-shadow: 0px 16px 29px 0px rgb(0 0 0 / 25%);
    -moz-box-shadow: 0px 16px 29px 0px rgba(0,0,0,0.25);
    margin-right: 5px;
    font-size: 27px;
}
.eg-promo-timer .eg-minutes{
    margin-right: 15px;
}
.eg-promo-timer .eg-promo-timer-inr .eg-colon {
    display: none;
}

.eg-promo-timer .eg-promo-timer-inr > span {
    font-size: 18px;
    margin-right: 10px;
}
@media screen and (max-width:767px) {
    .eg-toster {
        max-width: 375px;
    }
}
</style>
Editor is loading...