Untitled

mail@pastecode.io avatar
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