SearchFormSticky

by mtenschert

JavaScript

// CSS for SearchFormSticky changes
var SearchFormStickyCSS = '<div id="SearchFormStickyCSS"><style>.towns-sidebar-left--skihire {position:sticky;top:10px;z-index:1000;transition: all 1s;} app-rating, div.cross-selling {display:none;}</style></div>';

// function for CSS removing
var SearchFormStickyCSSRemove = function() {
  $("div#SearchFormStickyCSS").remove();
};

// render CSS
var renderSearchFormStickyCSS = function() {
  $("head").after(SearchFormStickyCSS);
};

// variable for browser height
var minimumHeightOK = window.innerHeight >= 900;

// show feature if minimumHeightOK is more than requested
if (minimumHeightOK) {
  // ajax call
  $.ajax({
    url: "https://www.alpinresorts.com/de/service/cart/current",
  }).done(function(data) {
    console.log(data);
    if (data.personCount === 0 && data.itemCount === 0) {
      console.log("A/B test - " + window.innerHeight + " " + data.personCount + " " + data.itemCount);
      // SearchFormStickyCSS Output
      renderSearchFormStickyCSS();

    } else {
      console.log("A/B test XYZ - User has session" + window.innerHeight + " " + data.personCount + " " + data.itemCount);
    }
  });

  // addEventListener for changes in user settings (person count, basket)
  window.addEventListener('alpiPostOfferUpdate', function(e) {

    // add -800px top for position:sticky element
    $("div.towns-sidebar-left--skihire").css({
      "top": "-1300px"
    });
    $("app-rating, div.cross-selling").css({
      "display": "block"
    });

    // remove css-div from DOM with delay
    //setTimeout(SearchFormStickyCSSRemove, 1000);

  }, false);

}