Wed Nov 28 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
// need to pass jQuery into local $ parameter so that $ can be used because cart blows out $ variable
/**
 * for LOBM
 *  90497 when its 143.96, show RTO. Apply this promo iguazafalls_24mm15bm if accepted
 *  90496 when it's 95.88, show RTO. Apply this promo iguazafalls_12mm10bm if accepted
 * 
 * for LOGL
 *  90291 + 90291 when its 143.96, show RTO. Apply this promo iguazafalls_24mm15 if accepted
 *  90288 + 90288 when it's 95.88, show RTO. Apply this promo iguazafalls_12mm10 if accepted
 */

(function($) {

    // For test
    if ( window.document.location.href.indexOf('?rtotest') == -1 )
    {
        //return
    }


    $(function(){               
        // var triggerRsis = [
        //     'sbsr/sitewide',
        //     'sbsr/rmsitewide',
        //     'ppc/sale',
        //     'sbsr/social',
        //     '.com/buy-',
        //     '.com/learn-'
        // ]
        
        // EL https://www.rosettastone.com/lp/sbsr/emailcw24p12/
        // BM https://www.rosettastone.com/lp/sbsr/emailbf12p3bm
        var skusInCart = rs.pixp_sku.split(',')[0]

        var offer = 'CM', logo, offer_url, headline, skusList, xhrUrl

        /************************************************
         * BLACK FRIDAY OFFER
         ***********************************************/
        if (offer == 'BF')
        {
            // Only show RTO for these skus -- and if theyre this price
            skusList = {
                // LOBM
                90496: {
                    price: 95.88,
                    promo: 'iguazafalls_12mm10bm'
                },
                90497: {
                    price: 143.76,
                    promo: 'iguazafalls_24mm15bm'
                } 
            }
            
            // Only run rto if there's only 1 product in cart
            if (rs.pixp_cartCount != 1)
            {
                return
            }     
            // And the sku in cart must be in the keys of skusList        
            if (Object.keys(skusList).indexOf(rs.pixp_sku) == -1)
            {
                // Sku in cart not found in keys of skusList                
                return
            }
            
            // Price for the sku in cart must be the value in skusList
            if (skusList[rs.pixp_sku].price != rs.pixp_price)
            {                
                return                
            }
            
            logo = 'bf-sale'    
            headline = "save up to $" + (rs.pixp_sku.split(',')[0] == 90496 ? "10" : "15") + " on your order"
            xhrUrl = "https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifypromo/?coupon_code=" + skusList[rs.pixp_sku].promo
        }                  
      


     
        /************************************************
        * CYBER MONDAY OFFER
        ***********************************************/
       if (offer == 'CM')
       {
          // Only show RTO for these skus -- and if theyre this price
          skusList = {
            // LOBM
            90288: {
              price: 95.88,
              promo: 'iguazafalls_12mm10'
            },
            90291: {
              price: 143.76,
              promo: 'iguazafalls_24mm15'
            } 
          }
          
          // Only run rto if there's only 1 product in cart
          if (rs.pixp_cartCount != 2)
          {
            return
          }
          
          // And the sku in cart must be in the keys of skusList        
          if (Object.keys(skusList).indexOf(rs.pixp_sku.split(',')[0]) == -1)
          {
            // Sku in cart not found in keys of skusList       
            return
          }
          
          // Price for the sku in cart must be the value in skusList
          if (skusList[rs.pixp_sku.split(',')[0]].price / 2 != rs.pixp_price.split(',')[0])
          {                
            return
          }
          logo = 'cm-sale'            
          headline = "save up to $" + (rs.pixp_sku.split(',')[0] == 90288 ? "10" : "15") + " on your order"
          xhrUrl = "https://secure.rosettastone.com/us_en_store_view/checkout/cart/verifypromo/?coupon_code=" + skusList[rs.pixp_sku.split(',')[0]].promo
       }    






       

        // 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_accepted') && _satellite.readCookie('cart_rto_deadline') != 'expired') {            
          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
          });
        //}


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












        // ********************************************************
        // 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, totalTimeInMinutes){

           
            
            // if(offer){
            
            // 	// offer details
            // 	var promo_code = offer.promo_code;
            // 	var headline = offer.headline;
            // 	var lang = rs.pixp_lang.toLowerCase()
                
                
                


            // 	// 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;font-weight:bold; } /************************************************************************ RTO LOGO *************************************************************************/ .cart_rto_logo{ width: 138px; height: 45px; background-image: url(\'https://www.rosettastone.com/lp/rtos/q418/' + 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; color:#fff } /************************************************************************ 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 *************************************************************************//* ------------------------------------------------ CYBER MONDAY ------------------------------------------------ */ .cart_rto_top_cyber_monday{ background-color: #ECC200;  color: #333; } .cart_rto_top_cyber_monday .cart_rto_logo{  background-image: url(\'https://www.rosettastone.com/lp/rtos/q418/'+logo +'.png\'); width: 70px; height: 47px; position: relative; top: 3px; } .cart_rto_top_cyber_monday .rto_offer_title{ color: red; text-transform:uppercase;} .cart_rto_top_cyber_monday .cart_rto_close_svg line{ stroke: #fafafa; } .cart_rto_top_cyber_monday .clock_progress_bg{ stroke: #1979c3; } .cart_rto_top_cyber_monday .clock_progress{ stroke: #333; } </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="#">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();
                    _satellite.setCookie('cart_rto_deadline', 'expired')
                }












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

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

                $('.js_cart_rto_btn').on('click', function(e) {
                    e.preventDefault()
                    $.ajax({
                        method: "GET",
                        xhrFields: {
                            withCredentials: true
                        },
                        url: xhrUrl,
                        success: function (d) {          
                            var daysTillExpiration = 1;
                            setCookie('cart_rto_end_state', 'accepted', daysTillExpiration);
                            stopClock();
                            window.location.replace(window.location.pathname + window.location.search + window.location.hash);
                        },
                        error: function() {
                            var daysTillExpiration = 1;
                            setCookie('cart_rto_end_state', 'accepted', daysTillExpiration);
                            stopClock();
                        }
                      });    

                    
                });


            
            


        }



    });
})(jQuery);