Untitled
unknown
plain_text
9 months ago
21 kB
6
Indexable
Never
(function(){ var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('html body[data-targeted-ctas-clicked] [class^="StickyNavigation-module__container"],html body[data-targeted-ctas-clicked] [class^="WizardNavigationLayout-module__container"] [class^="WizardNavigationLayout-module__stepContainerWrapper"]>*:not([class^="StickyNavigation-module__container"]),html body[data-targeted-ctas-clicked] [class^="WizardNavigation-module__container"]>[class^="HeroText-module__container"],html body[data-targeted-ctas-clicked] footer,html body[data-targeted-section] [class^="StickyNavigation-module__container"],html body[data-targeted-ctas-clicked] [class^="StickyNavigation-module__container"],html body:not([data-targeted-ctas-clicked]) [data-new-html] { display: none !important;}html body[data-targeted-ctas-clicked] [class^="WizardNavigationLayout-module__container"] [class^="WizardNavigationLayout-module__stepContainerWrapper"] { flex-grow: unset !important;}html body .but-1-0-yelloBoxNav { align-items: center; background-color: #ffe180; color: #174f78; display: flex; flex-direction: column; justify-content: center; padding: 30px 10px 20px; position: relative; text-align: center; margin-bottom: 0;}html body .but-1-0-yelloboxHeading { color: #174f78; font-family: cooperhewitt, helvetica, arial, sans-serif; font-weight: 700; font-size: 31px; margin: 0;}html body .but-1-0-blueBoxNav { background: #174F78; padding: 8px 14px; color: #FFF; font-size: 16px; font-style: normal; font-weight: 711; line-height: normal; font-family: cooperhewitt, helvetica, arial, sans-serif;}html body .but-1-0-blueBoxHeading { display: flex; justify-content: center; grid-gap: 8px; align-items: center; text-align: left !important;}html body .but-1-0-whitePaw { width: 14px; height: 14px; background: url(\'https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/paw.png\'); background-size: cover; background-position: center; background-repeat: no-repeat; min-width: 14px;}html body .but-1-0-newContent-wpr { display: flex; flex-direction: column;}html body .but-1-0-newContent-wpr>img { width: 100%; display: block; object-fit: cover; margin-bottom: 41px;}html body .but-1-0-newContent-yellow-paw { display: flex; justify-content: flex-end; height: 0 !important; padding-bottom: 89px !important;}html body .but-1-0-newContent-yellow-paw>img { height: 123.706px; width: 105.636px; object-fit: cover; position: relative; right: -14px; top: -20px;}html body .but-1-0-newContent-bullets>li { display: flex; grid-gap: 10px; color: #174F78; font-size: 18px; font-style: normal; font-weight: 400; font-family: gt-pressura-regular, helvetica, arial, sans-serif; align-items: flex-start; justify-content: flex-start; text-align: left; line-height: 1.2;}html body .but-1-0-newContent-bullets>li img { width: 20px; height: 20px; object-fit: contain;}html body .but-1-0-newContent-bullets>li+li { margin-top: 26px;}html body .but-1-0-StickyCtaContainer { background-color: #fff; bottom: 0; left: 0; box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(54, 50, 48, .2); display: flex; justify-content: space-around; height: 7.8rem; padding: 1rem 0 calc(env(safe-area-inset-bottom) + 1rem); position: fixed; width: 100%; z-index: 12; transition: bottom .3s ease-out;}html body .but-1-0-StickyNavigation { align-items: center; display: flex; justify-content: space-around; flex-wrap: wrap; position: relative; width: 67rem; padding-bottom: .8rem;}html body .but-1-0-StickyNavigation a { text-decoration: none !important;}html body .but-1-0-cta { box-shadow: 0 0.2rem 0.4rem 0 rgba(54, 50, 48, .25); align-items: center; box-sizing: border-box; text-decoration: none; border-radius: 1rem; padding: 0 2.4rem; cursor: pointer; outline: 0; height: -webkit-max-content; height: -moz-max-content; height: max-content; justify-content: center; text-transform: uppercase; transition: background-color .25s ease; min-height: 4rem; border: .15rem solid #e66c55; display: flex; flex-direction: row; transform: scale(1); background: #e66c55;}html body .but-1-0-buttonSecondary { background-color: #fff;}html body .but-1-0-cta:hover { background-color: #cc4b33; transform: scale(0.95);}html body .but-1-0-buttonSecondary:hover { background-color: #f9eeec;}html body .but-1-0-back-icon { display: flex; flex-direction: row; line-height: 0; margin-left: 0.8rem;}html body .but-1-0-buttonSecondary .but-1-0-back-icon { margin-right: .8rem; margin-left: 0;}html body .but-1-0-back-icon svg { min-width: 18px; width: 18px; max-width: 18px;}html body .but-1-0-buttonSecondary .but-1-0-back-icon svg { color: #e66c55; transform: rotate(180deg);}html body .but-1-0-btn-text { display: block; color: white; font-size: 1.8rem; font-family: gt-pressura-mono, courier, courier-new, monospace; font-weight: 100;}html body .but-1-0-buttonSecondary .but-1-0-btn-text { color: #e66c55;}html body .but-1-0-StickyCtaContainer { background-color: #fff; bottom: 0; left: 0; box-shadow: 0 0.2rem 0.5rem 0.2rem rgba(54, 50, 48, .2); display: flex; justify-content: space-around; height: 7.8rem; padding: 1rem 0 calc(env(safe-area-inset-bottom) + 1rem); position: fixed; width: 100%; z-index: 12; transition: bottom .3s ease-out;}html body .but-1-0-StickyNavigation { align-items: center; display: flex; justify-content: space-around; flex-wrap: wrap; position: relative; width: 67rem; padding-bottom: .8rem;}html body .but-1-0-StickyNavigation a { text-decoration: none !important;}html body .but-1-0-cta { box-shadow: 0 0.2rem 0.4rem 0 rgba(54, 50, 48, .25); align-items: center; box-sizing: border-box; text-decoration: none; border-radius: 1rem; padding: 0 2.4rem; cursor: pointer; outline: 0; height: -webkit-max-content; height: -moz-max-content; height: max-content; justify-content: center; text-transform: uppercase; transition: background-color .25s ease; min-height: 4rem; border: .15rem solid #e66c55; display: flex; flex-direction: row; transform: scale(1); background: #e66c55;}html body .but-1-0-buttonSecondary { background-color: #fff;}html body .but-1-0-cta:hover { background-color: #cc4b33; transform: scale(0.95);}html body .but-1-0-buttonSecondary:hover { background-color: #f9eeec;}html body .but-1-0-back-icon { display: flex; flex-direction: row; line-height: 0; margin-left: 0.8rem;}html body .but-1-0-buttonSecondary .but-1-0-back-icon { margin-right: .8rem; margin-left: 0;}html body .but-1-0-back-icon svg { min-width: 18px; width: 18px; max-width: 18px;}html body .but-1-0-buttonSecondary .but-1-0-back-icon svg { color: #e66c55; transform: rotate(180deg);}html body .but-1-0-btn-text { display: block; color: white; font-size: 1.8rem; font-family: gt-pressura-mono, courier, courier-new, monospace; font-weight: 100;}html body .but-1-0-buttonSecondary .but-1-0-btn-text { color: #e66c55;}html body .but-1-0-newContent-bullets { padding-left: 17px; padding-right: 32px;}html body[data-targeted-ctas-clicked="premium_ingredients"] .but-1-0-yelloboxHeading { font-size: 27px;}html body[data-targeted-ctas-clicked="premium_ingredients"] .but-1-0-yelloBoxNav { padding-bottom: 30px;}html body[data-targeted-ctas-clicked="premium_ingredients"] .but-1-0-blueBoxNav { padding: 19px 16px; font-size: 14px;}'));document.head.appendChild(style); (function (w) { "use strict"; var tag = "but-1-0", debug = document.cookie.indexOf("cfQA") > -1, window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w; window[tag] = { log: function (msg) { if (debug) console.log("[BUTTERNUT]", tag, "-->", msg); }, waitForElement: function (cssSelector, callback) { var stop, elementCached, timeout, check = function () { try { elementCached = document.querySelector(cssSelector); if (stop) return; if (elementCached) { callback(elementCached); clearTimeout(timeout); window[tag].log(cssSelector + " found"); } else { window.requestAnimationFrame(check); } } catch (err) { window[tag].log(err.message); } }; window.requestAnimationFrame(check); timeout = setTimeout(function () { stop = true; window[tag].log(cssSelector + " not found"); }, 5000); }, testStart: function () { try { this.waitForElement("body", function (docBody) { docBody.classList.add(tag); }); // INITIALIZE THE TEST initVariation(); window[tag].log("test running"); } catch (err) { window[tag].log(err.message); } }, }; function live(selector, event, callback, context) { /****Helper Functions****/ // helper for enabling IE 8 event bindings function addEvent(el, type, handler) { if (el.attachEvent) el.attachEvent("on" + type, handler); else el.addEventListener(type, handler); } // matches polyfill this.Element && (function (ElementPrototype) { ElementPrototype.matches = ElementPrototype.matches || ElementPrototype.matchesSelector || ElementPrototype.webkitMatchesSelector || ElementPrototype.msMatchesSelector || function (selector) { var node = this, nodes = (node.parentNode || node.document).querySelectorAll(selector), i = -1; while (nodes[++i] && nodes[i] != node); return !!nodes[i]; }; })(Element.prototype); // live binding helper using matchesSelector function live(selector, event, callback, context) { addEvent(context || document, event, function (e) { var found, el = e.target || e.srcElement; while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement; if (el && found) callback.call(el, e); }); } live(selector, event, callback, context); } function listener() { window.addEventListener("locationchange", function () { initVariation() }); history.pushState = ((f) => function pushState() { var ret = f.apply(this, arguments); window.dispatchEvent(new Event("pushstate")); window.dispatchEvent(new Event("locationchange")); return ret; })(history.pushState); history.replaceState = ((f) => function replaceState() { var ret = f.apply(this, arguments); window.dispatchEvent(new Event("replacestate")); window.dispatchEvent(new Event("locationchange")); return ret; })(history.replaceState); window.addEventListener("popstate", () => { window.dispatchEvent(new Event("locationchange")); }); } var backIcon = `<svg height="18" viewBox="0 0 25 30" width="18" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="m1.58201 29.625h-.620324c-.682355-1.6129-.341177-2.8845 1.147594-3.784 4.83852-2.9465 9.95622-5.4898 13.89522-9.739.8374-.8995.9925-1.5509.031-2.2642-2.2642-1.6749-4.5593-3.3188-6.91657-4.86956-1.86097-1.20963-3.81499-2.26417-5.769-3.31872-1.39573-.74439-1.73691-1.95402-1.67487-3.38076.09305-1.923001.93048-2.388244 2.54332-1.364712 2.48129 1.581822 5.02461 3.070592 7.44382 4.714452 3.9081 2.66739 7.9092 5.2417 11.6311 8.1572 2.2021 1.7369 1.5508 3.722-1.0546 4.7455-1.7989.7134-3.6599 1.4888-5.2417 2.6054-4.8075 3.4428-10.01819 6.1412-15.41499 8.4984z" fill="#e66c55" fill-rule="evenodd"></path> </svg>`; var contiIcon = `<svg height="18" viewBox="0 0 25 30" width="18" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" d="m1.58201 29.625h-.620324c-.682355-1.6129-.341177-2.8845 1.147594-3.784 4.83852-2.9465 9.95622-5.4898 13.89522-9.739.8374-.8995.9925-1.5509.031-2.2642-2.2642-1.6749-4.5593-3.3188-6.91657-4.86956-1.86097-1.20963-3.81499-2.26417-5.769-3.31872-1.39573-.74439-1.73691-1.95402-1.67487-3.38076.09305-1.923001.93048-2.388244 2.54332-1.364712 2.48129 1.581822 5.02461 3.070592 7.44382 4.714452 3.9081 2.66739 7.9092 5.2417 11.6311 8.1572 2.2021 1.7369 1.5508 3.722-1.0546 4.7455-1.7989.7134-3.6599 1.4888-5.2417 2.6054-4.8075 3.4428-10.01819 6.1412-15.41499 8.4984z" fill="#fff" fill-rule="evenodd"></path> </svg>`; window[tag].testStart(); const newContentData = { "convenience": { "img": "https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/Butternut-box.png", "bullets": [ "Personalised meals for your pup", "Quick, straight forward and flexible", "Conveniently delivered straight to your door" ], "navTextYellow": "Effortless food,<br>delivered to you", "navTextBlue": "Simple ordering for happy pup" }, "premium_ingredients": { "img": "https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/Dog%20image.png", "bullets": [ "Premium quality, fresh, human-grade ingredients", "Nutrient-rich formulas with no nasties", "Taste-tested to suit even the fussiest of pups" ], "navTextYellow": "Exceptional ingredients<br>for exceptional pups", "navTextBlue": `Indulge {dogname} with the finest ingredients, because she deserves the best!` } } const navBoxHTML = ` <div class="${tag}-yelloBoxNav" data-new-html> <h1 class="${tag}-yelloboxHeading"></h1> </div> <div class="${tag}-blueBoxNav" data-new-html> <span class="${tag}-blueBoxHeading"></span> </div> `; const newContentHTML = ` <div class="${tag}-newContent-wpr" data-new-html> <img src="" data-main-img> <ul class="${tag}-newContent-bullets"> <li></li> <li></li> <li></li> </ul> <span class="${tag}-newContent-yellow-paw"> <img src="https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/paw-yellow.png"> </span> </div> `; var newStickyHTML = ` <div class="${tag}-StickyCtaContainer" data-new-html> <div class="${tag}-StickyNavigation"><a data-back=""><button class="${tag}-buttonSecondary ${tag}-cta" type="button"> <div class="${tag}-back-icon">${backIcon}</div> <div class="${tag}-btn-text">BACK</div> </button></a><a data-continue=""><button class="${tag}-cta" type="button"> <div class="${tag}-btn-text">CONTINUE</div> <div class="${tag}-back-icon">${contiIcon}</div> </button></a></div> </div> `; function initVariation() { const pathname = window.location.pathname; if (pathname === "/wizard/goals") { window[tag].waitForElement('html body #whatKindOfGoalsStep input', () => { // uncheck preselected document.body.setAttribute('data-targeted-section', true); // updateDogName updateDogName(); if (!document.querySelector(`.${tag}-yelloBoxNav`)) { insertHTMLS(); testEvents(); } }); } else { reset({ attri: { section: true, clicked: true }, els: true }); } } function insertHTMLS() { if (!document.querySelector(`.${tag}-yelloBoxNav`)) { document.querySelector('[class^="WizardNavigation-module__container"]').insertAdjacentHTML('beforeend', navBoxHTML); document.querySelector('html body [class^="WizardNavigationLayout-module__container"] [class^="WizardNavigationLayout-module__stepContainerWrapper"]').insertAdjacentHTML('afterend', newContentHTML); document.body.insertAdjacentHTML('beforeend', newStickyHTML); testEvents(); } } function testEvents() { const targetedCtas = document.querySelectorAll('#whatKindOfGoalsStep input'); targetedCtas.forEach(cta => { const key = cta.getAttribute('id'); if (key === "premium_ingredients" || key === "convenience") { cta.addEventListener('change', function () { if (cta.checked == true) { document.body.setAttribute('data-targeted-ctas-clicked', key); document.body.setAttribute('data-targeted-section', true); insertHTMLS(); updateContent(key); } }); } else { cta.addEventListener('click', function () { reset({ attri: { section: true, clicked: true } }); }); } cta.addEventListener('click', function () { setNativeValue(cta, true); }); }); document.querySelector(`.${tag}-StickyNavigation [data-back]`).addEventListener('click', function () { reset({ attri: { clicked: true }, els: true, uncheck: true }); }); document.querySelector(`.${tag}-StickyNavigation [data-continue]`).addEventListener('click', function () { document.querySelector('html body #stickyNavigation [aria-label="CONTINUE"]').click(); }); } function updateDogName() { const dogName = document.querySelector('html body [class^="WizardNavigation-module__container"]>[class^="HeroText-module__container"] h1').textContent.trim().replace("What is the most important thing about", '').replace("food?", '').replace("'s", '').trim(); newContentData.premium_ingredients.navTextBlue = `Indulge ${dogName} with the finest ingredients, because she deserves the best!`; } function reset(prm) { if (prm.els) { if (document.querySelector(`.${tag}-blueBoxNav`)) { document.querySelector(`.${tag}-blueBoxNav`).remove(); } if (document.querySelector(`.${tag}-yelloBoxNav`)) { document.querySelector(`.${tag}-yelloBoxNav`).remove(); } if (document.querySelector(`.${tag}-newContent-wpr`)) { document.querySelector(`.${tag}-newContent-wpr`).remove(); } if (document.querySelector(`.${tag}-StickyCtaContainer`)) { document.querySelector(`.${tag}-StickyCtaContainer`).remove(); } } if (prm.attri && prm.attri.section) { document.body.removeAttribute('data-targeted-section'); } if (prm.attri && prm.attri.clicked) { document.body.removeAttribute('data-targeted-ctas-clicked'); } if (prm.uncheck == true) { const input = document.querySelector('#whatKindOfGoalsStep input:checked'); if (input) { setNativeValue(input, false); } } } function updateContent(key) { const YellowBoxTitle = document.querySelector(`.${tag}-yelloboxHeading`); const blueBoxTitle = document.querySelector(`.${tag}-blueBoxHeading`); const mainImg = document.querySelector(`.${tag}-newContent-wpr [data-main-img]`); const bullet1 = document.querySelector(`.${tag}-newContent-bullets>li:nth-child(1)`); const bullet2 = document.querySelector(`.${tag}-newContent-bullets>li:nth-child(2)`); const bullet3 = document.querySelector(`.${tag}-newContent-bullets>li:nth-child(3)`); const data = newContentData[key]; mainImg.setAttribute("src", data.img); YellowBoxTitle.innerHTML = data.navTextYellow; blueBoxTitle.innerHTML = `<i class="${tag}-whitePaw"></i>` + data.navTextBlue; bullet1.innerHTML = '<img src="https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/tick-icon.png">' + data.bullets[0]; bullet2.innerHTML = '<img src="https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/tick-icon.png">' + data.bullets[1]; bullet3.innerHTML = '<img src="https://cfactory-img.s3.amazonaws.com/pitches/Butterbox/tick-icon.png">' + data.bullets[2]; } function setNativeValue(element, value) { let lastValue = element.value; element.checked = value; let event = new Event("change", { target: element, bubbles: true }); // React 15 event.simulated = true; // React 16 let tracker = element._valueTracker; if (tracker) { tracker.setValue(lastValue); } element.dispatchEvent(event); } listener(); })(window); })();
Leave a Comment