Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
29 kB
5
Indexable
Never
(function(){
    var style=document.createElement('style');style.type='text/css';style.appendChild(document.createTextNode('@media(max-width:767px) {    html body header>div {        margin: 0 !important;        padding: 8px 24px !important;    }    a.live-tel {        display: none;    }    html body header>div>.relative.clearfix {        margin-bottom: 0 !important;        display: flex;        align-items: center;        justify-content: space-between !important;        width: 100% !important;    }    html body header>div>.relative.clearfix>[href="/"]+a {        display: none !important;    }    html body header>div>.relative.clearfix>[href="/"] {        float: unset !important;        margin: 0 !important;        max-width: unset !important;        width: 77px !important;        height: 44px !important;    }    html body header>div>.relative.clearfix>.offcanvas__toggle {        position: relative !important;        transform: none !important;        width: 18px;        height: 16px !important;        overflow: hidden !important;        color: transparent !important;        padding: 0 !important;        border-radius: 0 !important;        border: none !important;        background: url("https://svgshare.com/i/x5A.svg");        background-size: cover;        background-position: center;        background-repeat: no-repeat;    }    html body header>div>.relative.clearfix>.offcanvas__toggle span {        display: none !important;    }    html body header>div>.relative.clearfix::before,    html body header>div>.relative.clearfix::after {        display: none !important;    }    html body header>div>.relative.clearfix>[href="/"] img {        max-width: unset !important;        width: 100% !important;        height: 100% !important;    }    html body header>div>.mobile__contact {        display: none !important;    }}@media(orientation: landscape),(max-width:767px) {    html body.quotation>a.lightbox--video {        display: none !important;    }    html body header+div.wrap {        margin-top: 0 !important;        padding-left: 30px !important;        padding-right: 30px !important;        background: #DB0020;        padding-top: 4px;        padding-bottom: 4px;    }    html body footer {        margin-top: 0 !important;    }    html body header~div.wrap--alt {        background: #f4f6f8;        margin: 0 !important;    }    html body header~div.wrap--alt>h1 {        color: #333;        text-align: center;        font-size: 20px;        font-style: normal;        line-height: 150%;        /* 30px */        font-weight: 500 !important;        padding-top: 22px !important;    }    /* progress steps container */    html body .cv-progres-steps-container {        border-radius: 20px 20px 0px 0px;        background: #FFF;        box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.05);        padding: 24px;        margin-top: 16px;    }    /* progress bar */    .progress-bar {        width: 100%;        height: 6px;        background-color: #F4F6F8;        border-radius: 100vmax;    }    .progress {        height: 100%;        background-color: #C3C44E;        border-radius: inherit;        width: 0;        transition: width 0.3s ease-in-out;    }    .cv-step-text {        color: rgba(51, 51, 51, 0.65);        font-size: 12px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 18px */        margin-bottom: 4px;    }    html body .cv-progress {        margin-bottom: 17px;        position: relative;    }    html body .cv-back-button {        background: none !important;        outline: none !important;        border: none !important;        position: absolute;        left: 0 !important;        top: 5px;    }    html body .cv-progress.cv-show-back {        padding-left: 20px !important;    }    html body .cv-progress:not(.cv-show-back) .cv-back-button {        display: none !important;    }    /* step titles and subtitles */    html body .cv-step-titles>.cv-title {        color: #333;        font-size: 20px;        font-style: normal;        font-weight: 700;        line-height: 150%;        /* 30px */    }    html body .cv-step-titles>.cv-subtitle {        color: #333;        font-size: 16px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 24px */    }    /* step 1 content */    html body .cv-step-contents>.cv-step-content>.cv-cta {        display: flex !important;        padding: 16px !important;        border-radius: 4px;        background: #FFF;        position: relative;        border: 1px solid rgba(51, 51, 51, 0.10);    }    html body .cv-step-contents>.cv-step-2-content>.cv-cta {        padding: 8px !important;        align-items: center;    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-img {        min-width: 82px !important;        max-width: 82px !important;        height: 100px !important;        margin-right: 10px !important;        border-radius: 2px;    }    html body .cv-step-contents>.cv-step-2-content>.cv-cta .cv-img {        min-width: 80px !important;        max-width: 80px !important;        height: 68px !important;        border-radius: 4px !important;        margin-right: 12px !important;    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-img img {        width: 100%;        display: block;        height: 100%;        border-radius: inherit !important;    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-right .cv-bold-text {        color: #333;        font-size: 16px;        font-style: normal;        font-weight: 700;        line-height: 150%;        /* 24px */    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-right p:last-child {        color: #333;        font-size: 12px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 18px */    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-right .cv-product-name {        color: #333;        font-size: 20px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 30px */        margin-bottom: 6px;    }    html body .cv-step-contents>.cv-step-2-content>.cv-cta .cv-right p:last-child {        color: #333;        font-size: 16px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 24px */    }    html body .cv-step-contents>.cv-step-content>.cv-cta::after {        content: "";        width: 73.051px;        height: 72.591px;        background: url("https://cfactory-img.s3.amazonaws.com/pitches/Mayfair/selectedCV.svg");        background-size: cover;        background-position: center;        background-repeat: no-repeat;        position: absolute;        top: -24px;        right: -24px;    }    html body .cv-step-titles {        margin-bottom: 27px !important;    }    html body .cv-step-contents>.cv-step-content>.cv-cta:not(:last-child) {        margin-bottom: 16px;    }    html body .cv-step-contents>.cv-step-content>.cv-cta.cv-active {        border-color: #C3C44E !important;        border-width: 1.5px !important;    }    html body .cv-step-contents>.cv-step-content>.cv-cta:not(.cv-active)::after {        display: none;    }    .cv-continue-btn {        padding: 16px 24px;        display: flex;        justify-content: center;        background: white;    }    [data-step-show="2"]~.cv-continue-btn,    .cv-continue-btn.cv-sticky {        bottom: 0 !important;        position: fixed;        z-index: 9999;        left: 0;        right: 0;        box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);    }    .cv-next-step {        width: 100%;        display: block;        border-radius: 4px;        padding: 8px 16px 8px 16px;        font-family: \'Open Sans\';        font-weight: 700;        font-size: 16px;        line-height: 24px;        text-align: center;        background: #82BFA9;        color: #FFFFFF !important;        text-decoration: none;        max-width: 312px !important;    }    .cv-next-step.disabled {        background: #D6D6D6 !important;        color: rgba(51, 51, 51, 0.40) !important;        pointer-events: none !important;    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-right .cv-pricing {        color: #333;        font-size: 16px;        font-style: normal;        font-weight: 400;        line-height: 150%;    }    html body .cv-step-contents>.cv-step-content>.cv-cta .cv-right .cv-pricing .cv-sale-price {        color: #DB0022;        text-align: right;        font-size: 14px !important;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 21px */        text-decoration: line-through !important;        margin-left: 8px !important;    }    html body .the-footer__copyright {        padding-bottom: 102px !important;    }    html body .cv-step-contents[data-step-show="1"]>.cv-step-2-content,    html body .cv-step-contents[data-step-show="1"]>.cv-step-3-content,    html body .cv-step-contents[data-step-show="2"]>.cv-step-1-content,    html body .cv-step-contents[data-step-show="2"]>.cv-step-3-content,    html body .cv-step-contents[data-step-show="3"]>.cv-step-1-content,    html body .cv-step-contents[data-step-show="3"]>.cv-step-2-content {        display: none !important;    }    html body .cv-request-quote-frm {        background: white !important;    }    html body .cv-request-quote-frm input:not(.has-content) {        border-radius: 4px;        border: 1px solid rgba(51, 51, 51, 0.05);        background: rgba(51, 51, 51, 0.05);    }    html body .cv-request-quote-frm input:focus,    html body .cv-request-quote-frm input.has-content {        border-radius: 4px;        border: 1px solid rgba(51, 51, 51, 0.10);        background: rgba(255, 255, 255, 0.05);        outline: none !important;    }    html body .cv-request-quote-frm label {        color: #333;        font-size: 12px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 18px */        margin-bottom: 2px !important;    }    html body .cv-request-quote-frm>p {        padding: 0 !important;        position: relative !important;    }    html body .cv-request-quote-frm>p:not(:last-child) {        margin-bottom: 16px !important;    }    html body .cv-request-quote-frm .alert--error {        display: none !important;    }    html body .cv-request-quote-frm>.quote__short-form__btns {        display: none !important;    }    html body .cv-request-quote-frm #postcode {        max-width: 158.5px !important;    }    html body .cv-field-info {        color: rgba(51, 51, 51, 0.50);        font-size: 12px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 18px */        margin-top: 2px !important;        display: block;    }    html body .cv-request-quote-frm input::placeholder {        color: rgba(51, 51, 51, 0.35);        font-size: 16px;        font-style: normal;        font-weight: 400;        line-height: 150%;        /* 24px */    }    html body .cv-request-quote-frm>p .alert--error {        color: white !important;    }    html body .cv-progres-steps-container~* {        display: none !important;    }    html body .cv-request-quote-frm>p::before {        content: attr(data-err);        border-radius: 3px;        font-size: 13px;        left: 0;        line-height: 1.3;        margin-top: -10px;        padding: 3px 5px 3px 5px;        position: absolute;        top: 100%;        width: 200px;        background: #E24646;        color: white !important;    }    html body .cv-request-quote-frm>p:not([data-err])::before {        display: none !important;    }}'));document.head.appendChild(style);
(function (w) {
  "use strict";

  var tag = "cv", debug = document.cookie.indexOf("cfQA") > -1,
    window = typeof unsafeWindow !== "undefined" ? unsafeWindow : w;
  var testData = {
    "stepsHTML": {
      "progressBar": `<div class="cv-progress"><button class="cv-back-button"><img src="https://cfactory-img.s3.amazonaws.com/pitches/Mayfair/arrowCv.svg"></button><p class="cv-step-text">Step 1 of 3</p><div class="progress-bar"><div class="progress" style="width:33.33%;"></div></div></div>`,
      "stepTitles": `<div class="cv-step-titles"><p class="cv-title">Select your material</p><p class="cv-subtitle">Choose from granite, quartz or ceramic</p></div>`,
      "step1content": `<div class="cv-step-content cv-step-1-content"></div>`,
      "step2content": `<div class="cv-step-content cv-step-2-content"></div>`,
      "continueBtn": `<div class="cv-continue-btn"><a class="cv-next-step disabled">Continue to next step</a></div>`,
      "step4form": `
        <form action="/quotation.html?id=143" method="post" class="cv-request-quote-frm">
    <p>
        <label for="name">Full name</label>
        <input type="text" name="name" id="name" size="30">
    </p>
    <p class="relative has">
        <label for="email">Email</label>
        <input type="email" name="email" id="email">
    </p>
    <p class="relative">
        <label for="tel_mobile">Phone number</label>
        <input type="tel" name="tel_mobile" id="tel_mobile" placeholder="+44">
        <span class="cv-field-info">Use the number that will be easiest for us to reach you on</span>
    </p>
    <p>
        <label for="postcode">Postcode</label>
        <input type="text" name="postcode" id="postcode" maxlength="8" size="5">
    </p>
    <p class="quote__short-form__btns">
        <button type="submit" name="action"></button>
    </p>
</form>
        
        `
    },
    "ctasData": [
      {
        "target": "#select-your-granite+div",
        "img": "https://cfactory-img.s3.amazonaws.com/pitches/Mayfair/viscount-white-close-up%201.png",
        "boldText": "Granite",
        "det": `Granite makes an excellent kitchen worktop due to its heat resistance and ease to clean. We have a large variety in stock.`
      },
      {
        "target": "#select-your-quartz+div",
        "img": "https://cfactory-img.s3.amazonaws.com/pitches/Mayfair/staturaicloseup%201.png",
        "boldText": "Quartz",
        "det": `This hardwearing and durable material is extremely hygienic and hard wearing, giving you a perfect worktop for your home.`
      },
      {
        "target": "#select-your-ceramic+div",
        "img": "https://cfactory-img.s3.amazonaws.com/pitches/Mayfair/dekton-laurent-closeup%201.png",
        "boldText": "Ceramic",
        "det": `This stone provides a great look for the on-trend, modern kitchen designs to more traditional kitchen designs.`
      }
    ]
  }
  window[tag] = {
    log: function (msg) {
      if (debug) console.log("[CONV]", 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");
      }, 15000);
    },
    start: function () {
      try {
        this.waitForElement("body", function (docBody) {
          docBody.classList.add(tag);
        });

        if (debug && document.title.indexOf("CONV QA") < 0) {
          document.title = "[CONV QA] " + document.title;
        }

        initVariation();

        window[tag].log("test running");
      } catch (err) {
        window[tag].log(err.message);
      }
    },
    live: function (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);
    }
  };

  if (window.innerWidth < 768) {
    window[tag].start();
  }
  const progressStepsHTML = `
      <div class="cv-progres-steps-container">
        ${testData.stepsHTML.progressBar}
        ${testData.stepsHTML.stepTitles}
        <div class="cv-step-contents" data-step-show="1">
          ${testData.stepsHTML.step1content}
          ${testData.stepsHTML.step2content}
          <div class="cv-step-content cv-step-3-content">${testData.stepsHTML.step4form}</div>
        </div>
        ${testData.stepsHTML.continueBtn}
      </div>`;
  function initVariation() {
    window[tag].waitForElement('footer', function (ele) {
      // changing title
      document.querySelector("html body header ~ div.wrap--alt > h1").innerHTML = "Get your <b>free</b> online quote today!";
      // insertingSteps html
      if (!document.querySelector(".cv-progres-steps-container")) {
        document.querySelector("html body header ~ div.wrap--alt > h1").insertAdjacentHTML("afterend", progressStepsHTML);
        generateCtas();
        // addClickToctas step 1,2
        window[tag].live('.cv-step-contents .cv-cta', 'click', function () {
          const target = this.getAttribute("data-target");
          const url = this.getAttribute("data-url");
          const oldActiveCTa = this.closest(".cv-step-content").querySelector(".cv-cta.cv-active");
          if (oldActiveCTa && oldActiveCTa !== this) {
            oldActiveCTa.classList.remove("cv-active");
          }
          this.classList.add("cv-active");
          enableDisableNextCta();
          if (target) {
            generateData(target);
          } else if (url) {
            document.querySelector(".cv-request-quote-frm").setAttribute("action", url);
          }
        });
        // back button click
        window[tag].live('.cv-back-button', 'click', function () {
          stepsIncDecChanges("-");
        });
        // form fields
        formFieldsInputCheck();
        nextCtaClickListen();
        window.addEventListener("scroll", function () {
          if (document.querySelector('[data-step-show="1"]') || document.querySelector('[data-step-show="3"]')) {
            const nextCta = document.querySelector(".cv-continue-btn");
            if (isInViewport(nextCta.previousElementSibling)) {
              nextCta.classList.remove("cv-sticky")
            } else {
              nextCta.classList.add("cv-sticky");
            }
          }
        })
      }
    });
  }
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    const extraToBottom = 16;
    return (
      (rect.bottom - extraToBottom > 0 && rect.top < window.innerHeight) || // Bottom is visible, or
      (rect.top >= window.innerHeight && rect.bottom - extraToBottom <= window.innerHeight) // Starts to appear from the bottom
    );
  }
  const showHideBackCta = (isShow) => {
    if (isShow) {
      document.querySelector(".cv-progress").classList.add("cv-show-back");
    } else {
      document.querySelector(".cv-progress").classList.remove("cv-show-back")
    }
  }

  const enableDisableNextCta = () => {
    let isEnable = false;
    const crrStep = document.querySelector("[data-step-show]").getAttribute("data-step-show");
    if (crrStep == "1") {
      if (document.querySelector(".cv-step-1-content .cv-active")) {
        isEnable = true;
      }
    } else if (crrStep == "2") {
      if (document.querySelector(".cv-step-2-content .cv-active")) {
        isEnable = true;
      }
    } else {
      if (document.querySelector(".cv-step-3-content.cv-ready")) {
        isEnable = true;
      }
    }
    if (isEnable) {
      document.querySelector(".cv-next-step").classList.remove("disabled");
    } else {
      document.querySelector(".cv-next-step").classList.add("disabled");
    }
  }

  const nextCtaClickListen = () => {
    document.querySelector(".cv-next-step").addEventListener("click", function () {
      if (document.querySelector('[data-step-show="3"] .cv-ready')) {
        document.querySelector('html body .cv-request-quote-frm button').click();
      } else {
        stepsIncDecChanges("+");
        showHideBackCta(true);
      }
      window.scrollTo(0, 0);
    });
  }
  const updateNextCtaText = (newText) => {
    document.querySelector(".cv-next-step").innerText = newText;
  }

  const stepsIncDecChanges = (what) => {
    if (what == "+") {
      const crrStep = document.querySelector(".cv-step-contents").getAttribute("data-step-show");
      if (crrStep === "1") {
        document.querySelector(".cv-step-contents").setAttribute("data-step-show", "2");
        updateProgressBar(66.66);
        updateNextCtaText("Continue to final step");
        updateTitlesSbtitles("Select your colour", "Choose your preferred granite colour");
      } else if (crrStep === "2") {
        document.querySelector(".cv-step-contents").setAttribute("data-step-show", "3");
        updateProgressBar(100);
        updateNextCtaText("Get your quote");
        updateTitlesSbtitles("Fill in your details", "");
      }
    } else if (what == "-") {
      const crrStep = document.querySelector(".cv-step-contents").getAttribute("data-step-show");
      if (crrStep === "3") {
        document.querySelector(".cv-step-contents").setAttribute("data-step-show", "2");
        updateProgressBar(66.66);
        updateNextCtaText("Continue to final step");
        updateTitlesSbtitles("Select your colour", "Choose your preferred granite colour");
      } else if (crrStep === "2") {
        document.querySelector(".cv-step-contents").setAttribute("data-step-show", "1");
        updateProgressBar(33.33);
        updateNextCtaText("Continue to next step");
        updateTitlesSbtitles("Select your material", "Choose from granite, quartz or ceramic");
        showHideBackCta(false);
      }
    }
    enableDisableNextCta();
  }
  // Generate Products for step2 content
  const generateData = (sel) => {
    window[tag].waitForElement(`${sel} .products__item:last-child`, function () {
      const products = [...document.querySelectorAll(`${sel} .products__item`)];
     // console.log("clicked", products);
      const productsHTML = products.reduce((t, crr) => {
        const url = crr.querySelector("a").getAttribute("href") || "";
        const img = crr.querySelector("img").getAttribute("src");
        const title = crr.querySelector(".products__item__heading").innerText.trim();
        const sPrice = crr.querySelector(".products__item__was");
        const price = crr.querySelector(".products__item__price").innerText.trim().replace("per sq/m", "");
        return t += `
        <a class="cv-cta" data-url="${url}">
            <div class="cv-img"><img src="${img}"></div>
            <div class="cv-right">
                <p class="cv-product-name">${title}</p>
                <p class="cv-pricing">
                    <span class="cv-crr-price"><b>${price.trim()}</b> per sq/m</span>
                    ${sPrice && `<span class="cv-sale-price">${sPrice.innerText.trim().replace("Was", "")}</span>`}
                </p>
            </div>
        </a>`;
      }, "");
      document.querySelector(".cv-step-2-content").innerHTML = productsHTML;
    });
  }
  // Generate step 1 ctas

  const generateCtas = () => {
    const ctasHTML = testData.ctasData.reduce((t, crr) => {
      return t += `
          <a class="cv-cta" data-target="${crr.target}">
            <div class="cv-img">
              <img src="${crr.img}">
            </div>
            <div class="cv-right">
              <p class="cv-bold-text">${crr.boldText}</p>
              <p>${crr.det}</p>
            </div>
          </a>
        `;
    }, "");
    document.querySelector(".cv-step-1-content").innerHTML = ctasHTML;
  }

  const updateProgressBar = (percentage) => {
    // progress bar 
    const progressBar = document.querySelector('.progress');
    if (percentage == 33.33) {
      document.querySelector(".cv-step-text").innerText = `Step 1 of 3`;
    } else if (percentage == 66.66) {
      document.querySelector(".cv-step-text").innerText = `Step 2 of 3`;
    } else {
      document.querySelector(".cv-step-text").innerText = `Step 3 of 3`;
    }
    progressBar.style.width = `${percentage}%`;
  }
  const formFieldsInputCheck = () => {
    window[tag].live("html body .cv-request-quote-frm input", "input", function () {
      const id = this.getAttribute("id");
      if (this.value.trim() !== '') {
        this.classList.add('has-content');
      } else {
        this.classList.remove('has-content');
      }
      const value = `${this.value}`;
      // Full name
      if (id == "name") {
        if (this.value.trim() === "") {
          this.parentElement.setAttribute("data-err", "Please enter name");
        } else {
          this.parentElement.removeAttribute("data-err");
        }
      }

      // Email
      if (id == "email") {
        if (this.value.trim() === "") {
          this.parentElement.setAttribute("data-err", "Please enter a valid e-mail address");
        } else {
          const emailPattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
          if (emailPattern.test(this.value.trim())) {
            this.parentElement.removeAttribute("data-err");
          } else {
            this.parentElement.setAttribute("data-err", "Please enter a valid e-mail address");
          }
        }
      }

      // Mobile
      if (id == "tel_mobile") {
        if (value.trim() === "") {
          this.parentElement.setAttribute("data-err", "Please enter a valid UK telephone number");
        } else {
          const regex = /^(?:\+44|0)7\d{9}$/;
          if (regex.test(value.trim())) {
            this.parentElement.removeAttribute("data-err");
          } else {
            this.parentElement.setAttribute("data-err", "Please enter a valid UK telephone number");
          }
        }
      }

      // Post code
      if (id == "postcode") {
        if (this.value.trim() === "") {
          this.parentElement.setAttribute("data-err", "Please enter postcode");
        } else {
          this.parentElement.removeAttribute("data-err");
        }
      }
      enableForFormSubmit()
    });
  }
  const enableForFormSubmit = () => {
    const namefield = document.querySelector('html body .cv-request-quote-frm #name.has-content');
    const emailfield = document.querySelector('html body .cv-request-quote-frm #email.has-content');
    const mobilefield = document.querySelector('html body .cv-request-quote-frm #tel_mobile.has-content');
    const postcode = document.querySelector('html body .cv-request-quote-frm #postcode.has-content');
    if (namefield && emailfield && mobilefield && postcode) {
      const isnmer = namefield.parentElement.getAttribute('data-err');
      const isemer = emailfield.parentElement.getAttribute('data-err');
      const ispher = mobilefield.parentElement.getAttribute('data-err');
      const ispser = postcode.parentElement.getAttribute('data-err');
      if (!isemer && !isnmer && !ispher && !ispser) {
        document.querySelector(".cv-step-3-content").classList.add("cv-ready");
      } else {
        document.querySelector(".cv-step-3-content").classList.remove("cv-ready");
      }
    } else {
      document.querySelector(".cv-step-3-content").classList.remove("cv-ready");
    }
    enableDisableNextCta();
  }
  const updateTitlesSbtitles = (title, subtitle) => {
    const newInnerHTML = `${title !== "" ? `<p class="cv-title">${title}</p>` : ''}${subtitle !== "" ? `<p class="cv-subtitle">${subtitle}</p>` : ''}`;
    document.querySelector(".cv-step-titles").innerHTML = newInnerHTML;
  }

})(window);



})();