Fri Feb 09 2018
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
  • 381
  • 382
  • 383
  • 384
  • 385
  • 386
  • 387
  • 388
  • 389
  • 390
  • 391
  • 392
  • 393
  • 394
  • 395
  • 396
  • 397
  • 398
  • 399
  • 400
  • 401
  • 402
  • 403

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