Untitled

(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";
    var $;
    /* all Pure helper functions */
    function waitForElement(selector, trigger, delayInterval, delayTimeout) {
      var interval = setInterval(function () {
        if (
          document &&
          document.querySelector(selector) &&
          document.querySelectorAll(selector).length > 0
        ) {
          clearInterval(interval);
          trigger();
        }
      }, delayInterval);
      setTimeout(function () {
        clearInterval(interval);
      }, delayTimeout);
    }
    function live(selector, event, callback, context) {
      // helper for enabling IE 8 event bindings
      function addEvent(el, type, handler) {
        if (el.attachEvent) el.attachEvent("on" + type, handler);
        else el.addEventListener(type, handler);
      }
      // matches polyfill
      this &&
        this.Element &&
        (function(ElementPrototype) {
        ElementPrototype.matches =
          ElementPrototype.matches ||
          ElementPrototype.matchesSelector ||
          ElementPrototype.webkitMatchesSelector ||
          ElementPrototype.msMatchesSelector ||
          function(selector) {
          var node = this,
              nodes = (node.parentNode || node.document).querySelectorAll(selector),
              i = -1;
          while (nodes[++i] && nodes[i] != node);
          return !!nodes[i];
        };
      })(Element.prototype);
      // live binding helper using matchesSelector
      function live(selector, event, callback, context) {
        addEvent(context || document, event, function(e) {
          var found,
              el = e.target || e.srcElement;
          while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
          if (found) callback.call(el, e);
        });
      }
      live(selector, event, callback, context);
    }
    /* Variation functions */
    /* Variation Init */
    function init() {
      /* start your code here */
      var featured = document.querySelector('.category-featured');
      if(featured){
        document.querySelector('.category-landing .row .sidebar').insertAdjacentElement('beforebegin', featured);
        document.querySelector('.category-featured .product-tile .name').insertAdjacentHTML('beforebegin','<div class="eg_featured-title">TRENDING NOW</div>');
        document.querySelector('.product-tile .data-price').nextSibling.textContent = '';
        document.querySelector('.product-tile .data-price').insertAdjacentHTML('afterend','<p class="eg_quantity">Quantity</p>');
        var getPrice = document.querySelector('.product-tile .bottle-price-bar .price').innerHTML.replace('.00','')
        document.querySelector('.product-tile .data-price').insertAdjacentHTML('afterend','<p class="eg_price"> <span class="eg_from">From </span><span class="eg_total">'+getPrice+'</span> <span class="eg_dozen">/ Dozen</span></p>');
        var url = document.querySelector('.category-featured .product-tile a').getAttribute('href');
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            var fetchDetails = document.createElement('div');
            fetchDetails.innerHTML = this.responseText;
            var firstParagraph = fetchDetails.querySelector('.product-detail .product-detail-intro-copy .inner > p').innerHTML.split('<br>')[0];
            if(firstParagraph){
              document.querySelector('.category-featured .product-tile .name').insertAdjacentHTML('afterend','<p class="eg_description">'+firstParagraph+'</p>');
            }
          }
        };
        xhttp.open("GET",url, true);
        xhttp.send();  
        if(window.screen.width < 768){
          var imgContainer = document.querySelector('.category-landing .category-featured .product-tile.thin .top .image-container');
          document.querySelector('.category-featured .product-tile.thin .right').insertAdjacentElement('afterbegin',imgContainer)
          var productName = document.querySelector('.category-featured .product-tile .name');
          document.querySelector('.category-featured .product-tile .right').insertAdjacentElement('afterbegin',productName);
          document.querySelector('.category-featured .product-tile .right').insertAdjacentHTML('afterbegin','<div class="eg_featured-title">FEATURED ITEM</div>');
        }
      }
      if(window.screen.width < 1024){
        // moved summary in mobile
        var summary = document.querySelector('.refine .summary');
        if(summary){
          document.querySelector('.refine .refine-filters').insertAdjacentElement('afterend',summary)
        }
      }else{
        // sort by moved
        var sortBy = document.querySelector('.spSelect-container');
        document.querySelector('.refine .filter-list').insertAdjacentElement('beforeend',sortBy);
        document.querySelector('.spSelect-container .spSelect-label .spSelect-label-text').innerHTML = 'Sort by';
        document.querySelectorAll('.filter-list ul ul').forEach(function(e){
          var items = e.querySelectorAll('li').length;
          var columnCalc = Math.ceil(items/5);
          if(items > 5){
            if( e.parentElement.getAttribute('data-category') == 'variety'){
              e.classList.add('eg_collapse');
              document.querySelector('.filter-list .category[data-category="variety"] ul').insertAdjacentHTML('beforeend','<p class="eg_more">See '+(items - 5)+' more options</p>')
              document.querySelector('.filter-list .category[data-category="variety"] ul').insertAdjacentHTML('beforeend','<p class="eg_less">See less options</p>')
              if(columnCalc > 5){
                columnCalc = 5;
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }else{
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }
            }
            if( e.parentElement.getAttribute('data-category') == 'region'){
              e.classList.add('eg_collapse');
              document.querySelector('.filter-list .category[data-category="region"] ul').insertAdjacentHTML('beforeend','<p class="eg_more">See '+(items - 5)+' more options</p>')
              document.querySelector('.filter-list .category[data-category="region"] ul').insertAdjacentHTML('beforeend','<p class="eg_less">See less options</p>')
              if(columnCalc > 4){
                columnCalc = 4;
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }else{
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }
            }
            if( e.parentElement.getAttribute('data-category') == 'producer'){
              e.classList.add('eg_collapse');
              document.querySelector('.filter-list .category[data-category="producer"] ul').insertAdjacentHTML('beforeend','<p class="eg_more">See '+(items - 5)+' more options</p>')
              document.querySelector('.filter-list .category[data-category="producer"] ul').insertAdjacentHTML('beforeend','<p class="eg_less">See less options</p>')
              if(columnCalc > 3){
                columnCalc = 3;
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }else{
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }
            }
            if( e.parentElement.getAttribute('data-category') == 'vintage'){
              e.classList.add('eg_collapse');
              document.querySelector('.filter-list .category[data-category="vintage"] ul').insertAdjacentHTML('beforeend','<p class="eg_more">See '+(items - 5)+' more options</p>')
              document.querySelector('.filter-list .category[data-category="vintage"] ul').insertAdjacentHTML('beforeend','<p class="eg_less">See less options</p>')
              if(columnCalc > 3){
                columnCalc = 3;
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }else{
                e.style.gridTemplateColumns = 'repeat('+columnCalc+', 1fr)';
              }
            }
          }
        })
        document.addEventListener('click',function(e){
          var getClass = e.target.parentElement.classList;
          if(e.target.classList.contains('eg_more') || e.target.classList.contains('eg_less')){
            return false;
          }else{
            document.querySelectorAll('.category.expanded').forEach(function(el){
              if(el.classList != getClass){
                el.querySelector('.category-label').click();
              }
            })
          }
        })
        var interval = setInterval(function(){
          if(document.querySelectorAll('.category.expanded').length > 0){
            document.querySelectorAll('.category.expanded').forEach(function(el){
              el.querySelector('.category-label').click();
            })
          }
        },100)
        setTimeout(function(){
          clearInterval(interval)
        },5000);
      }
      live('.eg_more','click',function(){
        this.parentElement.classList.add('eg_expand');
      })
      live('.eg_less','click',function(){
        this.parentElement.classList.remove('eg_expand');
      })
    }
    /* Initialise variation */
    waitForElement(".spSelect-container .spSelect-label .spSelect-label-text", init, 100, 25000);
  } catch (e) {
    if (debug) console.log(e, "error in Test" + variation_name);
  }
})();


