tabbit

Top of page ribbon top of page ribbon- mobile
Fri Nov 18 2016
Copied to clipboard! Copy reply
<style type="text/css">
#rto{
	font-family: gotham_htfmedium;
	height: 233px;
	z-index: 9000;
	background: #efe9d6;
	text-align: center;
	padding: 25px 0 15px;
	line-height: 1;
	font-size:20px;
	font-family:sans-serif;
	color:#333;
	position: fixed;
	bottom: 0;
	right: 50%;
  margin-right: -247px;
  width: 496px;
	box-shadow: 0 2px 30px -3px #555;
	transition: bottom 0.5s;
}
#rtobutton{
	display: inline-block;
	font-family: gotham_htfbook;
	margin: auto;
	padding: 15px 40px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-radius: 7px;
	margin-top: 10px;
	background: #0096d9;
	box-shadow: 0 -35px 25px -15px #006aa5 inset, 0 1px 2px -1px #999;
	text-shadow: -1px -1px 0 #458;
}
#rto_showhide{
	cursor: pointer;
	position: absolute;
  top: -29px;
  right: 44px;
}
#rto_show_button, #rto_hide_button{
	position: absolute;
	left: 0;
	top: 0;
	-ms-transform: rotate(7deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 10;
}
#yellowtop {
	width: 100%;
	height: 15px;
	background-color: #ecc200;
	position: absolute;
	top: 0;
}
#clock{
	position: relative;
	background: #444;
	color: #eabf26;
	font-size: 0;
	display: inline-block;
	border-radius: 2px;
	border-bottom: 1px solid #222;
	box-shadow: 0 -35px 25px -15px rgba(22,22,22,0.5) inset;
}
.clockdiv{
  font-size: 15px;
  display: inline-block;
  border-right: 1px solid #111;
  border-left: 1px solid #333;
  padding: 10px 30px;
  font-weight: bold;
}
.clockdiv-last{
	border-right: 0;
}
.timeleft{
	font-size: 22px;
	font-weight: 100;
	padding: 15px 10px;
	font-family: gotham_htfbook;
}
.timenumber{
	font-size: 20px;
}
.clockshadow{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55%;
	background: rgba(33,33,33,0.2);
}
#clockminutes, #clockseconds{
	font-family: gotham_htfmedium;
  font-size: 30px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
	var promo = "";
	var yb = { id : function(str){return document.getElementById(str)} };	
	var r1 = ''
		+'<div id="rto">'
		+'	<div id="rto_showhide">'
		+'		<img src="https://secure.rosettastone.com/lp/headset/show_button.jpg" id="rto_show_button">'
		+'		<img src="https://secure.rosettastone.com/lp/headset/1113-hide.png" id="rto_hide_button">'
		+'	</div>'
		+'	<div id="yellowtop"></div>';
	var r2 = ''
		+'	<div id="clock">'
		+'		<div class="clockdiv timeleft">TIME LEFT:</div>'
		+'		<div class="clockdiv"><span class="timenumber" id="clockminutes">09</span> min</div>'
		+'		<div class="clockdiv clockdiv-last"><span class="timenumber" id="clockseconds">07</span> sec</div>'
		+'		<div class="clockshadow"></div>'
		+'	</div>'
		+'	<br>'
		+'	<a href="#" id="rtobutton">'
		+'		CLAIM YOUR GIFT!'
		+'	</a>'
		+'</div>';

	var rtodl = r1
		+'	<div class="saveadditional">'
		+'		Save an additional $10'
		+'	</div>'
		+'	<div class="nextten">'
		+'		If you order in the next 20 minutes'
		+'	</div>'
		+ r2;
	var rtocd = r1	
		+'	<div class="productImage"></div>'
		+'	<div class="productText">'
		+'		<div class="saveadditional">'
		+'			Get an additional headset'
		+'		</div>'
		+'		<div class="nextten">'
		+'			If you order in the next 20 minutes'
		+'		</div>'
		+'	</div>'
		+ r2;
	var rtos = r1		+'	<div class="productImage"></div>'
		+'	<div class="productText">'
		+'		<div class="saveadditional">'
		+'			<span>FREE</span>* 1-Month subscription to'
		+'		</div>'
		+'		<div class="nextten">'
		+'			ROSETTA STONE&#174; FIT BRAINS'
		+'		</div>'
		+'		<div class="subtext">'
		+'			*Auto-renewal at MSRP begins after 1st month.<br><a target="_blank" href="http://support.rosettastone.com/en/brain-fitness/FitBrains/Renew-a-product/articles/How-to-cancel-your-recurring-Fit-Brains-subscription">Cancel anytime!</a>'
		+'		</div>'
		+'	</div>'
		+r2;


	// Free headset w/ S5 CDs: Headset15 || $10 RTO w/ S5 Downloads: 10PROMO || 1 free month of fitbrains w/ 24 month TOSUB: free1m

