POP UP TEST

by pphheerroonn

HTML

<div class="gallery-placeholder" style="background:red; width:100%; height: 850px;text-align: center">
    <img src="https://ie.selectonline.com/media/catalog/product/cache/bb9e1b18b231b11cd7447bbf02a454cb/M/W/MWYA2-1_1.jpg" alt="">
</div>
<style>
.uk-only{
  display:none;
}
</style>


<!--REMOVE ABOVE-->

CSS

.gallery-placeholder {
  text-align: center;
}

.product.media {
  text-align: center !important;
}

.catalog-product-view .gallery-placeholder .fotorama .fotorama__stage {
  z-index: 2;
}

.offer-widget > div {
  display: inline-flex;
  position: relative;
  margin: auto;
  margin-top: -20px;
  z-index: 30;
  gap: 15px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  background: #f6f6f6;
  border-radius: 50px;
  padding: 5px 30px 5px 20px;
  width: auto;
  box-shadow:
    0 11px 11px hsl(0deg 0% 0% / 0.025),
    0 12px 12px hsl(0deg 0% 0% / 0.025),
    0 14px 14px hsl(0deg 0% 0% / 0.025),
    0 18px 18px hsl(0deg 0% 0% / 0.025),
    0 116px 116px hsl(0deg 0% 0% / 0.025);
  animation: srubberBandIn 2s linear infinite;
}

.offer-widget * {
  font-size: 18px;
}

.offer-widget img {
  width: 60px;
}





span.warranty-colour {
  color: #13988C;
}

span.training-colour {
  color: #ec4a42;
}

span.support-colour {
  color: #5b4495;
}

.offer-widget p {
  font-weight: 600;
}



/*ANIMATE*/
@keyframes moveit {
  0% {
    transform: translateY(0) scale3d(0.96, 0.96, 1);
  }

  20% {
    transform: translateY(-40px) scale3d(1.1, 1.1, 1);
  }

  40% {
    transform: translateY(-25px) scale3d(0.98, 0.98, 1);
  }

  60% {
    transform: translateY(-31px) scale3d(1.05, 1.05, 1);
  }

  80% {
    transform: translateY(-30px) scale3d(1.01, 1.01, 1);
  }

  100% {
    transform: translateY(-30px) scale3d(1, 1, 1);
  }
}

@keyframes moveitback {
  0% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0) scale3d(0.96, 0.96, 1);
  }
}

@keyframes scale {
  0% {
    transform: scale3d(0.96, 0.96, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

/*ANIMATE FIX THE BELOW TO MAKE IT WORK
.offer-widget.hidden, .offer-widget > div {
  transition: all 300ms ease;
  opacity: 0;
  animation: moveitback 400ms ease forwards;
  will-change: transform;
}*/
.product-info-wrapper .offer-widget div.visible {
  opacity: 1;
  animation: moveit...

JavaScript

var delayInMilliseconds = 10000; // 10 seconds

/* INSERTION */


// The point where it is to be instered <
const insertionPoint = document.querySelector('.fotorama__stage');

// Create a new div element
const widgetDiv = document.createElement('div');
widgetDiv.classList.add('offer-widget');
widgetDiv.classList.add('visible');
widgetDiv.setAttribute('id','offer-pop-up');

// Set the innerHTML of the widget div
  widgetDiv.innerHTML = `
<div class="message-1 visible">
<img src="https://uk.selectonline.com/media/catalog/product/cache/13d13542b9c97d2a682a3f467717112b/s/e/select_warranty_3_1035.png"><p class="ie-only message-1">3 year extended <span class="warranty-colour">warranty</span> included worth up to €299</p>
<p class="uk-only message-1">3 year extended <span class="warranty-colour">warranty</span> included worth up to €299</p>
</div>
<div class="message-2">
<img src="https://ie.selectonline.com/media/catalog/product/cache/a622edf93f5a1132f403eaed994563ce/s/e/select_support_gtn_3.png">
<p class="uk-only message-2"><span class="training-colour">Training</span> course included worth £30</p>
<p class="ie-only message-2"><span class="training-colour">Training</span> course included worth €30</p>
</div>
<div class="message-3">
<img src="https://ie.selectonline.com/media/catalog/product/cache/a622edf93f5a1132f403eaed994563ce/s/e/select_tech_7.png">
<p class="uk-only message-3">7-Day <span class="support-colour">tech support</span> included worth £15</p>
<p class="ie-only message-3">7-Day <span class="support-colour">tech support</span> included worth €15</p>
</div>
<div class="message-4">
<p class="uk-only message-3">Free, fast delivery</p>
<p class="ie-only message-3">Free, next-day delivery</p>
</div>
<div class="message-5">
<p class="uk-only message-3">Free click and collect</p>
<p class="ie-only message-3">Free click and collect</p>
</div>
<div class="message-6">
<p class="uk-only message-3">Split your payments with 0% interest</p>
<p class="ie-only...