tabbit

Mon Nov 13 2017
Copied to clipboard! Copy reply

// need to pass jQuery into local $ parameter so that $ can be used because cart blows out $ variable
(function($){
	$(function(){



		// ***********************************************************************************
		// RTO CONTROLS
		// ***********************************************************************************

		var when_to_run_rto = 'now'; // can be 'now', 'schedule', or 'custom'
			// ideally, use 'schedule'
			// only use 'custom' if you get a random request (such as "show rto when cid=whatever")


		// only run cart rto if end state hasn't been set (to 'accepted', 'declined', or 'expired')
			// and promo hasn't been applied through other means (like an lp or manual entry)
		if(!cookieExists('cart_rto_end_state') && !rs.promo){

			if(when_to_run_rto==='now'){
				run_rto_now({
					theme: 'cyber_monday', // can be black_friday, cyber_monday, or cyber_week
					offer_type: 'tutoring',
					countdown_minutes: 10
				});
			}
			if(when_to_run_rto==='schedule'){
				run_rto_on_schedule();
			}
			if(when_to_run_rto==='custom'){
				run_rto_custom();
			}
		}


		// ---------------------------------------------
		// USE THIS TO RUN RTO NOW
		// ---------------------------------------------
		function run_rto_now(rto){
			showCartRto(rto.theme, rto.offer_type, rto.countdown_minutes);
		}


		// ---------------------------------------------
		// USE THIS TO RUN RTO ON A SCHEDULE
		// ---------------------------------------------
		function run_rto_on_schedule(){

			var schedule = [
				// test for today
				{ start:'Nov 13, 2017 00:00', end:'Nov 13, 2017 23:59', rto:{
					theme:'cyber_monday', offer_type:'discount'
				}},
				// Black Friday
				{ start:'Nov 22, 2017 22:00', end:'Nov 26, 2017 11:59', rto:{
					theme:'black_friday', offer_type:'discount'
				}},
				// Cyber Monday
				{ start:'Nov 26, 2017 12:00', end:'Nov 27, 2017 23:59', rto:{
					theme:'cyber_monday', offer_type:'discount'
				}},
				// Cyber Tuesday
				{ start:'Nov 28, 2017 00:00', end:'Nov 28, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}},
				// Cyber Wednesday
				{ start:'Nov 29, 2017 00:00', end:'Nov 29, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}},
				// Cyber Thursday
				{ start:'Nov 30, 2017 00:00', end:'Nov 30, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}},
				// Cyber Friday
				{ start:'Dec 1, 2017 00:00', end:'Dec 1, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}},
				// Cyber Saturday
				{ start:'Dec 2, 2017 00:00', end:'Dec 2, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}},
				// Cyber Sunday
				{ start:'Dec 3, 2017 00:00', end:'Dec 3, 2017 23:59', rto:{
					theme:'cyber_week', offer_type:'discount'
				}}
			];


			var rto = getRtoFromSchedule(schedule);
			rto.countdown_minutes = rto.countdown_minutes || 10;
			if(rto){
				showCartRto(rto.theme, rto.offer_type, rto.countdown_minutes);
			}
		}


		// ---------------------------------------------
		// USE THIS TO RUN RTO UNDER CUSTOM CONDITIONS
		//     for example: if cid=whatever
		// ---------------------------------------------
		function run_rto_custom(){
			var whatever_condition = true;

			// if the custom condition is met (like a cid=whatever), run a custom rto
			if(whatever_condition){
				run_rto_now({
					theme: 'black_friday', // can be black_friday, cyber_monday, or cyber_week
					offer_type: 'discount',
					countdown_minutes: 10
				});
			}

			// otherwise, go back to the regularly scheduled rtos
			else{
				run_rto_on_schedule();
			}
		}



		// ---------------------------------------------
		// EDIT OFFERS AND PROMOS HERE
		// ---------------------------------------------
		function getOffer(offer_type, product_lvl){

			var offers = {
				discount: {
					"12m": {promo_code:"banff_12M", headline:"Save up to $5 on your order"},
					"24m": {promo_code:"banff_24M", headline:"Save up to $10 on your order"}
				},
				tutoring: {
					"12m": {promo_code:"tutor_1special", headline:"Get 1 free tutoring session"},
					"24m": {promo_code:"tutor_2special", headline:"Get 2 free tutoring sessions"}
				}
			};

			return offers[offer_type][product_lvl];
		}























		// ********************************************************
		// UTILITIES
		// ********************************************************

		function getLvl(cart_product_name){
			if(/24 months/i.test(cart_product_name)){ return '24m'; }
			if(/12 months/i.test(cart_product_name)){ return '12m'; }
			else { return 'other'; }
		}

		function getRtoFromSchedule(schedule){
			var now = Date.now();
			for(var i=0; i<schedule.length; i++){
				if( Date.parse(schedule[i].start)<=now && now<=Date.parse(schedule[i].end) ){
					return schedule[i].rto;
				}
			}
			return null;
		}

		function setCookie(name, value, daysTillExpiration){
			var hostname = window.location.hostname;
			var domain = hostname ? 'domain=.' + hostname.split('.').slice(-2).join('.') + '; ' : '';
			var expires = daysTillExpiration ? 'expires=' + (+daysTillExpiration*24*60*60*1000) + '; ' : '';
			var cookieString = name + '=' + value + ';' + ' path=/; '
							+ domain + expires;
			document.cookie = cookieString;
			return cookieString;
		}

		function getCookie(name){
			var regex = new RegExp('(^|\\s|;)'+name+'\\=([^;]+)','i');
			return (document.cookie.match(regex)||[])[2];
		}

		function cookieExists(name){
			return !!getCookie(name);
		}










		// ********************************************************
		// CART RTO
		// ********************************************************

		function showCartRto(rtoTheme, offerType, totalTimeInMinutes){

			// product details
			var product = {
				lang: rs.pixp_lang.toLowerCase(),
				sku: rs.pixp_sku,
				lvl: getLvl(rs.pixp_name)
			};

			// offer details
			var offer = getOffer(offerType, product.lvl);
			var promo_code = offer.promo_code;
			var headline = offer.headline;
			var offer_url = 'https://secure.rosettastone.com/us_en_store_view/checkout/cart/couponPost/?coupon_code=' + promo_code;


			// init clock time
			totalTimeInMinutes = totalTimeInMinutes || 10;
			var totalTime = totalTimeInMinutes * 60*1000;
			var deadline = getCookie('cart_rto_deadline') || ( Date.parse(new Date()) + totalTime );
			(function(){
				if(!cookieExists('cart_rto_deadline')){
					var daysTillExpiration = 1;
					setCookie('cart_rto_deadline', deadline, daysTillExpiration);
				}
			})();



			// styles and markup
			var css = '<style type="text/css"> /************************************************************************ RTO GENERAL STYLES *************************************************************************/ .cart_rto_top{ position: relative; font-family: gotham_htfbook, gothambook, sans-serif; text-align: center; background-color: #eee; color: #333; padding: 6px 50px; font-size: 14px; line-height: 1; display: none; } .cart_rto_segment{ display: inline-block; vertical-align: middle; margin-right: 20px; } /************************************************************************ RTO LOGO *************************************************************************/ .cart_rto_logo{ width: 138px; height: 45px; background-image: url(\'https://www.rosettastone.com/lp/rtos/holiday_2017/cart/assets/black_friday_logo.png\'); background-size: contain; background-repeat: no-repeat; } /************************************************************************ RTO OFFER TEXT *************************************************************************/ .rto_offer_title{ font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; text-transform: uppercase; } .rto_offer_text{ font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; } /************************************************************************ RTO CLOCK *************************************************************************/ .cart_rto_clock{ display: inline-block; vertical-align: middle; margin-right: 20px; padding-left: 3px; } .clock_segment{ display: inline-block; vertical-align: middle; } .clock_message{ text-transform: uppercase; font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; text-align: left; } .clock_svg_container{ position: relative; font-size: 14px; text-align: center; } .clock_svg{ width: 4.4em; height: 4.4em; -ms-transform: rotateY(180deg) rotateZ(90deg); -webkit-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); } .clock_progress_bg{ stroke: #ddd; } .clock_progress{ stroke: #0098db; } .clock_value{ position: absolute; width: 100%; left: 0; top: calc(50% - 1.1em); } .clock_number{ font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; font-size: 1.1em; } .clock_time_unit{ font-size: 0.8em; font-family: gotham_htflight, gothamlight, gotham_htfbook, gothambook, sans-serif; } /************************************************************************ RTO CTA BUTTON *************************************************************************/ .cart_rto_btn{ display: inline-block; text-transform: uppercase; background-color: #1E96D3; color: #fff; font-family: gotham_htfmedium, gothammedium, gotham_htfbook, gothambook, sans-serif; font-size: 14px; text-transform: uppercase; text-decoration: none; cursor: pointer; padding: 10px 25px; border-radius: 5px; transition: background-color 0.2s; } .cart_rto_btn:hover{ background-color: #2ae; } /************************************************************************ RTO CLOSE BUTTON *************************************************************************/ .cart_rto_close{ position: absolute; right: 20px; top: calc(50% - 10px); cursor: pointer; width: 20px; height: 20px; } .cart_rto_close_svg{ width: 100%; height: 100%; } .cart_rto_close_svg line{ stroke: #333; } /************************************************************************ RTO BREAKPOINTS *************************************************************************/ @media (max-width: 940px){ .cart_rto_top{ padding: 20px 60px; } .cart_rto_close{ top: 27px; } } @media (max-width: 570px){ .cart_rto_segment{ margin: 5px 10px; } } @media (max-width: 525px){ .cart_rto_top{ padding: 20px 10px 15px; border: 12px solid #fff; } .cart_rto_top div.cart_rto_logo{ width: 180px; height: 60px; } .cart_rto_close{ display: none; } .cart_rto_clock{ margin: 0px 10px 10px; } } @media (max-width: 450px){ .cart_rto_btn{ border-radius: 30px; padding: 20px 0px; width: 100%; font-size: 16px; } } /************************************************************************ RTO THEMES *************************************************************************/ /* ------------------------------------------------ BLACK FRIDAY ------------------------------------------------ */ .cart_rto_top_black_friday{ background-color: #333; background-image: linear-gradient(90deg, #333, #555); color: #fff; } .cart_rto_top_black_friday .cart_rto_logo{ background-image: url(\'https://www.rosettastone.com/lp/rtos/holiday_2017/cart/assets/black_friday_logo.png\'); } .cart_rto_top_black_friday .rto_offer_title{ color: #ECC200; } .cart_rto_top_black_friday .cart_rto_close_svg line{ stroke: #fafafa; } .cart_rto_top_black_friday .clock_progress_bg{ stroke: #303030; } .cart_rto_top_black_friday .clock_progress{ stroke: #ECC200; } /* ------------------------------------------------ CYBER MONDAY ------------------------------------------------ */ .cart_rto_top_cyber_monday{ background-color: #1D4C67; background-image: linear-gradient(90deg, #1D4C67, #306B8C); color: #fff; } .cart_rto_top_cyber_monday .cart_rto_logo{ background-image: url(\'https://www.rosettastone.com/lp/rtos/holiday_2017/cart/assets/cyber_monday_logo.png\'); width: 140px; height: 47px; position: relative; top: 3px; } .cart_rto_top_cyber_monday .rto_offer_title{ color: #ECC200; } .cart_rto_top_cyber_monday .cart_rto_close_svg line{ stroke: #fafafa; } .cart_rto_top_cyber_monday .clock_progress_bg{ stroke: #1C455C; } .cart_rto_top_cyber_monday .clock_progress{ stroke: #ECC200; } /* ------------------------------------------------ CYBER WEEK ------------------------------------------------ */ .cart_rto_top_cyber_week{ background-color: #E9AA00; background-image: linear-gradient(90deg, #E9AA00, #F1C433); color: #363635; border-color: #382E0B; } .cart_rto_top_cyber_week .cart_rto_logo{ background-image: url(\'https://www.rosettastone.com/lp/rtos/holiday_2017/cart/assets/cyber_week_logo.png\'); width: 155px; height: 52px; position: relative; top: 3px; } .cart_rto_top_cyber_week .rto_offer_title{ color: #AA0001; } .cart_rto_top_cyber_week .cart_rto_close_svg line{ stroke: #474646; } .cart_rto_top_cyber_week .clock_progress_bg{ stroke: #FFD34F; } .cart_rto_top_cyber_week .clock_progress{ stroke: #01A13A; } </style>';
			var html = '<div class="cart_rto_top cart_rto_top_'+rtoTheme+'"> <div class="cart_rto_segment cart_rto_logo"></div> <div class="cart_rto_segment"> <div class="rto_offer_title">'+headline+'</div> <div class="rto_offer_text">if you order in the next '+(totalTimeInMinutes===10 ? 'ten':totalTimeInMinutes)+' minutes.</div> </div> <div class="cart_rto_segment"> <div class="cart_rto_clock"> <div class="clock_segment clock_message">Time<br>left:</div> <div class="clock_segment"> <div class="clock_svg_container"> <svg class="clock_svg" viewBox="0 0 300 300"> <circle class="clock_progress_bg" cx="150" cy="150" r="120" stroke-width="30" fill="transparent" stroke-dasharray="753.9822368615503"></circle> <circle class="clock_progress js_clock_progress" data-time-unit="minutes" cx="150" cy="150" r="116" stroke-width="22" fill="transparent" stroke-dashoffset="1000" stroke-dasharray="1000"></circle> </svg> <div class="clock_value"> <div class="clock_number js_clock_number" data-time-unit="minutes">10</div> <div class="clock_time_unit">min</div> </div> </div> </div> <div class="clock_segment"> <div class="clock_svg_container"> <svg class="clock_svg" viewBox="0 0 300 300"> <circle class="clock_progress_bg" cx="150" cy="150" r="120" stroke-width="30" fill="transparent" stroke-dasharray="753.9822368615503"></circle> <circle class="clock_progress js_clock_progress" data-time-unit="seconds" cx="150" cy="150" r="116" stroke-width="22" fill="transparent" stroke-dashoffset="1000" stroke-dasharray="1000"></circle> </svg> <div class="clock_value"> <div class="clock_number js_clock_number" data-time-unit="seconds">00</div> <div class="clock_time_unit">sec</div> </div> </div> </div> </div> <a class="cart_rto_btn js_cart_rto_btn" href="'+offer_url+'">Claim This Offer</a> </div> <div class="cart_rto_close js_cart_rto_close"> <svg class="cart_rto_close_svg" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .cart_rto_close_svg line{ stroke-width:1; stroke-linecap:round; } /*]]>*/</style> <line x1="1" y1="1" x2="9" y2="9"></line> <line x1="1" y1="9" x2="9" y2="1"></line> </svg> </div> </div>';
			$('head').append(css);
			$('body').prepend(html);



			// init rto
			$('.cart_rto_top').slideDown();
			var $js_clock_progress = $('.js_clock_progress');
			var $minutes_progress = $('.js_clock_progress[data-time-unit=minutes]');
			var $seconds_progress = $('.js_clock_progress[data-time-unit=seconds]');







			// ----------------------------------------------
			// RTO CLOCK
			// ----------------------------------------------


			function getTimeRemaining(endtimeInMs){
				var t = endtimeInMs - Date.now();
				var seconds = ('0' + Math.floor( (t/1000) % 60 )).slice(-2);
				var minutes = ('0' + Math.floor( (t/1000/60) % 60 )).slice(-2);
				return {
					'total': t,
					'minutes': minutes,
					'seconds': seconds
				};
			}


			function initProgress($svgs){
				var radius = $svgs[0].getAttribute('r');
				var circumference = 2 * Math.PI * radius;

				$svgs.attr('stroke-dasharray', circumference);
				setProgress($svgs,100);
			}
			initProgress($js_clock_progress);


			function setProgress($svgs, pct){
				var radius = $svgs[0].getAttribute('r');
				var circumference = 2 * Math.PI * radius;

				var progress_in_percent = pct;
				var progress_in_pixels = circumference * (100-progress_in_percent)/100;
				$svgs.attr('stroke-dashoffset', progress_in_pixels+'px');
			}


			// show countdown numbers
			var clockInterval = setInterval(function(){
				$('.js_clock_number').html(function(){
					var timeUnit = $(this).attr('data-time-unit');
					var timeRemaining = getTimeRemaining(deadline);
					return timeRemaining[timeUnit];
				});
			},500);


			// run circular progress bars
			var progressInterval = setInterval(function(){

				// find total remaining progress
				var timeRemaining = getTimeRemaining(deadline).total;
				var totalPercent = (timeRemaining/totalTime)*100;

				// find remaining progress for this individual minute
				var totalMsInMinutes = 60000;
				var secondsPercent = ((timeRemaining % totalMsInMinutes) / totalMsInMinutes) * 100;

				// update circular progress bars
				setProgress($minutes_progress, totalPercent);
				setProgress($seconds_progress, secondsPercent);

				// when time runs out...
				if(timeRemaining<=100){
					var daysTillExpiration = 1;
					setCookie('cart_rto_end_state', 'expired', daysTillExpiration);
					stopClock();
				}
			},50);


			function stopClock(){
				clearInterval(clockInterval);
				clearInterval(progressInterval);

				$('.cart_rto_top').slideUp();
			}












			// ----------------------------------------------
			// RTO USER ACTIONS
			// ----------------------------------------------

			$('.js_cart_rto_close').on('click', function(){
				var daysTillExpiration = 1;
				setCookie('cart_rto_end_state', 'declined', daysTillExpiration);

				stopClock();
			});

			$('.js_cart_rto_btn').on('click', function(){
				var daysTillExpiration = 1;
				setCookie('cart_rto_end_state', 'accepted', daysTillExpiration);

				stopClock();
			});


		}



	});
})(jQuery);