// initial settings
var countdown_minutes = 20; // set how many minutes we want the clock to run for
var endtime = new Date( new Date().getTime() + countdown_minutes*60*1000 ); // calculate the javascript end time

// is rto available && not already accepted?
jQuery('document').ready(function(){
	if(!!rto_type() && !(check_promo_name() || check_prodname())){
		console.log('rto type exists and rto has not been accepted')
		var rtot = rto_type()[0].toLowerCase();
		// if rto has not seen yet, configure endtime
		rto_not_seen_yet() ? document.cookie = 'rto_cart_cookie=' + endtime : endtime = new Date(document.cookie.split('rto_cart_cookie=')[1].split(';')[0]);
		// choose rto html for first matched product in cart (S5DL || 24M || S5CD)
		rtohtml = /download/.test(rtot) ? rtodl : /totale/.test(rtot)? rtos : rtocd;
		rtostyle = /download/.test(rtot) ? "d" : /totale/.test(rtot)? "s" : "b";
		// show the rto
		if(!rto_expired()){showRTO();}
	}
	if(rtostyle == 'd'){		
	jQuery('.saveadditional').css({
		"font-size": "1.5em",
		"font-weight": "400",
		"padding": "15px 0 5px",
		"text-transform": "uppercase",
		"color": "#0098db",
		"font-family": "gotham_htfmedium"
	});
	jQuery('.nextten').css({
		"font-family" : "gotham_htfbook",
	  "font-size" : "1.1em",
	  "font-weight" : "lighter",
	  "padding" : "0 0 25px"
	});
	jQuery('#clock').css('margin','0 auto 15px');
}	

if(rtostyle == 'b'){
	jQuery('.saveadditional').css({
		"font-size": "1em",
		"font-weight": "400",
		"padding": "15px 0 3px",
		"text-transform": "uppercase",
		"color": "#0098db",
		"font-family": "gotham_htfmedium"
	})
	jQuery('.nextten').css({
		"font-family" : "gotham_htfbook",
	  "font-size" : ".87em",
	  "font-weight" : "lighter",
	  "padding" : "0 0 25px"
	});
	jQuery('.productImage').css({
		"background-image" : 'url("http://www.rosettastone.com/lp/rto-test/top_headset.png")',
		"background-size" : "75px 75px",
		"width" : "75px",
		"height" : "75px",
		"display" : "inline-block",
		"margin-top" : "4px",
		"margin-right" : "3px"
	});
	jQuery('.productText').css({
	  "display" : "inline-block",
	  "vertical-align" : "top",
	  "padding-top" : "10px",
	  "text-align" : "left"
	});
	jQuery('#clock').css('margin' , '0 auto 15px');
}


if(rtostyle == 's'){
	jQuery('.saveadditional').css({
	  "font-size" : ".95em",
	  "font-weight" : "100",
	  "padding" : "0 0 3px",
	  "color" : "#0098db",
	  "font-family" : "gotham_htfbook"
	});
	jQuery('.saveadditional span').css({
		"font-family" : "gotham_htfmedium"
	});
	jQuery('.nextten').css({
		"font-family" : "gotham_htfmedium",
	  "font-size" : ".87em",
	  "font-weight" : "lighter",
	  "padding" : "0 0 10px"
	});
	jQuery('.subtext').css({
		"font-family" : "gotham_htfbook",
	  "font-size" : ".6em"
	});
	jQuery('.subtext a').css({
		"color" : "#0096d9",
		"text-decoration":"underline"
	});
	jQuery('.productImage ').css({
	  "background-image" : "url('http://www.rosettastone.com/lp/rto-test/top_fitbrains.png')",
	  "background-size" : "111px 82px",
	  "width" : "111px",
	  "height" : "82px",
	  "display" : "inline-block",
	  "margin" : "4px 2px 12px 15px"
	});
	jQuery('.productText ').css({
	  "display" : "inline-block",
	  "vertical-align" : "top",
	  "padding-top" : "10px",
	  "text-align" : "left"
	});
	jQuery('#clock').css({
		"margin" : "0 auto 10px"
	});
}
})


