Click to fullscreen

    

// Communication between store and Live Market

let basket_counter = 0;

window.addEventListener('message', receiveMessage, false);

function receiveMessage(e) {
  try {
    const data = JSON.parse(e.data);
    if (data.type === 'lm_add_to_cart') {
      // handle adding to cart
      basket_counter++;
      const counter = document.getElementById('cart_counter');
      counter.classList.remove('hidden');
      counter.innerHTML = basket_counter;

      // if everything is ok, send information to iframe that adding to cart went successfull and show modal.
      document.querySelector('#livebox iframe').contentWindow.postMessage(
        JSON.stringify({
          type: 'lm_added_to_cart',
          org: data,
        }),
        '*'
      );
    }
  } catch (err) {}
}

var livebox = document.getElementById('livebox');
var cart = document.getElementById('cart');

document
  .querySelectorAll('[data-toggle="lm-fullscreen"]')
  .forEach(function (lm) {
    lm.addEventListener('click', function (e) {
      livebox.classList.toggle('enlarged');
      cart.classList.toggle('enlarged');
    });
  });

  

// Communication between store and Live Market let basket_counter = 0; window.addEventListener('message', receiveMessage, false); function receiveMessage(e) { try { const data = JSON.parse(e.data); if (data.type === 'lm_add_to_cart') { // handle adding to cart basket_counter++; const counter = document.getElementById('cart_counter'); counter.classList.remove('hidden'); counter.innerHTML = basket_counter; // if everything is ok, send information to iframe that adding to cart went successfull and show modal. document.querySelector('#livebox iframe').contentWindow.postMessage( JSON.stringify({ type: 'lm_added_to_cart', org: data, }), '*' ); } } catch (err) {} } var livebox = document.getElementById('livebox'); var cart = document.getElementById('cart'); document .querySelectorAll('[data-toggle="lm-fullscreen"]') .forEach(function (lm) { lm.addEventListener('click', function (e) { livebox.classList.toggle('enlarged'); cart.classList.toggle('enlarged'); }); });

           
#lm-iframe {
  height: calc(100vh - 115px);
  border: 0;
}

#livebox {
  position: relative;
}

#livebox.enlarged {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0px;
  overflow: hidden;
  z-index: 10000;
  background: #ffffff;
  overflow-y: auto !important;
}

.livebox__inner {
  max-width: 1437px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (min-width: 1200px) and (max-width: 1900px) {
  .livebox__inner {
    max-width: 1140px;
  }
}
.enlarged .livebox__inner {
  max-width: 100%;
}

.livebox__back:hover {
  color: #6995b1;
}

.livebox__back {
  font-size: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.livebox__header {
  display: none;
  justify-content: space-between;
  padding: 8px 15px;
}

#livebox.enlarged .livebox__header {
  display: flex;
}

.livebox__enlarge {
  background: #0009;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: -15px;
  right: -15px;
}

.livebox__enlarge:hover {
  opacity: 0.7;
}

.enlarged .livebox__enlarge {
  display: none;
}

.livebox__show {
  margin-top: 10px;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.livebox__show:hover {
  text-decoration: none;
}

.enlarged .livebox__show {
  display: none;
}

/* move shopping cart in fixed position when video is full screen */
#cart.enlarged {
  position: fixed;
  z-index: 10001;
  right: 73px;
  top: 18px;
}
              
  

#lm-iframe { height: calc(100vh - 115px); border: 0; } #livebox { position: relative; } #livebox.enlarged { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; margin: 0; padding: 0px; overflow: hidden; z-index: 10000; background: #ffffff; overflow-y: auto !important; } .livebox__inner { max-width: 1437px; margin: 0 auto; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media screen and (min-width: 1200px) and (max-width: 1900px) { .livebox__inner { max-width: 1140px; } } .enlarged .livebox__inner { max-width: 100%; } .livebox__back:hover { color: #6995b1; } .livebox__back { font-size: 16px; display: flex; align-items: center; cursor: pointer; } .livebox__header { display: none; justify-content: space-between; padding: 8px 15px; } #livebox.enlarged .livebox__header { display: flex; } .livebox__enlarge { background: #0009; width: 40px; height: 40px; border-radius: 50%; color: #ffffff; display: flex; justify-content: center; align-items: center; cursor: pointer; position: absolute; top: -15px; right: -15px; } .livebox__enlarge:hover { opacity: 0.7; } .enlarged .livebox__enlarge { display: none; } .livebox__show { margin-top: 10px; text-decoration: underline; cursor: pointer; text-align: center; } .livebox__show:hover { text-decoration: none; } .enlarged .livebox__show { display: none; } /* move shopping cart in fixed position when video is full screen */ #cart.enlarged { position: fixed; z-index: 10001; right: 73px; top: 18px; }