- 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
<script>
'use strict';
function __giftingTest_doDOMAdjustments(D_el, initialized_product) {
var cssString = '\n <style>\n #giftingsection {\n font-size: 16px;\n font-size: 1rem;\n padding: 1em;\n color: #FFFFFF;\n contain: layout;\n margin-top: 3em;\n overflow: hidden;\n position: relative;\n margin-left: -1em;\n margin-right: -1em;\n text-align: center;\n }\n\n #giftingsection fieldset {\n /* reset */\n min-width: 100%;\n }\n\n #giftingsection_label {\n background-color: #90070e;\n padding: 1em 3em 1em 3em;\n position: relative;\n overflow: hidden;\n font-family: gothammedium;\n cursor: pointer;\n border-radius: 7px;\n display: inline-block;\n }\n #giftingsection_label > * {\n z-index: 1;\n position: relative;\n }\n #giftingsection_label > svg {\n z-index: 0;\n }\n\n #showgifting {\n visibility: hidden;\n position: absolute;\n z-index: -1;\n }\n\n #giftingexpansion {\n box-sizing: border-box;\n height: 0rem;\n background-color: #ecc200;\n margin-left: -1.75em;\n margin-right: -1.75em;\n margin-top: -2px;\n transition-property: height;\n transition-duration: .5s;\n transition-timing-function: ease-out;\n contain: content;\n will-change: height;\n position: relative;\n height: 0;\n overflow: hidden;\n }\n\n #showgifting:checked ~ #giftingexpansion {\n transition-property: height;\n transition-duration: .5s;\n transition-timing-function: ease-out; \n height: auto;\n background-color: #ecc200;\n margin-left: -1.75em;\n margin-right: -1.75em;\n contain: content;\n\n }\n\n #giftingexpansion > * {\n position: relative;\n z-index: 1;\n }\n #giftingexpansion > .gifting_bg {\n \n z-index: 0;\n }\n\n .giftingexpansion_levelselectsection {\n margin-top: 2rem;\n width: 50em;\n max-width: 90%;\n color: black;\n text-align: left;\n margin-left: auto;\n margin-right: auto; \n }\n .giftingexpansion_levelselectsection label {\n display: block;\n text-align: center;\n\n }\n .giftingexpansion_levelselectsection label b{\n display: block;\n text-align: center;\n font-size: 2em;\n color: #222;\n line-height: 1.25;\n font-family: GothamMedium;\n }\n .giftingexpansion_levelselectsection label i{\n display: block;\n text-align: center;\n font-size: 2em;\n color: #222;\n line-height: 1.25;\n font-family: GothamLight;\n }\n .giftingexpansion_levelselectsection label select {\n padding: 1em 3em 1em 1em;\n margin-top: 2em;\n margin-bottom: 2em;\n }\n .giftingexpansion_levelselectsection label select::-ms-expand {\n display: none;\n }\n .giftingexpansion_levelselectsection label .giftingproduct_selectdown {\n position: relative;\n left: -2.1em;\n display: inline-block;\n transform: rotate(90deg) scale(1, 1.5);\n pointer-events: none;\n }\n\n .giftingexpansion_levelselectsection p {\n text-align: justify;\n line-height: 1.25;\n }\n\n .giftingexpansion_addtocartsection {\n margin-top: 0.5rem;\n padding-bottom: 0.5rem;\n\n }\n .giftingexpansion_addtocartsection .giftingproduct {\n width: 17rem;\n background-color: transparent;\n margin: 0 auto;\n color: black;\n padding: 0rem 0rem 1rem 0rem;\n }\n\n #giftingproduct_toplabel {\n background-color: transparent;\n \n color: white;\n padding: 0;\n margin-bottom: 0;\n }\n\n .giftingproduct_buysection {\n padding: 2rem 1rem 1rem 1rem;\n background-color: white;\n margin-top: -2px;\n padding-bottom: 2rem;\n border-bottom-left-radius: 11px;\n border-bottom-right-radius: 11px;\n }\n\n #giftingproduct_saleprice {\n font-family: gothamlight;\n font-size: 3.75rem;\n }\n .giftingproduct_strikecallout {\n margin-top: 1rem;\n margin-bottom: 1rem;\n font-size: .9em;\n }\n .giftingproduct_strikecallout del {\n color: red;\n }\n #giftingproduct_cartlink {\n vertical-align: middle;\n background-color: #34A4D9;\n color: #fff;\n border-radius: 3px;\n padding: 16px;\n text-transform: uppercase;\n text-decoration: none;\n font-size: 16px;\n font-family: gothambold;\n display: block;\n margin: 0 24px;\n }\n\n .oct_2016_blue_bg {\n contain: content;\n }\n\n @supports (flex-flow: row wrap){\n #giftingexpansion {\n display: flex;\n flex-flow: row wrap;\n padding: 0;\n justify-content: center;\n -webkit-justify-content: center;\n }\n #showgifting:checked ~ #giftingexpansion {\n padding: 0 1em 0 1em;\n }\n #giftingexpansion > div.giftingexpansion_levelselectsection {\n text-align: left;\n flex: 0 1 32em;\n margin-right: 7.5rem;\n margin-left: unset; \n }\n #giftingexpansion > div.giftingexpansion_levelselectsection label, #giftingexpansion > div.giftingexpansion_levelselectsection b, #giftingexpansion > div.giftingexpansion_levelselectsection i {\n text-align: left; \n }\n #giftingexpansion > div.giftingexpansion_addtocartsection {\n \n flex: 0 1 20em; \n }\n\n @media (max-width: 1012px) {\n #giftingexpansion > div.giftingexpansion_levelselectsection {\n text-align: center;\n margin-right: auto;\n margin-left: auto; \n }\n\n #showgifting:checked ~ #giftingexpansion {\n padding: 1em;\n }\n\n #giftingexpansion > div.giftingexpansion_levelselectsection label, #giftingexpansion > div.giftingexpansion_levelselectsection b, #giftingexpansion > div.giftingexpansion_levelselectsection i {\n text-align: center;\n } \n } \n }\n\n </style>\n ';
function generateGiftingMarkup(initialized_product) {
var monthly = !window.location.search.match(/showfull/gi);
var monthlyprice = (Math.ceil(parseInt(initialized_product.price, 10) / parseInt(initialized_product.lvl, 10) * 100) / 100).toFixed(2);
return '\n <p id="giftingproduct_saleprice" style="' + (monthly ? 'display: inline-block;' : '') + '">' + ('$' + (monthly ? monthlyprice.split('.')[0] : initialized_product.price)) + ' <div style="display: ' + (monthly ? 'inline-block' : 'none') + '; font-size: 1.485em; vertical-align: top; text-align: left; margin-top: 0.3em"><p>.' + monthlyprice.split('.')[1] + '</p><p>/Month</p></div></p>\n <p class="giftingproduct_strikecallout">' + (monthly ? '' : 'Regular') + ' <del>' + ('$' + initialized_product.msrp) + '</del>' + (monthly ? ' $' + initialized_product.price + ' due today' : '') + '</p>\n <a id="giftingproduct_cartlink" aria-labelledby="giftingproduct_toplabel" aria-describedby="giftingproduct_saleprice" href="' + (initialized_product.cart + (initialized_product.cart.match(/\?/) ? '' : '?') + (initialized_product.cart.match(/\&$/) ? 'gifting=1' : '&gifting=1')) + '">Add to Cart</a>\n ';
}
var htmlString = '\n <svg aria-hidden id="gifting_bg_defs" width="1px" height="1px" style="z-index: -1; position: absolute; left: -100vw;">\n <defs>\n <pattern id="redlines" x="0" y="0" width="20" height="100" patternUnits="userSpaceOnUse" patternTransform="rotate(50)" >\n\n <rect x="0" y="0" height="100" width="10" style="stroke: none; fill: #ffffff; fill-opacity: .10;" />\n \n\n </pattern>\n <pattern id="redlinesb" x="0" y="0" width="20" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(-6.1, 0) rotate(50)" >\n\n <rect x="0" y="0" height="100" width="10" style="stroke: none; fill: #ffffff; fill-opacity: .10;" />\n \n\n </pattern>\n <pattern id="yllines" x="0" y="0" width="30" height="100" patternUnits="userSpaceOnUse" patternTransform="translate(-1, 0) rotate(50)" >\n\n <rect x="0" y="0" height="100" width="15" style="stroke: none; fill: #ffffff; fill-opacity: .15;" />\n \n\n </pattern>\n </defs>\n </svg>\n <form id="giftingsection">\n \n \n \n <label id="giftingsection_label" for="showgifting">\n <svg style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">\n <rect x="0" y="0" width="100%" height="100%" style="fill: url(#redlines);" />\n </svg>\n <span>eGIFT A SUBSCRIPTION</span> <span class="opsymbol">►</span></label> \n <input aria-expanded="false" aria-controls="giftingexpansion" aria-labelledby="giftingsection_label" type="checkbox" id="showgifting" value="showgifting">\n <section id="giftingexpansion">\n <svg class="gifting_topnotch" width="321.6px" height="48px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMin slice" style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: block;">\n <polygon points="40,0 50,7.5 60,0" style="stroke:none; fill: #90070e;"/>\n <polygon points="40,0 50,7.5 60,0" style="stroke:none; fill: url(#redlinesb);"/>\n </svg>\n <svg class="gifting_bg" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">\n <rect x="0" y="0" width="100%" height="100%" style="fill: url(#yllines);" />\n </svg>\n <div class="giftingexpansion_levelselectsection">\n <label>\n <b>Learn <span class="giftinglang">' + initialized_product.language + '</span></b>\n <i>eGift</i>\n <select aria-controls="giftingproduct_cartlink giftingproduct_toplabel" id="giftinglevelselect" name="levelselect">\n <option value="24" selected>24-Month Subscription</option>\n <option value="12">12-Month Subscription</option>\n <option value="06">6-Month Subscription</option>\n <option value="03">3-Month Subscription</option>\n </select><span class="giftingproduct_selectdown">►</span>\n </label> \n <p>Give the gift of lang­uage to some­one you care about. First, choose an e­Card de­sign. Add your sel­ected product to the cart, then, pick a date to send. Your present will be de­liv­ered on that day, and the rec­ipient can start using Rosetta Stone instantly.</p> \n </div>\n <div class="giftingexpansion_addtocartsection">\n <div class="giftingproduct">\n <div id="giftingproduct_toplabel">\n <svg width="100%" height="145.6px" viewBox="0 0 231 124" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <title>Gift Ribbon</title>\n <desc>Subscription E-Gift Ribbon</desc>\n <defs></defs>\n <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n <g id="Treatment-2---Gift-Option-Open--REV" transform="translate(-980.000000, -2522.000000)">\n <g id="Products---With-Boxes" transform="translate(-366.000000, 1628.000000)">\n <g id="Subscription-Product">\n <g id="eGift-Product" transform="translate(0.000000, 861.000000)">\n <g id="Download/CD">\n <g id="24-MONTHS" transform="translate(1346.000000, 33.000000)">\n <g id="Gift-Ribbon">\n <path d="M8,49 L223,49 L223,49 C227.418278,49 231,52.581722 231,57 L231,124 L0,124 L0,57 L0,57 C-5.41083001e-16,52.581722 3.581722,49 8,49 Z" id="Rectangle-4-Copy-3" fill="#01A13A"></path>\n <text id="24-MONTH-SUBSCRIPTIO" font-family="GothamHTF-Bold, Gotham HTF" font-size="16" font-weight="bold" fill="#FFFFFF">\n <tspan id="gifting_svgmonth" x="70.532" y="84" style="font-family: gothammedium;">' + (parseInt(initialized_product.lvl, 10) + '') + '-MONTH</tspan>\n <tspan x="38.283" y="102" style="font-family: gothamlight;" font-size="14" font-weight="300">SUBSCRIPTION eGIFT</tspan>\n </text>\n <g id="Gift-bow" transform="translate(30.000000, 0.000000)" fill-rule="nonzero">\n <path d="M85,44.2875584 C32.0908138,39.0314747 14.3161119,22.4608323 10.6013301,10 L0,37.7873485 C0.00278469401,55.6776034 63.167999,50.2146314 73.8584393,50.2146314 L84.9972153,50.2146314 C85,50.2146314 85,47.0386149 85,44.2875584 Z" id="Shape" fill="#970000"></path>\n <path d="M85,45.794261 C57.9123939,54.047262 27.2546932,16.469768 0.00556957049,37.4520685 L0,37.7391536 L10.7799037,9.9364906 C10.7799037,9.9364906 17.9702192,0 26.5195099,0 C47.9066606,0 57.2022737,36.2340471 85,36.2340471 C85,40.5152391 85,45.6298142 85,45.6298142 L85,45.794261 Z" id="Shape" fill="#B31200"></path>\n <path d="M86,44.2875584 C138.909186,39.0314747 156.683888,22.4608323 160.39867,10 L171,37.7873485 C170.997215,55.6776034 107.832001,50.2146314 97.1415607,50.2146314 L86.0027847,50.2146314 C86,50.2146314 86,47.0386149 86,44.2875584 Z" id="Shape" fill="#970000"></path>\n <path d="M86,45.794261 C113.087606,54.047262 143.745307,16.469768 170.99443,37.4520685 L171,37.7391536 L160.220096,9.9364906 C160.220096,9.9364906 153.029781,0 144.48049,0 C123.093339,0 113.797726,36.2340471 86,36.2340471 C86,40.5152391 86,45.6298142 86,45.6298142 L86,45.794261 Z" id="Shape" fill="#B31200"></path>\n <path d="M100,41.75 C100,46.2875 96.22,50 91.6,50 L80.4,50 C75.78,50 72,46.2875 72,41.75 L72,36.25 C72,31.7125 75.78,28 80.4,28 L91.6,28 C96.22,28 100,31.7125 100,36.25 L100,41.75 Z" id="Shape" fill="#B31200"></path>\n <path d="M91.6,28 L86,28 C90.62,28 94.4,31.7125 94.4,36.25 L94.4,41.75 C94.4,46.2875 90.62,50 86,50 L91.6,50 C96.22,50 100,46.2875 100,41.75 L100,36.25 C100,31.7125 96.22,28 91.6,28 Z" id="Shape" fill="#970000"></path>\n </g>\n </g>\n </g>\n </g>\n </g>\n </g>\n </g>\n </g>\n </g>\n </svg>\n </div>\n <div class="giftingproduct_buysection">\n ' + generateGiftingMarkup(initialized_product) + '\n </div>\n </div>\n </div>\n </section>\n \n </form>\n ';
D_el.insertAdjacentHTML('afterend', cssString + htmlString);
//Remove existing gifting DOM objects
Array.prototype.slice.call(document.querySelectorAll('.oct_2016_gifting_square,.mobile_gifting')).forEach(function (el) {
el.innerHTML = "";
});
document.querySelector('#giftinglevelselect').addEventListener('change', function (evt) {
if (evt && evt.target && evt.target.value) {
var product = RSI({ lvl: evt.target.value }).pop();
var giftbuysection = document.querySelector('.giftingproduct_buysection');
if (giftbuysection) {
giftbuysection.innerHTML = generateGiftingMarkup(product);
}
document.querySelector('#gifting_svgmonth').textContent = parseInt(product.lvl, 10) + '-MONTH';
}
});
document.querySelector('#showgifting').addEventListener('change', function (evt) {
//debugger;
document.querySelector('#giftingsection .opsymbol').innerHTML = evt.target.checked ? 'X' : '►';
});
}
$(function () {
__giftingTest_doDOMAdjustments(document.querySelector('.js_product_boxes_desktop'), RSI({ lvl: '24' }).pop());
});
</script>