Web banners: use cases library (HTML for shopping intention)

Prerequisites

To work with web banners, first, they need to be set by the Meiro team:

1. Meiro Events must be implemented.

2. Meiro Events API connection must be set in the Administration/ Settings tab.

3. Web banners tabs must be enabled by the administrator for your user role.

4. For embedded web banners it is required to install "Element ID" on the website where the banner will be displayed.

Variables:

var getProductFromResponse = function (response) {

const product = response.data.data.cart.items[0].product

return {

imgSrc: product.thumbnail.url,

name: product.name,

price: product.price,

productUrl: product.url,

}

var displayPrice = function (price) {

return price + " €"

}

HTML CODE:

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
      <style>
        body {
          margin: 1px;
        padding: 0;
          font-family: "Proxima Nova", sans-serif;
          color: #222222;
        }

        #banner.banner {
          display: flex;
          justify-content:flex-direction: column;
          align-items: center;
          box-sizing: border-box;
          width: 100%;
          cursor: pointer;
          border-radius: 8px;
          background-color:padding: #fff;15px;
          border: 1px solid #ddd;#777777;
          cursor:background-color: pointer;white;
        }
 
        .text-container {
          padding:align-self: 20px 17px 13px 17px;
        z-index: 1;stretch;
        }
 
        .text-container h1 {
          margin: 0;
          font-size: 24px;
        color: #222222;20px;
          font-weight: 700;
        padding-top: 10px;600;
        }
 
        .text-container p {
          text-align:margin-top: center;5px;
        }

        .thumbnail-container#product-thumbnail {
          text-align:width: center;100px;
          position:margin: relative;10px;
          border-radius: 4px;
        }
     
        #placeholder#product-name {
        max-width:300px;
      }
      #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: 32px;12px;
          color:#212529;font-weight: 500;
        }
 
        
   @media (max-width:355px)#product-price {
          #placeholderfont-size: 14px;
          font-weight: 600;
        }

        .cta-button {
          max-width:250px;height: 40px;
          border-radius: 20px;
          cursor: pointer;
          border: none;
          margin-top: 10px;
          padding: 0 20px;
          background-color: #fe7f66;
          color: white;
          font-size: 14px;
          font-weight: 600;
          transition: all 0.15s ease;
        }

        .cta-button:hover {
          background-color: #eb6c52;
        }    
      </style>
    </head>
    <body>
      <div id=class="banner" onclick="goToCheckout(goToProduct()">
        <div class="text-container">
          <divh1>Are class="thumbnail-container"you interested in this product?</h1>
          <img
p>Go id="placeholder"
take src="https:another look!<//www.meiro.io/banner/Black-friday.png"
          /p>
        </div>
        <h1img id="heading">Enjoyproduct-thumbnail" thesrc="" discounts up to <span class="purple-big">67%</span></h1>
        <div id="counter"product-name"></div>
        <div id="product-price"></div>
        <button class="cta-button">View product</button>
      </div>
      <script>
        var getProductFromResponse = function (response) {
          const product = response.data.data.cart.items[0].product
          return {
            imgSrc: product.thumbnail.url,
            name: product.name,
            price: product.price,
            productUrl: product.url,
          }
        }
        var displayPrice = function (price) {
          return price + " €"
        }

        var productUrl

        if (window.parent && window.parent.MeiroEvents) {
          var bannerID = window.parent.MeiroEvents.getWebBannerId()
          var responses = window.parent.MeiroEvents.getWebBannerHttpResponses(bannerID)
          var product = getProductFromResponse(responses[0])

          document.getElementById("product-name").textContent = product.name
          document.getElementById("product-thumbnail").setAttribute("src", product.imgSrc)
          document.getElementById("product-price").textContent = displayPrice(product.price)

          productUrl = product.productUrl
        }

        function goToCheckout(goToProduct() {
          if (window.parent && window.parent.MeiroEvents) {
            window.parent.MeiroEvents.goToWebBannerUrl(
          "https://www.meiro.io"
        );productUrl)
          }
        
 
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 (m<10){
      m = '0' +m
    }
    if (s<10){
      s = '0' +s
    }
   
   
 
 document.getElementById("counter").innerHTML = '<span>' + d + '</span>'+
 '<span>:</span>'+
 '<span>' + h + '</span>'+
 '<span>:</span>'+
 '<span>' + m + '</span>'+
 '<span>:</span>'+
 '<span>' + s + '</span>'
 
}
setInterval('countDown()', 1000)
 
      </script>
    </body>
  </html>