Untitled
unknown
plain_text
a year ago
29 kB
5
Indexable
(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);
})();