tabbit

Tue Oct 09 2018
Copied to clipboard! Copy reply
/*
WS-3016 - Q4 special offers (on-page bonus offers in product boxes)

	Description:
		This system lets you update mastheads, skus, and bonus offers for all relevant levels on a schedule.

	Instructions:
		1. You can edit the schedule and offer types in the designated sections. Copy the patterns you see there.
		2. You can run one offer now or run offers on a schedule. Just scroll to the part that says "RUN OFFERS HERE"
*/


/*
todo:
	- input exact skus, offers, and messages
*/


(function(){

	// ********************************************************************************
	// SET SCHEDULE AND OFFER TYPES HERE
	// ********************************************************************************


	var schedule = [
		{
			start_date: '02 Oct 2018 00:00:00',
			end_date: '02 Oct 2018 23:59:59',
			offer_name: 'examplebdi'
		}
	];



	var offers = {
		'examplebdi': {
			mastheads: {
				'mobile': 'https://www.rosettastone.com/lp/common-modules/assets/modules_2018/tutor-screen.png',
				'desktop': 'https://www.rosettastone.com/lp/common-modules/assets/modules_2018/tutor-screen.png'
			},
			offer_type: 'bonus_months_high'
		}
	};



	var offer_types = {


		// *******************************************
		// BONUS MONTHS
		// *******************************************

		'bonus_months_low':{
			'12': {
				message: '+1 Month Free',
				replacement_sku: '12_REPLACEMENT_SKU_HERE'
			},
			'24': {
				message: '+3 Months Free',
				replacement_sku: '24_REPLACEMENT_SKU_HERE'
			}
		},
		'bonus_months_high':{
			'12': {
				message: '+3 Months Free',
				replacement_sku: '12_REPLACEMENT_SKU_HERE'
			},
			'24': {
				message: '+6 Months Free',
				replacement_sku: '24_REPLACEMENT_SKU_HERE'
			}
		},



		// *******************************************
		// EXTRA USER
		// *******************************************

		'extra_user':{
			'06': {
				message: 'Buy 6 Months and | Give 6 Months FREE',
				second_sku: '06M_SECOND_SKU_HERE'
			},
			'12': {
				message: 'Line 1 goes here | Line 2 goes here',
				second_sku: '12M_SECOND_SKU_HERE'
			},
			'24': {
				message: 'Line 1 goes here | Line 2 goes here',
				second_sku: '24M_SECOND_SKU_HERE'
			}
		},




		// *******************************************
		// EXTRA GIFT
		// *******************************************

		'extra_gift':{
			'06': {
				message: 'Buy 6 Months and | Give 6 Months FREE',
				second_sku: '06M_SECOND_SKU_HERE'
			},
			'12': {
				message: 'Line 1 goes here | Line 2 goes here',
				second_sku: '12M_SECOND_SKU_HERE'
			},
			'24': {
				message: 'Line 1 goes here | Line 2 goes here',
				second_sku: '24M_SECOND_SKU_HERE'
			}
		}
	};






	// ********************************************************************************
	// RUN OFFERS HERE
	//     Either apply one offer directly or run offers on schedule
	// ********************************************************************************

	apply_offer('examplebdi');
	// run_offers_on_schedule(schedule);















	// ********************************************************************************
	// CORE FUNCTIONALITY
	//     No need to edit below here unless you want to change how the offers work
	// ********************************************************************************


	function run_offers_on_schedule(schedule){
		var date = Date.now();
		for(var i=0; i<schedule.length; i++){
			var start_date = Date.parse(schedule[i].start_date);
			var end_date = Date.parse(schedule[i].end_date);
			if(start_date <= date && date <= end_date){
				apply_offer(schedule[i].offer_name);
				return;
			}
		}
	}


	function format_offer_message(offer_type, message){
		var formatted_message = message;

		if((/bonus_months/i).test(offer_type)){
			var words = message.split(' ');
			var formatted_message = ''
				+ '<div class="bonus_months_number">'
					+ words[0]
				+ '</div>'
				+ '<div class="bonus_months_words">'
					+ '<div>'
						+ words[1]
					+ '</div>'
					+ '<div>'
						+ words[2]
					+ '</div>'
				+ '</div>'
			+ '';
		}

		if((/extra_/i).test(offer_type)){
			var lines = message.split('|');
			var formatted_message = ''
				+ '<div class="bonus_line_1">'
					+ lines[0].trim()
				+ '</div>'
				+ '<div class="bonus_line_2">'
					+ lines[1].trim()
				+ '</div>'
			+ '';
		}

		return formatted_message;
	}




	function update_masthead(offer){

		if(offer.mastheads){

			var style = document.createElement('style');
			style.id = 'masthead_change';
			var masthead = document.querySelector('#masthead');

			style.innerHTML = ''
				+'body #masthead{'
					+'background-image: url(' + offer.mastheads.mobile + ');'
				+'}'
				+'@media (min-width: 600px) {'
					+'body #masthead{'
						+'background-image: url(' + offer.mastheads.desktop + ');'
					+'}'
				+'}'
			+'';

			masthead.appendChild(style);
		}
	}




	function _$(selector){
		var elems = Array.prototype.slice.call(document.querySelectorAll(selector));
		return {
			elems: elems,
			attr: function(attr, value){
				elems.forEach(function(elem){
					var original_attr = elem.getAttribute(attr);
					var final_value = typeof value === 'function' ? value(original_attr) : value;
					elem.setAttribute(attr, final_value);
				});
				return this;
			},
			show: function(display_property){
				elems.forEach(function(elem){
					elem.style.display = display_property || 'block';
				});
				return this;
			},
			hide: function(){
				elems.forEach(function(elem){
					elem.style.display = 'none';
				});
				return this;
			},
			html: function(inner_html){
				elems.forEach(function(elem){
					elem.innerHTML = inner_html;
				});
				return this;
			}
		};
	}



	function apply_offer(offer_name){
		var set_up_offer = (function(offers, offer_name){
			var offer = offers[offer_name];
			update_masthead(offer);

			add_bonus_elements();

			update_all_cart_buttons(offer);
			show_all_bonuses(offer);
			protect_product_changes_on_lang_change(offer);

			add_bonus_styles();

		}).bind(this, offers);

		set_up_offer(offer_name);
	}



	function add_bonus_elements(){
		// this function makes sure .bonus divs are available for all levels instead of just 12 and 24
		_$('.product-d .header, .product-m').elems.forEach(function(elem){
			if(!elem.querySelector('.bonus')){
				var div = document.createElement('div');
				div.className = 'bonus';
				elem.appendChild(div);
			}
		});
	}


	function add_bonus_styles(){

		var style = document.createElement('style');
		style.id = 'masthead_change';

		style.innerHTML = ''
			+ '.products-desktop .container{'
				+ 'align-items: flex-end;'
			+ '}'
			+ '.product-d .best-value{'
				+ 'background-color: #262626;'
			+ '}'
			+ '.product-d .header > div.bonus {'
				+ 'font-size: 80%;'
				+ 'font-weight: 100;'
				+ 'position: relative;'
				+ 'bottom: -7px;'
				+ 'display: none;'

				+ 'background-color: #437414;'
				+ 'color: #fff;'
				+ 'padding: 10px;'
				+ 'margin: -30px 20px 0px;'
				+ 'bottom: -41px;'
				+ 'font-family: gothammedium, sans-serif;'
			+ '}'
			+ '.bonus_months_number{'
				+ 'display: inline-block !important;'
				+ 'font-size: 40px;'
				+ 'line-height: 1;'
				+ 'margin-right: 8px;'
			+ '}'
			+ '.bonus_months_words{'
				+ 'display: inline-block;'
				+ 'text-align: left;'
				+ 'line-height: 1;'
				+ 'text-transform: uppercase;'
			+ '}'
			+ '.bonus_months_words div:nth-of-type(1) {'
				+ 'font-size: 11px;'
			+ '}'
			+ '.bonus_months_words div:nth-of-type(2) {'
				+ 'font-size: 19px;'
			+ '}'
			+ '.bonus_line_1 {'
				+ 'line-height: 1.2;'
				+ 'font-family: gothamlight, sans-serif;'
				+ 'font-size: 15px;'
			+ '}'
			+ '.bonus_line_2 {'
				+ 'font-size: 15px;'
				+ 'line-height: 1.2;'
			+ '}'
		+'';

		document.body.appendChild(style);
	}

	function show_all_bonuses(offer){
		add_bonus_styles();

		var products = offer_types[offer.offer_type];

		for(var lvl in products){
			show_bonus(lvl, offer);
		}
	}


	function show_bonus(lvl, offer){
		var message = offer_types[offer.offer_type][lvl].message;
		var formatted_message = format_offer_message(offer.offer_type, message);
		_$('*[data-lvl="'+lvl+'"] .bonus').html(formatted_message).show();
	}


	function update_all_cart_buttons(offer){
		var offers_details_by_level = offer_types[offer.offer_type];
		for(var lvl in offers_details_by_level){
			var offer_details = offers_details_by_level[lvl];
			update_cart_button(lvl, offer_details);
		}
	}


	function update_cart_button(lvl, offer_details){
		var replacement_sku = offer_details.replacement_sku;
		var second_sku = offer_details.second_sku;

		var desktop_cart_btn_selector = '*[data-lvl="'+lvl+'"] .add-to-cart';
		var mobile_cart_btn_selector = 'a.product-m[data-lvl="'+lvl+'"]';
		_$( desktop_cart_btn_selector + ', '+ mobile_cart_btn_selector ).attr('href', function(original_href){
			var new_href = original_href;
			if(replacement_sku){
				new_href = original_href.replace(/\/\d+\//, '/'+replacement_sku+'/');
			}
			if(second_sku){
				new_href = original_href.replace(/\/sku\//, '/multi_sku/')
										.replace(/\/(\d+)\//, '/$1-'+second_sku+'/')
										.replace(/\/category_id\/(\w+)\//, '/multi_category_id/$1-fra');
			}
			return new_href;
		});
	}


	function protect_product_changes_on_lang_change(offer){
		window.jQuery && (function($){
			$(document).on('lang_change', function(){
				
				update_all_cart_buttons(offer);
			});
		})(window.jQuery);
	}



})();