Untitled
unknown
plain_text
2 years ago
21 kB
8
Indexable
(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:checked', () => {
// uncheck preselected
reset({ uncheck: true });
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);
})();
Editor is loading...
Leave a Comment