html body .category-landing .category-featured{
  padding: 30px;
  border: 1px solid #eaeaea;
}

html body .category-featured > h2{
  display: none;
}

html body .category-featured .product-tile .name{
  font-size: 16px;
  font-weight: 700;
}

html body .eg_featured-title {
  font-weight: 700;
  color: #830c2c;
  margin-bottom: 10px;
  font-size: 18px;
}

html body .category-landing .category-featured .product-tile .add-to-cart button{
  background-color: #830c2c;
  border-color: #830c2c;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  padding: 0 30px;
}

html body .product-tile .add-to-cart .form-row .submit-col{
  width: max-content !important;
}

html body .product-tile .add-to-cart .form-row .form-col{
  width: 22% !important;
}

html body .product-tile .add-to-cart .form-row .form-col input{
  height: 50px;
  text-align: center;
  font-size: 18px;
}

html body .product-tile .eg_quantity {
  font-size: 16px;
}

html body .product-tile .eg_price {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

html body .product-tile .eg_price span.eg_total {
  font-weight: 700;
  font-size: 32px;
}

html body .product-tile .add-to-cart{
  margin: 0;
}

html body .filter-list .filter-item .box + span{
  display: none;
}


html body .refine .summary{
  color: #000;
  padding: 0;
  background-color: transparent;
  display: flex;
}

html body .refine .summary .summary-items{
  display: flex;
  gap: 8px;
}

html body .refine .summary .summary-items .item{
  position: relative;
  width: max-content;
  padding: 5px 30px 5px 10px;
  background: #f3e7ea;
  border-radius: 5px;
  border: 1px solid #d0c6c9;
  margin: 0;
  font-size: 16px !important;
  font-weight: 400;
}
html body .refine .summary .summary-items .item a{
  color: #b81237 !important;
  position: absolute !important;
  left: calc(100% - 22px) !important;
  font-size: 20px !important;
}

html body .refine .summary .heading{
  display: none;
}

html body .refine .summary .actions a{
  color: #b81237 !important;
  text-decoration: underline;
  font-weight: 500;
  text-transform: inherit;
  font-size: 16px !important;
}

html body .filter-list .filter-item.active .box{
  background: #830c2c;
  border: none;
  border-radius: 3px;
}

html body .filter-list .filter-item.active .box .icon{
  color: #fff;
}

@media screen and (min-width: 768px){
  html body .category-landing .category-featured .product-tile{
    display: flex;
  }

  html body .category-featured .product-tile .left{
    width: 100% !important;
  }

  html body .category-featured .product-tile .right{
    width: max-content !important;
  }
}

@media screen and (min-width: 1024px){

  html body .category-landing .row .sidebar,
  html body .category-landing .row .content{
    width: 100% !important;
  }   

  html body .refine .refine-filters{
    display: flex !important;
    flex-direction: column-reverse;
  }

  html body .filter-list > ul {
    display: flex;
    justify-content: space-between;
    width: 75%;
    float: left;
  }


  html body .filter-list .spSelect-container{
    width: 22%;
    float: right;
  }

  html body .filter-list .spSelect-container .spSelect-label{
    border: none;
    box-shadow: none;
    text-align: right;
    background-color: transparent !important;
  }

  html body .filter-list .spSelect-container .spSelect-label .spSelect-label-text{
    font-size: 18px;
    color: #830c2c;
    font-weight: 600;
  }

  html body .filter-list .spSelect-container .spSelect-label .spIconSelect div{
    font-size: 24px;
  }

  html body .filter-list li.category .icon, 
  html body .filter-list li.filter-parent .icon{
    width: max-content;
  }

  html body .filter-list li.category .expander{
    left: calc(100% - 42px);
    top: 4px;
    pointer-events: none;
  }

  html body .refine .filter-list{
    margin-top: 40px;
    border-bottom: 1px solid #eaeaea;
  }

  html body .filter-list ul ul{
    position: absolute;
    z-index: 999;
    background: #fff;
    border: 1px solid #f2f2f2;
    width: max-content;
    padding: 0 15px 15px !important;
  }

  html body .filter-list .category.expanded ul{
    display: grid !important;
  }

  html body .filter-list .category ul.eg_collapse li{
    padding-right: 200px;
  }

  html body .filter-list .category ul.eg_expand li,
  html body .filter-list .category ul li{
    padding-right: 15px;
  }

  html body .filter-list .category ul.eg_collapse{
    max-width: 220px;
    overflow: hidden;
    padding-bottom: 40px !important;
  }

  html body .filter-list .category ul.eg_expand{
    max-width: 999em;
    transition: max-width 1s ease-in-out;
  }

  html body .filter-list .category ul li {
    padding-right: 15px;
  }

  html body .filter-list .category-label, 
  html body .filter-list .filter-item{
    border-bottom: none;
  }
  html body .filter-list .category-label{
    padding-right: 30px !important;
  }
  html body .filter-list .filter-item{
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 0;
    width: max-content;
    min-width: 144px;
  }

  html body .filter-list .filter-item .box{
    top: calc(100% - 10px);
  }

  html body .category-landing .category-featured .product-tile.thin .top{
    padding-left: 160px;
    padding-right: 60px;
  }

  html body .category-landing .product-list .product-tile-updated{
    width: 33% !important;
  }

  html body .category-landing .row .content > section,
  html body .category-landing .row .content .search-details{
    display: none;
  }

  html body .filter-list .category ul .eg_more {
    position: absolute;
    bottom: 0;
    left: 15px;
    color: #830c2c;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
  }

  html body .filter-list .category ul.eg_expand .eg_more{
    display: none;
  }

  html body .filter-list .category ul .eg_less{
    color: #830c2c;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    display: none;
    position: absolute;
    bottom: 0;
    right: 55px;
  }

  html body .filter-list .category ul.eg_expand .eg_less{
    display: block !important;
  }
}

@media screen and (max-width: 1300px){

  html body .filter-list .filter-item{
    max-width: 170px;
  }
}

@media screen and (max-width: 1023px){

  html body .category-landing .row .content > section{
    padding-top: 0;
  }

  html body .category-landing .search-details .heading{
    display: none;
  }
  html body .refine .dd-button{
    background-color: transparent;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid #f2f2f2;
  }

  html body .refine a.refine-dd{
    color: #000;
  }

  html body .refine a.refine-dd .icon{
    color: #830c2c;
  }

  html body .filter-list li.category .expander, 
  html body .filter-list li.filter-parent .expander{
    right: 14px;
  }

  html body .category-landing .category-featured{
    margin-bottom: 20px;
  }

  html body .filter-list .filter-item{
    max-width: 100%;
  }

  html body .filter-list ul ul{
    padding-left: 0;
  }
}

@media screen and (max-width: 767px){

  html body .category-landing .category-featured{
    padding: 8px;
  }

  html body .category-landing .category-featured .product-tile .top,
  html body .category-landing .category-featured .eg_description{
    display: none;
  }

  html body .category-landing .category-featured .product-tile .right{
    padding-left: 140px;
    padding-top: 0;
    min-height: 130px;
    position: relative;
  }

  html body .product-tile .eg_price{
    line-height: 28px;
    gap: 0;
    margin: 6px 0;
    font-size: 16px;
  }
  html body .product-tile .eg_price span.eg_total,
  html body .product-tile .eg_price span.eg_from{
    margin-right: 5px;
  }

  html body .product-tile .eg_price span.eg_total{
    font-size: 28px;
  }

  html body .product-tile .add-to-cart .form-row .submit-col{
    width: 100% !important;
  }

  html body .product-tile .add-to-cart .form-row{
    display: flex;
  }

  html body .category-landing .category-featured .product-tile .add-to-cart button{
    padding: 0 !important;
  }

  html body .product-tile .add-to-cart .form-row .form-col{
    width: 80px !important;
  }

}