Untitled
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); })();