ePrivacy and GPDR Cookie Consent by Cookie Consent Skip to main content

Web banners: use cases library (HTML for Countdown Black Friday)

<html>
<head>
<style>
body {
margin: 1px;
padding: 0;
font-family: "Proxima Nova", sans-serif;
}

#banner {
display: flex;
border-radius: 8px;
background-color: #ffffff;
border: 1px solid #ddd;
cursor: pointer;
}

.text-container {
padding: 20px;
z-index: 1;
}

.text-container h1 {
margin: 0;
font-size: 24px;
color: #222222;
font-weight: 700;
}

.text-container p {
margin: 5px 0 15px 0;
color: #666666;
font-size: 14px;
min-width: 280px;
max-width: 300px;
}

.cta-button {
font-size: 14px;
font-weight: 700;
color: white;
background-color: #4b2228;
height: 38px;
border-radius: 19px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
cursor: pointer;
border: none;
transition: all 0.1s ease;
margin-bottom: 5px;
}

#banner:hover .cta-button {
background-color: #4b4448;
}

.thumbnail-container {
padding: 30px 20px 10px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
flex: 1;
}

#placeholder {
position: absolute;
right: 20px;
}

#product-name {
font-size: 12px;
color: #666666;
margin-top: 8px;
}
</style>
</head>
<body>
<div id="banner" onclick="goToCheckout()">
<div class="text-container">
<h1 id="heading">Your order is waiting</h1>
<p>You left something in your cart last time! </p>
<button class="cta-button">View cart</button>
</div>
<div class="thumbnail-container">
<img id="placeholder" src="https://myshop.io/img54552.jpeg" />
<img id="thumbnail" style="display: none" src="" />
<div id="product-name" style="display: none"></div>
</div>
</div>
<script>
function goToCheckout() {
window.parent.MeiroEvents.goToWebBannerUrl("https://myshop.io/cart");
}

if (window.parent && window.parent.MeiroEvents) {
// 1. Request vocative
var meiroId = window.parent.localStorage.getItem("meiroEventsUserId");

if (meiroId) {
var vocativeRequest = new XMLHttpRequest();

vocativeRequest.addEventListener("load", function () {
try {
var vocative = JSON.parse(this.responseText).returned_attributes
.mx_vocative_last[0];

if (vocative && vocative.length >= 3 && vocative.length <= 10) {
var capitalizedVocative =
vocative[0].toUpperCase() + vocative.slice(1);

document.getElementById("heading").textContent =
capitalizedVocative + ", your order is waiting";
}
} catch (e) {
// noop
}
});

vocativeRequest.open(
"GET",
"https://cdp.myshop.meiro.io/wbs?attribute=ps_meiro_user_id&segment=1&value=" +
meiroId
);
vocativeRequest.send();
}

// 2. Get product SKU from cookies
var CHECKOUT_ITEMS_COOKIE_NAME = "MyShopCartItems";

var cookieEntries = window.parent.document.cookie
.split("; ")
.map(function (entry) {
return entry.split("=");
});

var sku;

for (var i = 0; i < cookieEntries.length; i++) {
var cookieName = cookieEntries[i][0];

if (cookieName === CHECKOUT_ITEMS_COOKIE_NAME) {
sku = JSON.parse(cookieEntries[i][1])[0].sku;
}
}

// 3. Request product image and name
var productRequest = new XMLHttpRequest();

productRequest.addEventListener("load", function () {
try {
var product = JSON.parse(this.responseText).hits.hits[0]._source;
var imgSrc =
"https://myshop.io/img25632.jpeg" +
encodeURIComponent("/media/catalog/product" + product.thumbnail);

var productNameElement = document.getElementById("product-name");
var placeholderElement = document.getElementById("placeholder");
var thumbnailElement = document.getElementById("thumbnail");
var bannerElement = document.getElementById("banner");

placeholderElement.style = "display:none;";
productNameElement.textContent = product.name;
productNameElement.style = "";
thumbnailElement.setAttribute("src", imgSrc);
thumbnailElement.style = "";
bannerElement.style = "background-color:white;";
} catch (e) {
// noop
}
});

var query = encodeURIComponent(
JSON.stringify({ query: { terms: { sku: [sku] } } })
);

productRequest.open(
"GET",
"https://myshop.io/_e?type=product&body=" + query
);
productRequest.send();
}
</script>
</body>
</html>

 

Back to top