tabbit

Tue Nov 05 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-items">
          <span></span> in your cart
        </div>
        <div class="cart-secure"></div>
        <a href="" class="close-cart">&times;</a>
      </div>
        <div class="loading-div">
            <div class="lds-dual-ring"></div>
            <div style="font-size:90%">Loading cart</div>
        </div>
      <iframe src="" frameborder="0" id='cart-iframe'></iframe>
    </div>        
    `
    $(document.body).append(carthtml)
	  document.domain="rosettastone.com";
    
  	  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(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(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('https://secure.rosettastone.com/us_en_store_view/checkout/cart/')
       }
      })
      
      $('.toggler.mobile').click(function(e) {        
        openCartIFrame('https://secure.rosettastone.com/us_en_store_view/checkout/cart/')
      })


      function openCartIFrame (href) {

        $cartOverlay.fadeIn()

        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 (!$iframe.attr('src')) {
         //$iframe.attr('src', href)
       }
       
        if (!/sku/.test(href) && !/sku/.test($iframe.attr('src')) ) {
          console.log('condition 1')
          return
        }
        
        if ( /sku/.test(href)) {
          console.log('condition 2')
          $iframe.attr('src', href)
        }
        
        //if (!/sku/.test()) {
	    
       
       
        
        // hide livechat
        $('#launcher').fadeOut()       
      }
  
      function closeCartOverlay (itemCount) {
       
        $('.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)
      

      /*
      let cartAPI = 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/flyout?callback=parseCart'
      let script = document.createElement('script');
      script.type = 'text/javascript'; 
      script.src = cartAPI
      document.head.appendChild(script)
      function parseCart (data) {
        if (data.count == 0) {
          data.count = 1
        }
        var item = (data.count > 1) ? 'items' : 'item'
        $('.cart-items span').html(data.count + ' ' + item)
      }
     */  
    
     // 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 {
        position: absolute;
        top: 100px;
        z-index: -1;
      }

      .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;
      }

      .cart-items {
        display: none;
        line-height: 30px;
        padding-left: 32px;
        background-position: left;
        background-repeat: no-repeat;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyOHB4IiBoZWlnaHQ9IjIycHgiIHZpZXdCb3g9IjAgMCAyOCAyMiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5BQ0EwNjZCNy05NkRELTQyRjAtQkQwMS00ODE2MDI2NDI1Mjg8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IkNhcnQtT3ZlcmxheS1GaWxsZWQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNC4wMDAwMDAsIC0xMzYuMDAwMDAwKSIgZmlsbD0iI0VDQzIwMCI+ICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDkyLjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8ZyBpZD0iU2hvcHBpbmctY2FydCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzguMDAwMDAwLCA1NS4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTM4LjAwMDAwMCwgLTU1LjAwMDAwMCkgdHJhbnNsYXRlKDI0LjAwMDAwMCwgNDQuMDAwMDAwKSI+ICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDAuMDAwMDAwKSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjI0LjQ3MzA4OTggMTUuMTU2NDEwMyA5LjkxNzgwMDcxIDE1LjE1NjQxMDMgMy43OTkzMDk3NCAxLjY4NDA0NTU4IDAuMDAwODc0MDcwMTM4IDEuNjg0MDQ1NTggMC4wMDA4NzQwNzAxMzggMCA0Ljk0MzA4NTE1IDAgMTEuMDYxNTc2MSAxMy40NzIzNjQ3IDI0LjQ3MzA4OTggMTMuNDcyMzY0NyI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSIyNy45NjkzNzA0IDMuMzY4MDkxMTcgMjQuNDczMDg5OCAxMS43ODgzMTkxIDEyLjIzNjk4MTkgMTEuNzg4MzE5MSA4Ljc0MTU3NTQ1IDMuMzY4MDkxMTciPjwvcG9seWdvbj4gICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTUuNzMyMzg4NCwxOS4zNjY1MjQyIEMxNS43MzIzODg0LDIwLjc2MTEyNDUgMTQuNTU4NzMwNywyMS44OTI1OTI2IDEzLjExMTA1MjEsMjEuODkyNTkyNiBDMTEuNjYzMzczNCwyMS44OTI1OTI2IDEwLjQ4OTcxNTcsMjAuNzYxMTI0NSAxMC40ODk3MTU3LDE5LjM2NjUyNDIgQzEwLjQ4OTcxNTcsMTcuOTcxOTI0IDExLjY2MzM3MzQsMTYuODQwNDU1OCAxMy4xMTEwNTIxLDE2Ljg0MDQ1NTggQzE0LjU1ODczMDcsMTYuODQwNDU1OCAxNS43MzIzODg0LDE3Ljk3MTkyNCAxNS43MzIzODg0LDE5LjM2NjUyNDIgTDE1LjczMjM4ODQsMTkuMzY2NTI0MiBaIiBpZD0iU2hhcGUiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjQuNDczMDg5OCwxOS4zNjY1MjQyIEMyNC40NzMwODk4LDIwLjc2MTEyNDUgMjMuMjk4NTU4LDIxLjg5MjU5MjYgMjEuODUwODc5NCwyMS44OTI1OTI2IEMyMC40MDMyMDA3LDIxLjg5MjU5MjYgMTkuMjI4NjY5LDIwLjc2MTEyNDUgMTkuMjI4NjY5LDE5LjM2NjUyNDIgQzE5LjIyODY2OSwxNy45NzE5MjQgMjAuNDAzMjAwNywxNi44NDA0NTU4IDIxLjg1MDg3OTQsMTYuODQwNDU1OCBDMjMuMjk4NTU4LDE2Ljg0MDQ1NTggMjQuNDczMDg5OCwxNy45NzE5MjQgMjQuNDczMDg5OCwxOS4zNjY1MjQyIEwyNC40NzMwODk4LDE5LjM2NjUyNDIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgICAgIDwvZz4gICAgICAgICAgICA8L2c+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);

      }

      .close-cart {
        text-decoration: none;
        color: #fff;
        top: -5px;
        right: 13px;
        z-index: 10;
        position: absolute;
        font-size: 25px;
        display: none;
      }
      .cart-secure {
        display: none;
        padding-right: 40px;
        line-height: 15px;
        font-size: 13px;
        width: 72px;
        background-position: left;
        background-repeat: no-repeat;
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI4OXB4IiBoZWlnaHQ9IjIzcHgiIHZpZXdCb3g9IjAgMCA4OSAyMyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5DMjZFNkJFNi1CRTlELTQ3NkQtQjAwRi1GOTE2QzJFRTVERTI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggc2tldGNodG9vbC48L2Rlc2M+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IkNhcnQtT3ZlcmxheS1GaWxsZWQtQ29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MC4wMDAwMDAsIC0xMzYuMDAwMDAwKSIgZmlsbD0iI0ZGRkZGRiI+ICAgICAgICAgICAgPGcgaWQ9IkhlYWRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDkyLjAwMDAwMCkiPiAgICAgICAgICAgICAgICA8ZyBpZD0iU2VjdXJlLUNoZWNrb3V0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNzAuMDAwMDAwLCA0My4wMDAwMDApIj4gICAgICAgICAgICAgICAgICAgIDxnIGlkPSJTZWN1cmUtTG9jayIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDIuMDAwMDAwKSI+ICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjg5OTU1NTYsOC45NjUyNSBMMTMuODk5NTU1Niw2LjE3NjYyNSBDMTMuOTAwNDQ0NCwyLjc3MDI1IDExLjA4MzU1NTYsMCA3LjYyNDg4ODg5LDAgQzQuMTYzNTU1NTYsMCAxLjM0ODQ0NDQ0LDIuNzcwMjUgMS4zNDg0NDQ0NCw2LjE3NjYyNSBMMS4zNDg0NDQ0NCw4Ljk2NjEyNSBMMCw4Ljk2NjEyNSBMMCwyMC4zOTEgTDE1LjI0NDQ0NDQsMjAuMzkxIEwxNS4yNDQ0NDQ0LDguOTY1MjUgTDEzLjg5OTU1NTYsOC45NjUyNSBMMTMuODk5NTU1Niw4Ljk2NTI1IFogTTMuNzEyLDYuMTc2NjI1IEMzLjcxMiw0LjA1NDc1IDUuNDY2NjY2NjcsMi4zMzAxMjUgNy42MjQsMi4zMzAxMjUgQzkuNzc3Nzc3NzgsMi4zMzAxMjUgMTEuNTMxNTU1Niw0LjA1NTYyNSAxMS41MzE1NTU2LDYuMTc2NjI1IEwxMS41MzE1NTU2LDguOTY2MTI1IEwzLjcxMiw4Ljk2NjEyNSBMMy43MTIsNi4xNzY2MjUgTDMuNzEyLDYuMTc2NjI1IFogTTguNzAyMjIyMjIsMTcuMjU4NSBMNi41NDg0NDQ0NCwxNy4yNTg1IEw2Ljg3MTExMTExLDE0LjEyNjg3NSBDNi40NzI4ODg4OSwxMy44ODI3NSA2LjIwNDQ0NDQ0LDEzLjQ0NyA2LjIwNDQ0NDQ0LDEyLjk0NzM3NSBDNi4yMDQ0NDQ0NCwxMi4xNzgyNSA2LjgzOTExMTExLDExLjU1MzUgNy42MjQ4ODg4OSwxMS41NTM1IEM4LjQwNjIyMjIyLDExLjU1MzUgOS4wMzkxMTExMSwxMi4xNzgyNSA5LjAzOTExMTExLDEyLjk0NzM3NSBDOS4wMzkxMTExMSwxMy40NDcgOC43NzUxMTExMSwxMy44ODE4NzUgOC4zNzMzMzMzMywxNC4xMjY4NzUgTDguNzAyMjIyMjIsMTcuMjU4NSBMOC43MDIyMjIyMiwxNy4yNTg1IFoiIGlkPSJTaGFwZSI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgICAgICAgICAgPHRleHQgaWQ9IlNFQ1VSRS1DSEVDS09VVCIgZm9udC1mYW1pbHk9IkdvdGhhbUhURi1NZWRpdW0sIEdvdGhhbSBIVEYiIGZvbnQtc2l6ZT0iMTIiIGZvbnQtd2VpZ2h0PSI0MDAiIGxpbmUtc3BhY2luZz0iMTIiPiAgICAgICAgICAgICAgICAgICAgICAgIDx0c3BhbiB4PSIxOSIgeT0iMTEiPlNFQ1VSRTwvdHNwYW4+ICAgICAgICAgICAgICAgICAgICAgICAgPHRzcGFuIHg9IjE5IiB5PSIyMyI+Q0hFQ0tPVVQ8L3RzcGFuPiAgICAgICAgICAgICAgICAgICAgPC90ZXh0PiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+);

      }
      #cart-iframe {
        z-index: 2;
        width: 100%;
        height: 100%;
      }

    .lds-dual-ring {
      display: inline-block;
      width: 64px;
      height: 94px;
      
    }
    .lds-dual-ring:after {
      content: " ";
      display: block;
      width: 70px;
      height: 70px;
      margin: 1px;
      border-radius: 50%;
      border: 5px solid #f0c23f;
      border-color: #f0c23f transparent #f0c23f transparent;
      animation: lds-dual-ring 1.2s linear infinite;

    }
    @keyframes lds-dual-ring {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  
  @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 }
      }

    </style>