Untitled

 avatar
unknown
plain_text
2 years ago
21 kB
7
Indexable
(function () {
  try {
    /* main variables */
   
const domain = 'SOV'; //eg LB, CIT, SOV etc
const testId = '1082043'; // ABTasty variant id
const testVar = 'V1'; // C for campaign level code , Vx for variation version
const testName = 'Sitewide : USP bar'; // location : test name, eg "Homepage : Modify search"
const debug = false;
console.log('testing');
const inQA = function () {  
  // eg: if(inQA) console.log('debug info...)

  // test for QA cookie : "testId=test|true|QA" .. if this format used!
  const re = new RegExp(`${testId}\=(test|true|qa|abt)`, 'i');
  let qaMode = ((re).test(document.cookie) == true) ? true : false;
  // test for preview mode.
  let previewMode = (window.location.search.includes('ab_project=preview' == true || document.querySelector('#ABTastyPreviewBar') != null)) ? true : false;
  // test for qa console mode.
  let consoleMode = window.location.search.includes('abtasty_qa_assistant=true');
  // test for qa console.
  let qaConsole = (document.querySelector('#abtasty-qa-assistant-frame') != null);
  return (qaMode || previewMode || consoleMode || qaConsole) ? "true" : "false";
}();

document.querySelector('body').classList.add(`${domain}${testId}`);
console.log(`${domain} : ${testId} : ${testVar} : ${testName} : TEST RUNNING : QA=${inQA}`);
    /* Variation functions */

    var eg_desktopBar = ''+
    '<div class="eg_desktop_bar eg_bar_section">'+
    '       <div class="eg_bar_wrapper">'+
    
    
    '             <div class="eg_bar feefo" eg-href="https://www.sovereign.com/about/reviews/">'+
    '                   <div class="feefo_content">'+
    '                         <span class="eg_tooltip_icon"><img class ="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <img class="flogo" src="https://editor-assets.abtasty.com/46529/63e3ce710a4721675873905.svg">'+
    '                   </div>'+
    '                   <div class="feefo eg_tooltip">'+
    '                         <p>See what our guests have said about their Sovereign experience.</p>'+
    '                         <div><a href="https://www.sovereign.com/about/reviews/" class="eg_cta">Learn more</a></div>'+
    '                   </div>'+
    '             </div>'+
    
    '             <div class="eg_bar book" eg-href="https://www.sovereign.com/about/travel-with-confidence/">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img class="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img class="twc" src="/-/media/images/travel-with-confidence/twc-sov-200px.png"></span> Travel with <br>Confidence</p>'+
    '                   </div>'+
    '                   <div class="eg_tooltip">'+
    '                         <p>Enjoy free amendment and cancellations on your bookings.</p>'+
    '                         <div><a href="https://www.sovereign.com/about/travel-with-confidence/" class="eg_cta">Learn more</a></div>'+
    '                   </div>'+
    '             </div>'+
    
    '             <div class="eg_bar book" eg-href="https://www.sovereign.com/about/travel-with-confidence/">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img class="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62e29fa1414ab1659019169.svg"></span> 24/7<br/> Concierge</p>'+
    '                   </div>'+
    '                   <div class="eg_tooltip">'+
    '                         <p>We’re on hand around the clock, before and during your holiday with us.</p>'+
    '                         <div><a href="https://www.sovereign.com/about/travel-with-confidence" class="eg_cta">Learn more</a></div>'+
    '                   </div>'+
    '             </div>'+


    '             <div class="eg_bar experience" eg-href="https://www.sovereign.com/about/">'+
    '                   <div class="experience_content">'+
    '                         <span class="eg_tooltip_icon"><img class="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c2550ac6a1657193045.svg"></span> 50 Years\' <br>Experience</p>'+
    '                   </div>'+
    '                   <div class="eg_tooltip">'+
    '                         <p>Celebrating 50 years of Sovereign Luxury Travel</p>'+
    '                         <div><a href="https://www.sovereign.com/about/" class="eg_cta">Learn more</a></div>'+
    '                   </div>'+
    '             </div>'+

/*
                  '<div class="eg_bar book" eg-href="https://www.sovereign.com/holiday-offers/winter-sun-offers">'+
                  '  <div class="book_content">'+
                  '      <span class="eg_tooltip_icon"><img class="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"/></span>'+
                  '      <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c21151c2c1657192977.svg"/></span> £100 off <br>bookings*</p>'+
                  '  </div>'+
                  '  <div class="eg_tooltip">'+
                  '      <p>Enjoy £100 off your winter sun escape. T&amp;Cs apply.</p>'+
                  '  <div>'+
                  '      <a href="https://www.sovereign.com/holiday-offers/winter-sun-offers" class="eg_cta">Learn more</a>'+
                  '  </div>'+
                  '</div>'+
*/  

    '       </div>'+
    '</div>';

    var eg_mobile_bar = ''+
    '<div class="eg_mobile_bar eg_bar_section">'+
    '       <div class="eg_bar_wrapper">'+
  
 
    '             <div class="eg_bar feefo">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="feefo_content">'+
    '                         <span class="eg_tooltip_icon"><img class ="tool" src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <img class="flogo" src="https://editor-assets.abtasty.com/46529/63e3ce710a4721675873905.svg">'+
    '                   </div>'+
    '                   <a href="https://www.sovereign.com/about/reviews/" class="feefo eg_tooltip">'+
    '                         <p>See what our guests have said about their Sovereign experience.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                </div>'+
    '             </div>'+
  
    '             <div class="eg_bar book">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img class="twc" src="/-/media/images/travel-with-confidence/twc-sov-200px.png"></span>Travel with Confidence</p>'+
    '                   </div>'+
    '                   <a href="https://www.sovereign.com/about/travel-with-confidence/" class="eg_tooltip">'+
    '                         <p>Enjoy free amendment and cancellations on your bookings.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                </div>'+
    '             </div>'+    
    
    '             <div class="eg_bar experience">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="experience_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62e29fa1414ab1659019169.svg"></span>24/7 Concierge</p>'+
    '                   </div>'+
    '                   <a href="https://www.sovereign.com/about/travel-with-confidence/" class="eg_tooltip">'+
    '                         <p>We’re on hand around the clock, before and during your holiday with us.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                </div>'+
    '             </div>'+  


    '             <div class="eg_bar experience">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="experience_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c2550ac6a1657193045.svg"></span>50 Years\' Experience</p>'+
    '                   </div>'+
    '                   <a href="https://www.sovereign.com/about/" class="eg_tooltip">'+
    '                         <p>Celebrating 50 years of Sovereign Luxury Travel</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                 </div>'+
    '             </div>'+

/*
    '             <div class="eg_bar experience">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="experience_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c362f39c91657193314.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46529/62c6c21151c2c1657192977.svg"></span> £100 off <br>bookings*</p>'+
    '                   </div>'+
    '                   <a href="https://www.sovereign.com/holiday-offers/winter-sun-offers" class="eg_tooltip">'+
    '                         <p>Enjoy £100 off your winter sun escape. T&amp;Cs apply.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                 </div>'+
    '             </div>'+
*/
    
    '       </div>'+
    '</div>';

    var eg_call = ''+
    '<a class="visible-xs eg_call" href="tel:01293 762400">'+
    '  <i class="fa fa-phone"></i>'+
    '</a>';
    /* Variation Init */
    function init() {
      /* start your code here */

      document.querySelector('.app-header').insertAdjacentHTML('beforeend',eg_desktopBar + eg_mobile_bar);
      toggleTooltip();
      
      //USP box click 
      var uspBox = document.querySelectorAll('.eg_desktop_bar .eg_bar:not(.webBooking) img:not(.tool), .eg_desktop_bar .eg_bar:not(.webBooking) span:not(.eg_tooltip_icon), .eg_desktop_bar .eg_bar:not(.webBooking) p');
      for(var i=0; i< uspBox.length; i++){
        uspBox[i].addEventListener('click',function(e){
        window.location.href = this.closest('.eg_bar').getAttribute('eg-href');
    
      });
    
}
      // image and emoji slider
      waitForFlickity(function() {

        if(window.screen.width > 767){
          var emojiSlider = new Flickity('.eg_mobile_bar .eg_bar_wrapper',{
            prevNextButtons: false,
            pageDots: false,
            contain: true,
            autoPlay: true,
            wrapAround: true,
            groupCells: true,
            groupCells: 2,
            cellAlign: 'left'
          });

          emojiSlider.on('staticClick', function(event, pointer, cellElement, cellIndex) {
            emojiSlider.playPlayer();
          });
          emojiSlider.on('pointerUp', function (event, pointer) {
            emojiSlider.player.play();
          });
          emojiSlider.on('change', function(index) {
            if(document.querySelector('.eg_mobile_bar .eg_active')){
              document.querySelector('.eg_mobile_bar .eg_active').classList.remove('eg_active');
            }
          });

        }else{
          var emojiSlider = new Flickity('.eg_mobile_bar .eg_bar_wrapper',{
            prevNextButtons: false,
            pageDots: false,
            contain: true,
            autoPlay: true,
            wrapAround: true,
            groupCells: true,
            groupCells: 1,
            cellAlign: 'left'
          });

          emojiSlider.on('staticClick', function(event, pointer, cellElement, cellIndex) {
            emojiSlider.playPlayer();
          });
          emojiSlider.on('pointerUp', function (event, pointer) {
            emojiSlider.player.play();
          });
          emojiSlider.on('change', function(index) {
            if(document.querySelector('.eg_mobile_bar .eg_active')){
              document.querySelector('.eg_mobile_bar .eg_active').classList.remove('eg_active');
            }
          });
        }
        
        document.querySelector('.eg_mobile_bar').style.opacity = '1';
        
      }); 

      document.querySelector('.app-header').insertAdjacentHTML('afterend',eg_call);

    }

    function toggleTooltip(){
      var icons = document.querySelectorAll('.eg_tooltip_icon');
      for(var i = 0; i<icons.length; i++){
        icons[i].addEventListener('click',function(){
          if(!this.parentElement.parentElement.classList.contains('eg_active')){
            if(document.querySelector('.eg_active')){
              document.querySelector('.eg_active').classList.remove('eg_active');
            }
            this.parentElement.parentElement.classList.add('eg_active');
          }else{
            this.parentElement.parentElement.classList.remove('eg_active');
          }
        })
      }
    }

    function waitForFlickity(trigger) {
      var interval = setInterval(function () {
        if (
          window.Flickity
        ) {
          clearInterval(interval);
          trigger();
        }
      }, 50);
      setTimeout(function () {
        clearInterval(interval);
      }, 10000);
    }

    function addFlickitySliderScript() {
      var scriptTag = document.createElement('script');
      scriptTag.setAttribute('src', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js');
      document.head.insertAdjacentElement('beforeend', scriptTag);
      var styleTag = document.createElement('link');
      styleTag.setAttribute('rel', 'https://unpkg.com/flickity@2/dist/flickity.min.css');
      styleTag.setAttribute('href', 'https://unpkg.com/flickity@2/dist/flickity.min.css');
      document.head.insertAdjacentElement('beforeend', styleTag);
    }
    addFlickitySliderScript();

    /* Initialize variation */
    init();
   // waitForElement(".app-header", init, 50, 15000);
  } catch (e) {
    if (debug) console.log(e, "error in Test");
  }
})();


html body .MarketingBanner{
    display: none;
}

html body .eg_bar_section{
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: -1;
    box-shadow: 0 4px 5px 1px rgb(0 0 0 / 19%);
}

html body .app-header.app-header--sticky .eg_bar_section{
    display: none;
}

html body .eg_desktop_bar .eg_bar_wrapper {
    display: flex;
    padding: 15px;
    justify-content: center;
    gap: 70px;
}

html body .eg_desktop_bar .eg_bar{
    width: max-content;
    padding-right: 30px;
    position: relative;
}


html body .eg_tooltip_icon {
    position: absolute;
    right: -40px;
    cursor: pointer;
}

html body .eg_tooltip {
    position: absolute;
    top: 150%;
    left: -30px;
    background: #fff;
    width: 200px;
    padding: 10px;
    display: none;
    text-decoration: none;
    box-shadow: 0 4px 5px 1px rgb(0 0 0 / 19%);
}



html body .eg_bar.eg_active .eg_tooltip{
    display: block;
}

html body .eg_bar.eg_active .eg_tooltip::before{
    content: '';
    width: 15px;
    height: 15px;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 35px;
    transform: rotate(45deg);
}

html body .eg_tooltip > div{
    text-align: right;
}

html body .eg_tooltip .eg_cta{
    text-align: right;
    color: #82c0b7;
}

html body .eg_tooltip .eg_cta:hover{
    color: #388378;
}

html body .eg_bar:not(:first-child)::before{
    content: '';
    height: 100%;
    width: 1px;
    background: #8c95a1;
    position: absolute;
    left: -30px;
    top: 0;
}

html body .eg_bar_wrapper p{
    margin: 0;
}


/* feefo content css */
html body .eg_desktop_bar .eg_bar.feefo {

    align-items: center;
}

html body .eg_bar.feefo > img{
    max-width: 80px;
}

html body .eg_bar.feefo .feefo_content {
    /*background: #dedee1; */
    position: relative;
    margin-left: 10px;
}


html body .feefo.eg_tooltip{
    left: 0;
}


html body .feefo_star_wrapper{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

html body .feefo_star_wrapper .eg_stars{
    display: flex;
}

html body .feefo_star_wrapper .eg_stars svg{
    width: 15px;
    height: 15px;
    margin-right: 0px;
    margin-top: 2px;
}

/* web booking */

html body .webBooking_content{
    position: relative;
}
html body .webBooking_content p{
    padding-left: 35px;
}
html body .webBooking_content .money_icon{
    position: absolute;
    left: 0;
    top: 7px;
}

/* book css  */

html body .book_content{
    position: relative;
}

html body .book_content p{
    padding-left: 35px;
}
html body .book_content .money_icon{
    position: absolute;
    left: 0;
    top: 7px;
}

/* experience */

html body .experience_content{
    position: relative;
}

html body .experience_content p{
    padding-left: 35px;
}
html body .experience_content .money_icon{
    position: absolute;
    left: 0;
    top: 7px;
}


html body .eg_mobile_bar{
    display: none;
}

html body .eg_call{
    display: none;
}


.flogo {
  height: 40px;
}
.eg_bar p {
  line-height: 1.4;
}

.twc {
    width: 40px;
    top: -6px;
    position: relative;
    right: 10px;
}


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

    html body .eg_mobile_bar{
        display: block;
        opacity: 0;
    }

    html body .eg_desktop_bar{
        display: none;
    }

    html body .eg_mobile_bar .eg_bar_wrapper {
        padding: 8px 0;
        outline: none;
    }

    html body .eg_mobile_bar .eg_bar{
        width: 50%;
        display: flex;
        height: 44px;
        padding-right: 40px;
    }

    

    html body .eg_bar_content{
        position: relative;
        width: max-content;
        margin: auto;
    }

    html body .eg_bar.feefo .eg_bar_content{

        align-items: center;
    }

    html body .eg_bar_content.eg_active .eg_tooltip{
        display: block;
        top: calc(100% + 30px);
        left: 0;
    }

    html body .eg_bar_content.eg_active .eg_tooltip::before {
        content: '';
        width: 15px;
        height: 15px;
        background: #fff;
        position: absolute;
        top: -5px;
        left: 35px;
        transform: rotate(45deg);
    }

    html body .feefo .eg_bar_content.eg_active .eg_tooltip{
        top: calc(100% + 15px);
    }

    html body .eg_bar:not(:first-child)::before{
        display: none;
    }

    html body .eg_bar.book,
    html body .eg_bar.feefo{
        border-right: 1px solid #8c95a1;
    }
}

@media screen and (max-width: 768px){
    html body .hero-inside.hero-inside-single.container{
        padding-top: 20px;
    }
    html body .heroCarousel-newHeader .hero-inside-content{
        top: unset;
    }
}

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

    html body .eg_mobile_bar .eg_bar{
        width: 100%;
    }

    html body .eg_mobile_bar .eg_bar_wrapper {
        padding: 5px 0;
    }

    html body .eg_bar_wrapper p{
        line-height: 17px;
    }
    html body .feefo_star_wrapper .eg_stars{
        margin-top: -2px;
    }
    html body .eg_mobile_bar .eg_bar{
        height: 36px;
    }

    html body .eg_tooltip_icon{
        top: -5px;
    }

    html body .eg_bar.book,
    html body .eg_bar.feefo{
        border-right: none;
    }

    html body .eg_bar .money_icon{
        top: -5px;
    }

    html body .eg_call{
        display: block;
        margin-right: 17px;
        position: absolute;
        top: 30px;
        right: 0px;
        z-index: 99999;
    }

    html body .eg_call .fa-phone{
        font-size: 2rem;
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        color: #fff;
        display: block;
    }
    html body .eg_mobile_bar .eg_bar.feefo .eg_bar_content .money_icon + br {
  display: none;
}
}
.eg_desktop_bar .eg_bar:not(.webBooking){
  cursor: pointer;
}
Editor is loading...