// what is the first rto product match in cart (S5DL || 24M || S5CD)?
function rto_type(){return rs.pixp_name.match(/totale.+24|s5\s*consumer|s5\s*v4.+download/i);}
// has the the rto already been seen?
function rto_not_seen_yet(){return !document.cookie.match(/rto_cart_cookie/i);}
// has the rto clock expired yet?
function rto_expired(){return (new Date()) > endtime;}
// choose correct promo code to apply
function promo_to_apply(){
	var promomap = {
	  249: '10PROMO_49',
	  229: '10PROMO_29',
	  219: '10PROMO_19',
	  209: '10PROMO_09'
	}

	rs.pixp_name.split(',').every(function(p, i) {
	  if (p.match(/s5\s*consumer/i)) {
	  	promo = 'Headset15';
	  	return false;
	  }
	  if (p.match(/totale.+24/i)) {
	  	promo = 'free1m';
	  	return false;
	 	}
	  if (p.match(/s5\s*v4.+download/i)) {
	    promo = '10PROMO';
	    // needs revision for multiple products
	    promo = promomap[rs.pixp_price.split(',')[i].split('.')[0]] || promomap[209];
	    return false;
	  }
	  return true;
	})
	return promo;
}



// rto promo code already in cart?
function check_promo_name(){
	if(!!jQuery('.couponlabel')[0]){ // if desktop, check the desktop layout for promo codes
		for(var i=0; i < jQuery('.couponlabel').length; i++){
			if(!!jQuery('.couponlabel')[i].innerHTML.match(/Headset15|10PROMO_09|10PROMO_19|10PROMO_29|10PROMO_49|free1m/i)){return true}
		}
	}
	else if(!!jQuery('#promoapplied')[0]){ // if mobile, check the mobile layout for promo codes
		if(!!jQuery('#promoapplied')[0].innerHTML.match(/Headset15|10PROMO_09|10PROMO_19|10PROMO_29|10PROMO_49|free1m/i)){return true}
	}
	return false;
}


// rto product name already in cart?
function check_prodname(){
	for(var i=0; i < jQuery('.prodname').length; i++){
		if(!!jQuery('.prodname')[i].innerHTML.match(/headset|brains/i)){return true}
	}
	return false;
}

function showRTO(){
	// create a container for the rto and put the right html in there
	var rtocontainer = document.createElement('div');
	rtocontainer.innerHTML = rtohtml;

	// show the rto at the beginning of the body
	document.body.insertBefore(rtocontainer, document.body.firstChild);

	// this function updates the clock
	function setClock(){
		var timeleft = new Date( endtime - (new Date()) ); // remaining time is end time minus current time
		// update the values in the clock
		yb.id('clockseconds').innerHTML = timeleft.getSeconds() < 10 ? "0" + timeleft.getSeconds() : timeleft.getSeconds();
		yb.id('clockminutes').innerHTML = timeleft.getMinutes() < 10 ? "0" + timeleft.getMinutes() : timeleft.getMinutes();
		// when time runs out, stop the rto
		if(Math.floor(timeleft/1000)<=0){stopRTO();}
	}

	setClock(); // start the clock
	var clockinterval = setInterval(setClock,50); // keep the clock running


	// this function stops the clock and hides the rto
	function stopRTO(){
		clearInterval(clockinterval); // stop the clock
		yb.id('rto').style.display = 'none'; // hide the rto
	}

	// when user clicks rto button, hide rto and apply promo
	yb.id('rtobutton').onclick = function(){
		stopRTO(); // stop the rto
		if (promo_to_apply() == "free1m") {
			window.location.href = 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/add/sku/98392/?pc=free1m';
		}else{
			jQuery.ajax({
	      url: 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifyPromo/',
	      method: 'POST',
	      data: {coupon_code: promo_to_apply()}
	    }).done(function(data) {
	        window.location.reload()
	    })
  	}
	}

	// this section toggles the rto by sliding it to the side
	var rto_showing = true;

	yb.id('rto_showhide').onclick = function(){
		if(rto_showing){
			rto_showing = false;
			yb.id('rto_show_button').style.bottom = '258px';
			yb.id('rto_show_button').style.display = 'block';
			yb.id('rto_hide_button').style.display = 'none';
			yb.id('rto').style.bottom = '-258px';
			yb.id('yellowtop').style.bottom = '258px';
		}
		else{
			rto_showing = true;
			yb.id('rto_hide_button').style.display = 'block';
			yb.id('rto_show_button').style.display = 'none';
			yb.id('rto').style.bottom = '0'
			yb.id('yellowtop').style.bottom = '0';
		}
	};
}
</script>