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

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

<html>
  <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <style>
      body {
        margin: 1px;
        padding: 0;
        font-family: "Proxima Nova", sans-serif;
 
      }
 
      #banner {
        display: flex;
        justify-content: center;
        border-radius: 8px;
        background-color: #ffffff;#fff;
        border: 1px solid #ddd;
        cursor: pointer;
      }
 
      .text-container {
        padding: 20px;20px 17px 13px 17px;
        z-index: 1;
      }
 
      .text-container h1 {
        margin: 0;
        font-size: 24px;
        color: #222222;
        font-weight: 700;
        padding-top: 10px;
      }
 
      .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:text-align: 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:text-align: center;
        position: relative;
      flex: 1;
}
     
      #placeholder {
        position: absolute;
right: 20px;max-width:300px;
      }
      #product-name#heading {
        text-align: center;
        max-width: 325px;
        margin:auto;
      }
      .purple-big{
          color:#8722B5;
          font-size: 32px;
          font-weight: bold;
      }
      #counter{
          text-align: center;
          padding-top: 25px;
          width:321px;
          min-height:62px;
      }
      #counter span:nth-child(odd){
          padding:10px 12px;
background: #212529;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.08), inset 0px 4px 4px rgba(0, 0, 0, 0.15);
border-radius: 6px;
font-size: 32px;
color:#fff;
font-weight: bold;
      }
        #counter span:nth-child(even){
            font-size: 12px;32px;
            color:#212529;
        #666666;}
 
 
   margin-top:@media 8px;(max-width:355px) {
      #placeholder {
        max-width:250px;
      }
   }    
    </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.www.meiro.io/img54552.jpeg"banner/Black-friday.png"
          />
        <img/div>
        <h1 id="thumbnail"heading">Enjoy style=the discounts up to <span class="display: none" src="" purple-big">67%</span></h1>
     <div id="product-name" style="display: none"></divcounter">
     </div>
    </div>
    <script>
 
 function goToCheckout() {
        window.parent.MeiroEvents.goToWebBannerUrl(
          "https://myshop.io/cart"www.megapixel.cz"
        );
      }
 
 
function countDown() {
var future = Date.parse("nov 29, 2021 23:59:59")
 
   now = new Date();
    diff = future - now;
 
  days = Math.floor(diff / (1000 * 60 * 60 * 24));
    hours = Math.floor(diff / (1000 * 60 * 60));
    mins = Math.floor(diff / (1000 * 60));
    secs = Math.floor(diff / 1000);
 
    d = '0' + days
    h = hours - days * 24;
    m = mins - hours * 60;
    s = secs - mins * 60;
 
    if (h<10){
      h = '0' +h
    }
    if (window.parent && window.parent.MeiroEvents) m<10){
      // 1. Request vocative
var meiroIdm = window.parent.localStorage.getItem("meiroEventsUserId");'0' +m
    }
    if (meiroId) s<10){
      var vocativeRequests = 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()'0' +s
    vocative.slice(1);}
   
   
 
 document.getElementById("heading"counter").textContentinnerHTML = capitalizedVocative'<span>' + ",d your+ order'</span>'+
 is'<span>:</span>'+
 waiting";'<span>' + h + '</span>'+
 '<span>:</span>'+
 '<span>' + m + '</span>'+
 '<span>:</span>'+
 '<span>' + s + '</span>'
 
}
} catch (e) {
// noop
}
}setInterval('countDown();

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();
}1000)
 
    </script>
  </body>
</html>

 

Back to top