Untitled

 avatar
unknown
plain_text
2 years ago
17 kB
4
Indexable
(function () {
  try {
    /* main variables */
    var debug = 0;
    var variation_name = "";

    /* all Pure helper functions */
    /* Variation functions */

    var feefoStars =''+ 
    '      <svg role="img" width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Filled star</title><path d="M7.35626 2.41743L5.89159 5.52017L2.61459 6.01933C2.02693 6.10838 1.79141 6.86532 2.21758 7.29886L4.58842 9.71263L4.02767 13.1224C3.92674 13.7387 4.54804 14.2004 5.06842 13.9121L8 12.3021L10.9316 13.9121C11.452 14.198 12.0733 13.7387 11.9723 13.1224L11.4116 9.71263L13.7824 7.29886C14.2086 6.86532 13.9731 6.10838 13.3854 6.01933L10.1084 5.52017L8.64374 2.41743C8.38131 1.86438 7.62094 1.85735 7.35626 2.41743Z" fill="#fff"></path></svg>'+ 
    '      <svg role="img" width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">'+ 
    '          <title>Filled star</title>'+ 
    '          <path d="M7.35626 2.41743L5.89159 5.52017L2.61459 6.01933C2.02693 6.10838 1.79141 6.86532 2.21758 7.29886L4.58842 9.71263L4.02767 13.1224C3.92674 13.7387 4.54804 14.2004 5.06842 13.9121L8 12.3021L10.9316 13.9121C11.452 14.198 12.0733 13.7387 11.9723 13.1224L11.4116 9.71263L13.7824 7.29886C14.2086 6.86532 13.9731 6.10838 13.3854 6.01933L10.1084 5.52017L8.64374 2.41743C8.38131 1.86438 7.62094 1.85735 7.35626 2.41743Z"'+ 
    '              fill="#fff"></path></svg>'+
    '      <svg role="img" width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Filled star</title><path d="M7.35626 2.41743L5.89159 5.52017L2.61459 6.01933C2.02693 6.10838 1.79141 6.86532 2.21758 7.29886L4.58842 9.71263L4.02767 13.1224C3.92674 13.7387 4.54804 14.2004 5.06842 13.9121L8 12.3021L10.9316 13.9121C11.452 14.198 12.0733 13.7387 11.9723 13.1224L11.4116 9.71263L13.7824 7.29886C14.2086 6.86532 13.9731 6.10838 13.3854 6.01933L10.1084 5.52017L8.64374 2.41743C8.38131 1.86438 7.62094 1.85735 7.35626 2.41743Z" fill="#fff"></path></svg>'+ 
    '      <svg role="img" width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">'+ 
    '              <title>Filled star</title>'+ 
    '              <path d="M7.35626 2.41743L5.89159 5.52017L2.61459 6.01933C2.02693 6.10838 1.79141 6.86532 2.21758 7.29886L4.58842 9.71263L4.02767 13.1224C3.92674 13.7387 4.54804 14.2004 5.06842 13.9121L8 12.3021L10.9316 13.9121C11.452 14.198 12.0733 13.7387 11.9723 13.1224L11.4116 9.71263L13.7824 7.29886C14.2086 6.86532 13.9731 6.10838 13.3854 6.01933L10.1084 5.52017L8.64374 2.41743C8.38131 1.86438 7.62094 1.85735 7.35626 2.41743Z"'+ 
    '                  fill="#fff"></path></svg>'+
    '      <svg role="img" width="22" height="22" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Filled star</title><path d="M7.35626 2.41743L5.89159 5.52017L2.61459 6.01933C2.02693 6.10838 1.79141 6.86532 2.21758 7.29886L4.58842 9.71263L4.02767 13.1224C3.92674 13.7387 4.54804 14.2004 5.06842 13.9121L8 12.3021L10.9316 13.9121C11.452 14.198 12.0733 13.7387 11.9723 13.1224L11.4116 9.71263L13.7824 7.29886C14.2086 6.86532 13.9731 6.10838 13.3854 6.01933L10.1084 5.52017L8.64374 2.41743C8.38131 1.86438 7.62094 1.85735 7.35626 2.41743Z" fill="#fff"></path></svg>';

    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.citalia.com/about/reviews/">'+
    '                   <div class="feefo_content">'+
    '                         <span class="eg_tooltip_icon"><img class ="tool" src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <img class="flogo" src="https://editor-assets.abtasty.com/46452/62e2964319f5a1659016771.svg">'+ 
    '                   </div>'+
    '                   <a href="https://www.citalia.com/about/reviews/" class="feefo eg_tooltip">'+
    '                         <p>See what our guests have said about their Citalia experience.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '             </div>'+
    
    '             <div class="eg_bar book" eg-href="https://www.citalia.com/about/travel-with-confidence/">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img class="twc" src="/-/media/bynder/citalia-non-geography/travel-with-confidence/twc-2022-cit-001-300338-original.png"></span>Travel with <br>Confidence</p>'+
    '                   </div>'+
    '                   <a href="https://www.citalia.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 class="eg_bar book" eg-href="https://www.citalia.com/about/travel-with-confidence/">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46452/62e29f24351331659019044.svg"></span> 24/7<br/> Concierge</p>'+
    '                   </div>'+
    '                   <a href="https://www.citalia.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 class="eg_bar experience" eg-href="https://www.citalia.com/about/">'+
    '                   <div class="experience_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce2f10e601657196079.svg"></span> 90 Years\' <br>Experience</p>'+
    '                   </div>'+
    '                   <a href="https://www.citalia.com/about/" class="eg_tooltip">'+
    '                         <p>Helping guests discover the very best of Italy for over 90 years.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '             </div>'+
    
    '       </div>'+
    '</div>';

    var eg_mobile_bar = ''+
    '<div class="eg_mobile_bar eg_bar_section">'+
    '       <div class="eg_bar_wrapper">'+
    
    '             <div class="eg_bar book">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="book_content">'+
    '                         <span class="eg_tooltip_icon"><img class ="tool" src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <img class="flogo" src="https://editor-assets.abtasty.com/46452/62e2964319f5a1659016771.svg">'+ 
    '                   </div>'+
    '                   <a href="https://www.citalia.com/about/reviews/" class="eg_tooltip">'+
    '                         <p>See what our guests have said about their Citalia experience.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                </div>'+
    '             </div>'+
    
    '             <div class="eg_bar feefo">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="feefo_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img class="twc" src="/-/media/bynder/citalia-non-geography/travel-with-confidence/twc-2022-cit-001-300338-original.png"></span>Travel with <br>Confidence</p>'+
    '                   </div>'+
    '                   <a href=https://www.citalia.com/about/travel-with-confidence/" class="feefo 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 feefo">'+
    '                <div class="eg_bar_content">'+
    '                   <div class="feefo_content">'+
    '                         <span class="eg_tooltip_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46452/62e29f24351331659019044.svg"></span> 24/7<br/> Concierge</p>'+
    '                   </div>'+
    '                   <a href="https://www.citalia.com/about/" class="feefo 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/46452/62c6ce768919c1657196150.svg"></span>'+
    '                         <p><span class="money_icon"><img src="https://editor-assets.abtasty.com/46452/62c6ce2f10e601657196079.svg"></span> 90 Years\' <br>Experience</p>'+
    '                   </div>'+
    '                   <a href="https://www.citalia.com/about/"  class="eg_tooltip">'+
    '                         <p>Helping guests discover the very best of Italy for over 90 years.</p>'+
    '                         <p class="eg_cta">Learn more</p>'+
    '                   </a>'+
    '                 </div>'+
    '             </div>'+
    
    '       </div>'+
    '</div>';

    /* 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.flogo, .eg_desktop_bar .eg_bar 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() {
        var emojiSlider = new Flickity('.eg_mobile_bar .eg_bar_wrapper',{
          prevNextButtons: false,
          pageDots: false,
          contain: true,
          autoPlay: true,
          pauseAutoPlayOnHover: true,
          wrapAround: true,
        });

        document.querySelector('.eg_mobile_bar').style.opacity = '1';
        
      }); 

    }

    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" + variation_name);
  }
})();


html body .MarketingBanner{
    display: none;
}

html body .eg_bar_section{
    position: absolute;
    width: 100%;
    background: #005d61;
    z-index: -1;
}

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

html body .eg_bar_section .eg_bar_wrapper *{
    color: #fff;
}

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;
}



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

html body .eg_bar .eg_tooltip p{
    color: #000 !important;
}

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_bar.eg_active .eg_tooltip .eg_cta{
    text-align: right;
    color: #82c0b7 !important;
}

html body .eg_desktop_bar .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 */

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



html body .eg_bar.feefo .feefo_content {
    position: relative;
}


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: 40px;
}
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;
}

.twc {
    width: 40px;
    top: -4px;
    position: relative;
    right: 4px;
}
@media screen and (min-width:1200px){
 .eg_desktop_bar {
   position: relative !important;
 }
}

@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: 100%;
        display: flex;
        height: 44px;
    }
    

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

    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 .eg_cta{
        text-align: right;
        color: #82c0b7 !important;
    }

    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 .eg_mobile_bar .eg_bar.feefo .eg_bar_content .money_icon + br {
  display: none;
}
}
.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{
  cursor: pointer;
}
Editor is loading...