tabbit

Sat Dec 14 2019
Copied to clipboard! Copy reply
<script>
  
  RSUI.util.setCookie('cartexp', 'cart-overlay')
   var carthtml = `
 <div class="toggler mobile">
       <img src="https://www.rosettastone.com/nuxt-assets/img/icons/cart.svg" alt="view cart" class='open'>
     </div>
   <div id="cart-overlay"></div>
   <div id="cart-iframe-wrap">
     <div class="toggler desktop">
       <img src="https://www.rosettastone.com/nuxt-assets/img/icons/cart.svg" alt="view cart" class='open'>
       <img src="https://www.rosettastone.com/nuxt-assets/img/icons/x-thick.svg" alt="hide cart" class='close'>
     </div>
     <div class="cart-header">       
       <div class="cart-secure"></div>
       <a href="" class="close-cart">&times;</a>
     </div>
       <div class="loading-div">
           <h4></h4>
           <p>Preparing your order</p>
         <div class='progress'></div>
       </div>
     <iframe src="" frameborder="0" id='cart-iframe'></iframe>
   </div>        
   `
   $(document.body).append(carthtml)
   document.domain="rosettastone.com";
 
    // pick number between 0-2
     var randomIndex =  Math.floor(Math.random() * Math.floor(3));
     var loadingMessages = {
     en: [
       'Bilinguals tend to make more money at work.<br>Slightly more effective than stocking stuffer lotto tickets.',
       'Studies show learning a new language makes you more open-minded.<br>(We think it makes you more attractive, too.)',
       'Bilingualism can sharpen problem solving skills. <br>Speaking of which, how are you with tangled Christmas lights?'
       ]
     }
     window.setTimeout(function() {
     $('.loading-div h4').html( loadingMessages.en[randomIndex] ).fadeIn(200)
     $('.loading-div p').fadeIn(500)     
     $('.progress').addClass('active')
     },0)
     
     var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent)
     var smallerThan1024 = window.innerWidth <= 1024

     // SBSR Desktop
     var desktopAnchor = '.add-to-cart'
     var mobileAnchor = '.product-m.product'
   
     var $cartwrap = $('#cart-iframe-wrap')
     var $cartOverlay = $('#cart-overlay')
     var $iframe = $('#cart-iframe')

     $(desktopAnchor).unbind()
     $(desktopAnchor).off()
     $(mobileAnchor).unbind()
     $(mobileAnchor).off()

     // unbind click on mobile's arrow 
     $('.product-m.product div.arrow').off().unbind()

     // If catalog, add 83px margin top because of sticky nav
     if (/buy-/.test(window.location.href) ) {
      $cartwrap.css({top: '83px', 'min-height':0, 'max-height': (window.innerHeight - 83) + 'px'})
      //$cartwrap.css({top: '83px', 'min-height':0})
      $('.toggler.mobile').css({right: '82px', height: '67px'})       
     }
     
     /** Android needs this or iframe isn't visible. */
     if (smallerThan1024) {
       $cartwrap.css('left', 0)
     }
   
 
     $(desktopAnchor).click(function(e) {
       e.preventDefault()
       openCartIFrame(true, e.target.href )
     })

     /**
      * Clicking mobile cta opens cart,
      * passing cart url to openCartOverlay()
      */

     $(mobileAnchor).click(function(e) {
       var href = null
       if (e.target.tagName == 'A') {
         href = e.target.href
       } else {
         href = $(this).closest('a').attr('href')
       }        
       e.preventDefault()        
       openCartIFrame(true, href)
     })

     /** The 'x' icon' */
     $('.close-cart').click(function(e) {
       e.preventDefault()
       closeCartOverlay()
     })
     
     $('.toggler.desktop').click(function(e) {
      if ($cartwrap.css('margin-right') == '0px') {
          closeCartOverlay()
      } else {
        openCartIFrame(false, 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/')
      }
     })
     
     $('.toggler.mobile').click(function(e) {        
       openCartIFrame(false, 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/')
     })


      function openCartIFrame (showLoadig, href) {
        console.log('show loading? ' + showLoadig)
        $cartOverlay.fadeIn()
        if (showLoadig) {          
         // $('.loading-div').css({'visibility': 'visible', 'z-index': '1'})
        } else {
          //$('.loading-div').css({'visibility': 'hidden', 'z-index': '-2'})
        }

        if ( !isIOS && !smallerThan1024) {
          $cartwrap.animate({"margin-right": '+=580px'});
        } else {
          $cartwrap.fadeIn()
        }

        $cartwrap.fadeIn().css({display: 'flex'}) 
        
        $('.toggler.desktop .open').fadeOut()
        $('.toggler.desktop .close').fadeIn()
        
        // In mobile, we dont show toggler icon. we show 'X'
        if (smallerThan1024) {	
          $('.toggler.mobile').css({display: 'none'});
        }        
       
        $("body").css({"position": "fixed", width: '100%'});

        if (/stgcart=1/.test(window.location.href)) {
         href = href.split('secure')
         href = href.join('secure.stg')
       }
       
        if (/devcart=1/.test(window.location.href)) {
          href = href.split('secure')
          href = href.join('secure.dev')
        }
               
        if (/prepcart=1/.test(window.location.href)) {
         href = href.split('secure')
         href = href.join('secure.prep')
         //href += (window.location.search ? '&' : '?') + 'theme=overlay'
       }

        
        // If not showing loading, toggle icon was clicked.
        // Don't change iframe src
        if (!showLoadig) {
          console.log('showing cart')
          return
        }
       
       if ( /sku/.test(href)) {
         console.log('Updating frame src: ' + href)
         $iframe.attr('src', '')
         window.setTimeout(function() {
          $iframe.attr('src', href)
         },200)
       }     

       // hide livechat
       $('#launcher').fadeOut()       
     }
 


     function closeCartOverlay (itemCount) {
       $cartOverlay.fadeOut()
       //$('.loading-div').css({'visibility': 'hidden', 'z-index': '-2'})
       $('.toggler.desktop .close').fadeOut()
       $('.toggler.desktop .open').fadeIn()
       
       if ( !isIOS && window.innerWidth > 1024) {          
         $cartwrap.animate({"margin-right": '-=580px'});
       } else {          
         $cartwrap.fadeOut()
       }
       
       $('#launcher').fadeIn()
       
       // In mobile, we dont show toggler icon. we show 'X'
       if (smallerThan1024) {	
         $('.toggler.mobile').css({display: 'flex'});
       }    

       
       
       
       
       $cartOverlay.fadeOut()
       
       
       $("body").css("position", "static");
       
     }
 
     document.addEventListener('closeCartOverlay', closeCartOverlay)
     window.addEventListener('closeCartOverlay', closeCartOverlay)    


    // Fix iOS's input zoom problem
    if (isIOS) {
     $('body').append("<style>#cart-iframe-wrap { width: 100%; left: 0  }</style>")
    }
 
   
 </script>
<style>
     #cart-overlay {
       position: fixed;
       height: 100%;
       width: 100%;
       left: 0;
       top: 0;
       background: rgba(0,0,0, 0.7);
       display: none;
     }
     #cart-iframe-wrap {        
       position: fixed;
       top: 0;
       bottom: 0;                
       right: 0;
       height: 100%;
       min-height: 100% ;
       z-index: 5;
       background: #fff;
       display: flex;
       flex-direction:column;
       align-items: center;
       box-shadow: -2px -1px 9px 0px  rgba(0,0,0,0.7);
       font-family: effra;
       width: 580px;
       margin-right: -580px;
       -webkit-overflow-scrolling: touch;
       overflow-scrolling: touch;
       display: none;
     }
     
     /* Ipad */
     @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
       /*#cart-iframe-wrap { width: 100%; }*/
     }
     /* Iphone X */
     @media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
       /*#cart-iframe-wrap { width: 100%; }*/
     }
     
    .toggler {        
       background:  #ecc200 no-repeat center;        
       display: flex;    
       cursor: pointer;
       justify-content: center;
        width: 40px;
       height: 60px;
      border-bottom-left-radius: 5px;
       border-top-left-radius: 5px;
      align-items: center;
  }
   .toggler.desktop {
     position: absolute;
       width: 40px;
       height: 66px;        
       left: -40px;  

   }
 
   .toggler .close {
     width: 16px;
     height: 16px;
   }
   .toggler .close {
     width: 23px;
     height: 20px;
   }
 
   .toggler .open { display: none;  }
 
   .toggler.mobile {
     display: none;
     position: fixed;                
     right: 0;
     top: 0;      	
     z-index: 5000;
   }
   .loading-div {
     z-index: -1;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(62,148,211,.98);
     display: flex;
     flex-direction: column;
     padding: 1em;
     color: #fff;
     box-sizing: border-box;
     }
 
 .loading-div h4 {    
   font-size: 32px;
   font-weight: 700;    
   margin:1em 0 20px 0;
   letter-spacing: .029em;
   line-height: 1.2em;
   display: none;
  
    font-family: Helvetica, helvetica_bold, effra;
 }
 
 .loading-div p {
   font-style: italic;
   font-size: 22px;
   display: none;
   margin-bottom: 20px;

    font-family: Helvetica, effra;
 }
 
 .progress {
 background: white;
 width: 0px;
 height: 3px;  
   display: none;
}

.progress.active {
 display: block;
 animation: progress 8s 
}


     .cart-header {
       background: #262626;
       color: #fff;
       width: 100%;
       padding: 0;
       box-sizing: border-box;
       font-weight: bold;
       display: flex;
       position: relative;
       justify-content: space-between;
       height: 0;
     }

    
     .close-cart {
       text-decoration: none;
       color: #fff;
       top: -5px;
       right: 13px;
       z-index: 10;
       position: absolute;
       font-size: 25px;
       display: none;
     }
    
     #cart-iframe {
       z-index: 2;
       width: 100%;
       height: 100%;
     }

   
 @media  (max-width : 1024px)  {
       #cart-iframe-wrap { width: 100%; }
       .toggler { position: fixed; right: 0, top: 0 }
       .toggler .open { display: block!important}
       .toggler .close { display: none!important}
       .toggler.mobile { display: none }
       .close-cart { display: block }
     }
 
 
 
 
 @keyframes progress {
 0% {
   width: 0px
 }
 100% {
   width: 100%;
 }
}



   </style>