tabbit

Fri Feb 09 2018
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') && !isRtoPromoApplied(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: 'discount', // can be discount or 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:'tutoring'
				}},
				// 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:'tutoring'
				}},
				// 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:'tutoring'
				}},
				// 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:'tutoring'
				}}
			];


			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"}
				}
			};
			if(offer_type==='all'){
				return offers;
			}
			return offers[offer_type][product_lvl];
		}

		// checks list to see if one of our offers has been applied
		function isRtoPromoApplied(promos_in_cart){
			var offers = getOffer('all');
			for(offer_type in offers){
				for(lvl in offers[offer_type]){
					var promo_code = offers[offer_type][lvl].promo_code;
					var reg = new RegExp(promo_code,'i');
					var promoFound = reg.test(promos_in_cart);
					if(promoFound){
						return true;
					}
				}
			}
			return false;
		}























		// ********************************************************
		// 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)
			};

			// first make sure there's an offer for this product!
			var offer = getOffer(offerType, product.lvl);

			if(offer){
			
				// offer details
				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);