- 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
$(function(){
// meclabs tutoring experience 3 (with totals)
var html = '<style type="text/css"> .premium{ display:none; font-family: gothamlight, sans-serif; background-color: #E3EDF5; color: #3F3F3F; font-size: 16px; text-align: left; position: fixed; overflow: scroll; width: 100%; height: 100%; left: 0%; top: 0%; z-index: 100; } .premium_content{ margin: auto; max-width: 1000px; padding: 20px; } .premium_callout{ background-color: #F5C206; color: #432; display: inline-block; font-family: gothammedium, sans-serif; text-transform: uppercase; padding: 8px 18px; } .premium_title{ font-size: 30px; margin-top: 20px; text-transform: uppercase; font-family: gothambook, sans-serif; } .premium_title span{ font-family: gothambold, sans-serif; } .premium_subtitle{ font-size: 20px; margin: 10px 0px; } .premium_subtitle span{ font-family: gothambold, sans-serif; } .premium_subtitle_2{ font-size: 16px; font-family: gothamlight, sans-serif; font-style: italic; } .premium_info_container{ margin: 50px 0px 20px; font-size: 0px; } .premium_info{ display: inline-block; width: 52%; font-size: 16px; font-family: gothamlight, sans-serif; vertical-align: top; } .premium_bullets{ list-style-type: none; margin: 30px 0px 0px; padding: 0px 28px; } .premium_bullets li{ position: relative; margin-bottom: 20px; } .premium_bullets li::before{ content: \'\'; position: absolute; left: -27px; top: 5px; display: inline-block; border: 2px solid #4487C0; border-top: none; border-right: none; height: 6px; width: 15px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .premium_vid_container{ /*border: 1px dashed #fff;*/ display: inline-block; margin-left: 6%; width: 42%; vertical-align: top; } .premium_vid_still{ box-shadow: 0px 2px 8px 0px rgba(33,33,33,0.4); display: inline-block; width: 100%; cursor: pointer; } .premium_vid_still img{ width: 100%; display: block; } .premium_vid_caption{ font-size: 14px; margin-top: 8px; } .premium_how_it_works_container{ padding: 10px 0 20px; } .premium_how_it_works{ font-size: 16px; color: #0098db; font-family: gothammedium, sans-serif; cursor: pointer; } .premium_how_it_works_text{ text-decoration: underline; vertical-align: middle; margin-right: 3px; } .premium_how_it_works svg{ vertical-align: middle; position: relative; top: 1px; } .premium_how_it_works_arrow circle{ stroke: unset; fill: #0098db; } .premium_how_it_works_arrow polygon{ stroke: #E3EDF5; fill: #E3EDF5; } .premium_mobile_only{ display: none; } @media(max-width: 570px){ .premium_info_container{ margin: 20px 0px 20px; } .premium_info{ width: auto; } .premium_vid_container{ margin-left: 29px; width: auto; } .premium_mobile_only{ display: block; } .premium_desktop_only{ display: none; } } .premium_close_container{ margin-top: 40px; text-align: right; } .premium_close, .premium_close svg{ text-decoration: none; border: none; } .premium_close:focus, .premium_button:focus { outline: 3px dashed #333; } .premium_buttons_container{ margin-top: 40px; } .premium_button{ text-decoration: none; background-color: #3F3F3F; color: #fff; padding: 20px 40px; border-radius: 5px; display: inline-block; text-transform: uppercase; font-family: gothammedium, sans-serif; font-size: 16px; margin: 5px 0px; } .premium_button:hover{ background-color: #fdba3d; color: #333; } .premium_button_yes{ margin-right: 10px; background-color: #0098db; } .premium_total_container{ margin-top: 40px; } .premium_bold{ font-family: gothammedium, sans-serif; } </style> <div class="premium"> <div class="premium_content"> <div class="premium_close_container"> <a href="#" tabindex="0" class="premium_close js_premium_no"> <svg class="svg_x_in_circle" style="width:40px; height:40px;" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .svg_x_in_circle line, .svg_x_in_circle circle{ stroke:#fff; stroke-width:0.6; stroke-linecap:round; } /*]]>*/</style> <circle cx="5" cy="5" r="4.5" style="fill:#0098db;"></circle> <line x1="3.5" y1="3.5" x2="6.5" y2="6.5"></line> <line x1="3.5" y1="6.5" x2="6.5" y2="3.5"></line> </svg> </a> </div> <div class="premium_title"><span>Wait!</span> Before you check out:</div> <div class="premium_subtitle">Enhance your lessons with personalized help from a <span>live tutor</span> for an additional <span>$<span class="js_tutor_extra_amt">{amt}</span> per month.</span></div> <div class="premium_subtitle_2">Book sessions as you need them, around your schedule</div> <div class="premium_info_container"> <div class="premium_info"> <div class="premium_intro"> <span class="premium_desktop_only">Practice your conversational skills (via 1-way video camera) from the comfort of your home with a native speaking tutor who uses our proven learning methods.</span> <span class="premium_mobile_only">Practice your conversational skills via 1-way video camera with a native speaking tutor</span> </div> <ul class="premium_bullets"> <li>Get help with the specific lesson you are working on</li> <li class="premium_desktop_only">Get help with proper pronunciation</li> <li class="premium_desktop_only">Practice in small groups with other students on your level</li> <li class="premium_mobile_only">Book sessions as you need them, around your schedule</li> <li>Get a new tutoring session every <span class="premium_desktop_only">single</span> month!</li> </ul> <div class="premium_total_container"> <span class="premium_bold">Updated Total: </span> $<span class="js_tutor_total_amt">{total}</span>/month ($<span class="js_tutor_original_amt">{original}</span> + $<span class="js_tutor_extra_amt">{diff}</span>) </div> </div> <div class="premium_vid_container"> <div class="premium_vid_still premium_desktop_only js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <img src="https://www.rosettastone.com/lp/ab_tests/ws-2389/assets/premium_vid_still.jpg" alt=""> </div> <div class="premium_vid_caption premium_desktop_only">Practice your pronunciation with a live tutor using the material covered in your lesson.</div> <div class="premium_how_it_works_container premium_mobile_only"> <span class="premium_how_it_works js_open_video" data-video="imK17Pb3Yws" aria-label="See how Rosetta Stone tutoring works"> <span class="premium_how_it_works_text">See how it works</span> <svg class="premium_how_it_works_arrow" width="20" height="20" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4.75" style="stroke-width:0.3;"></circle> <polygon points="4,3 7,5 4,7" style="stroke-width:0.5;"></polygon> </svg> </span> </div> </div> </div> <div class="premium_buttons_container"> <a class="premium_button premium_button_yes js_premium_yes" href="#" tabindex="0">Yes, add live tutoring to my subscription</a> <a class="premium_button js_premium_no" href="#" tabindex="0">No, continue to checkout</a> </div> </div> </div> <!-- ********************************************************* VIDEO OVERLAY ********************************************************** --> <style> #video_overlay{ position: fixed; z-index: 1000; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(33,33,33,0.9); color: #fff; display: none; text-align: center; overflow: scroll; } #close_video_overlay{ position: absolute; right: 20px; top: 20px; cursor: pointer; width: 30px; height: 30px; } #video_overlay .overlay_x{ stroke: #fff; width: 100%; height: 100%; } #video_scaler{ width: 100%; max-width: 900px; margin: 60px auto 0px; text-align: center; } #video_container{ background: #333; display: inline-block; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); width: 100%; height: 0px; overflow: hidden; padding-top: 56.25%; position: relative; } #video_container iframe{ position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; } </style> <div id="video_overlay"> <div id="close_video_overlay" tabindex="0" aria-label="Click or press enter key here to close video"> <svg class="overlay_x" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style type="text/css">/*<![CDATA[*/ .overlay_x line{ stroke-width:0.8; stroke-linecap:round; } /*]]>*/</style> <line x1="0.5" y1="0.5" x2="9.5" y2="9.5"></line> <line x1="0.5" y1="9.5" x2="9.5" y2="0.5"></line> </svg> </div> <div id="video_scaler"> <div id="video_container"></div> </div> </div>';
$('body').append(html);
// *********************************************************
// show popup and set popup button urls
// *********************************************************
function attach_click_to_cart_btns(){
$('.js_oct_2016_addtocart[data-media="subscription"]').on('click', function(e){
e.preventDefault();
var cart_url_original = this.href;
var lvl = this.getAttribute('data-lvl');
var cart_url_premium = upgrade_cart_url(cart_url_original, lvl);
// put urls in buttons
$('.js_premium_no').attr('href', cart_url_original);
$('.js_premium_yes').attr('href', cart_url_premium);
// show monthly price changes
$('.js_tutor_extra_amt').html(get_tutoring_prices(lvl).tutoring);
$('.js_tutor_original_amt').html(get_tutoring_prices(lvl).original);
$('.js_tutor_total_amt').html(get_tutoring_prices(lvl).total);
// show overlay after cart button is clicked
$('.premium').fadeIn();
});
}
attach_click_to_cart_btns();
$(document).on('lang_change', function(){
setTimeout(attach_click_to_cart_btns,100);
});
function upgrade_cart_url(original_cart_url, lvl){
var premium_skus = {
'01': '90471',
'03': '97357',
'06': '97352',
'12': '97342',
'24': '99042'
};
var sku = premium_skus[lvl];
var premium_carturl = original_cart_url.replace(/\/sku\/\d+/i, '/sku/'+sku);
return premium_carturl;
}
function get_tutoring_prices(lvl){
var original_price = Math.floor(RSI({media:'subscription', lvl:lvl, cat:'esp'})[0].price*100/parseInt(lvl))/100;
var price_level_of_promo = {
'yosemite': 'msrp', // highest
'goldengate': 'price_level_1',
'swissalps': 'price_level_2',
'parthenon': 'price_level_3',
'mountfuji': 'price_level_4',
'giza': 'price_level_5',
'iguazafalls': 'price_level_6' // lowest
};
var promo_name = RSI({lvl:'24'})[0].code.split('_')[0]; // this will give something like "parthenon"
var price_level = price_level_of_promo[promo_name];
// usage: premium_prices_monthly[price_level][product_lvl]
var premium_prices_monthly = {
'msrp': {
'01': '29.99',
'03': '39.67',
'06': '29.83',
'12': '23.25',
'24': '16.63'
},
'price_level_1': {
'01': '29.99',
'03': '38.99',
'06': '29.99',
'12': '21.99',
'24': '14.49'
},
'price_level_2': {
'01': '29.99',
'03': '36.99',
'06': '27.99',
'12': '19.99',
'24': '13.49'
},
'price_level_3': {
'01': '29.99',
'03': '30.99',
'06': '21.99',
'12': '17.99',
'24': '12.49'
},
'price_level_4': {
'01': '29.99',
'03': '26.99',
'06': '17.99',
'12': '15.99',
'24': '11.99'
},
'price_level_5': {
'01': '29.99',
'03': '24.99',
'06': '15.99',
'12': '13.99',
'24': '10.99'
},
'price_level_6': {
'01': '29.99',
'03': '22.99',
'06': '13.99',
'12': '11.99',
'24': '9.99'
}
};
var total_price = premium_prices_monthly[price_level][lvl];
var tutoring_price = (+total_price - original_price).toFixed(2);
return {
total: total_price,
original: original_price,
tutoring: tutoring_price
};
}
// *********************************************************
// VIDEO OVERLAY
// *********************************************************
// any elements with this class will open a video of your choice
$('.js_open_video').on('click', function(){
showVideo(this);
return false;
});
// make video openers keyboard-accessible
$('.js_open_video').attr('tabindex','0').on('keydown', function(e){
// make "enter" key equivalent to click
if(e.keyCode === 13){
showVideo(this);
return false;
}
}).on('focus', function(){
$(this).css({'outline':'2px dashed #fff'});
}).on('blur', function(){
$(this).css({'outline':''});
});
// show correct video
function showVideo(elem){
var vid_name = elem ? elem.getAttribute('data-video') : 'how_it_works';
var youtube_id = {
live_studio_session: 'SiRtFaXqCqU',
how_it_works : 'imK17Pb3Yws',
red_ball : 'xmS1rgDUec4',
delaine : 'KwFphr58e94',
grace : 'g6WEYqaMFsk',
peter : 'p6l9xp3yH7E',
chris : 'ZOwb57bx4mA',
food_truck : 'jMPL9EjBucA',
anniversary_25 : 'ZBeP_d-uAww'
};
var vid_id = youtube_id[vid_name] || youtube_id['how_it_works'];
var youtube_video = '<iframe src="https://www.youtube.com/embed/'+vid_id+'?rel=0&autoplay=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>';
document.getElementById('video_container').innerHTML = youtube_video;
$('#video_overlay').fadeIn().focus();
}
// hide video
function hideVideo(){
// hide overlay
$('#video_overlay').fadeOut(function(){
// get rid of video altogether (otherwise youtube will keep playing it)
document.getElementById('video_container').innerHTML = '';
});
}
// click to close video overlay
document.getElementById('video_overlay').onclick = function(e){
// if the user clicks the background, close the video
if( e.target.id.match(/(^(close_|)video_overlay$)/) ){
hideVideo();
}
};
// if user clicks x, close video (the reason this wasn't added to the event delegation was to make the functionality bulletproof across browsers; yes there was an IE bug)
document.getElementById('close_video_overlay').onclick = hideVideo;
// close video if user presses "esc" key
$(document).on('keydown', function(e){
if(e.keyCode===27){
hideVideo();
}
});
});