Untitled

 avatar
unknown
plain_text
2 years ago
5.1 kB
4
Indexable
html > body {
    padding-bottom: 75px !important;
}

html body .ym_stickyFooter{
    width: 100%;
    background: #fff;
    padding: 8px 25px;
    z-index: 999;

}

html body .ym_sticky_content{
    max-width: 1170px;
    margin: auto;
    display: flex;
}

html body .ym_sticky_content > div{
    width: 50%;
}

html body .ym_sticky_content p{
    margin: 0;
    font-size: 18px;
    line-height: 22px;
}

html body .ym_sticky_price{
    position: relative;
}

html body .ym_sticky_price::after{
    content: ' ';
    display: inline-block;
    width: 1px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    background: #c3c3c3;
    transform: translate(0, -50%);
}

html body .ym_sticky_price > p{    
    font-size: 12px;
    font-weight: 600;
    color: #005470;
}
html body .ym_sticky_price > div{
    display: flex;
    align-items: baseline;
}
html body .ym_sticky_price > div h2{
    font-size: 30px;
    font-weight: 700;
}
html body .ym_sticky_price > div p{
    margin-left: 15px;
    font-weight: 600;
    font-size: 14px;
    color: #005470;
}
html body .ym_sticky__btn{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

html body .ym_sticky__btn .ym_btn{
    font-family: untitledsans,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
    background: #02324f;
    color: #fff;
    padding: 0.83em 1.11em;
    border-radius: 4px;
    font-weight: 600;
    transition: all .15ms ease;
    font-size: 18px;
    line-height: 22px;
    text-transform: uppercase;
    letter-spacing: .11em;
    border: 1px solid transparent;
    cursor: pointer;
}

html body .ym_sticky__btn .ym_btn:hover{
    background-color: #005470;
    border-color: #005470;
}
html body .ym_sticky__btn .ym_btn:focus-visible{
    outline: -webkit-focus-ring-color auto 1px;
}
html body .ym_sticky__btn .ym_btn:focus{
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

html body .ym_phone{
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
}


@media screen and (max-width: 767px) {
    html body .ym_stickyFooter{
        padding: 8px 20px;
    }
    html body .ym_sticky_content{
        flex-direction: column;
        width: max-content;
    }
    html body .ym_sticky_price::after{
        display: none;
    }
    html body .ym_sticky_content > div{
        width: 100%;
    }
    html body .ym_sticky__btn{
        justify-content: inherit;
    }
    html body .ym_sticky_price > p{
        font-size: 10px;
    }
    html body .ym_sticky_price > div h2{
        font-size: 22px;
    }
    html body .ym_sticky_price > div p{
        margin-left: 8px;
        font-size: 13px;
        
    }

    html body .ym_phone{
        font-size: 13px;
        border: 1px solid #005470;
        padding: 5px 10px;
        border-radius: 2px;
        color: #005470;
    }
    html body .ym_sticky__btn .ym_btn{
        padding: 5px 10px;
        letter-spacing: 0;
            font-size: 14px;
    }
}

@media screen and (max-width: 359px) {
    html body .ym_phone,
    html body .ym_sticky__btn .ym_btn{
        font-size: 11px;
    }
}

@media screen and (max-width: 319px) {
    html body .ym_sticky_price > div p {
        font-size: 11px;
    }
    html body .ym_phone,
    html body .ym_sticky__btn .ym_btn{
        font-size: 9px;
    }
}

try {
    /* Variation functions */
    var ym_stickyFooter = ''+
    '<div class="ym_stickyFooter">'+
    '     <div class="ym_sticky_content">'+
    '           <div class="ym_sticky_price">'+
    '                 <p>PRICE FROM</p>'+
    '                 <div>'+
    '                      <h2>$7,350</h2>'+
    '                      <p>per person, double occupancy</p>'+
    '                 </div>'+
    '           </div>'+
    '           <div class="ym_sticky__btn">'+
    '                 <a class="ym_phone" href="tel:18449211471"><i class="nav-phone__icon"></i><p>888-477-9921</p></a>'+
    '                 <p class="ym_btn">CUSTOMIZE THIS TRIP</p>'+
    '           </div>'+
    '     </div>'+
    '</div>';
      document.querySelector('.page-node-type-op-trip').insertAdjacentHTML('beforeend',ym_stickyFooter);
       document.querySelector('.ym_sticky_price h2').textContent=document.querySelector('#trip-type-row-desc .price_field').textContent;
      document.querySelector('.ym_btn').addEventListener('click',function(){
        document.querySelector('#price-section #cta-section button.btn-primary').click();
      });

  } catch (e) {
 console.log(e, "error in Test");
  }

var fixmeTop = $('#trip-type-row-desc').offset().top;
$(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
        $('.ym_stickyFooter').css({
            position: 'fixed',
            bottom: '0',
            left: '0'
        });
    }
    else
    {
        $('.ym_stickyFooter').css({
            position: 'inherit',
            left: '0'
        });
    }
    

});