TeaserNEU3

by mtenschert

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://www.alpinresorts.com/assets/css/main.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<br><br><br><br><br><br><br><br><br><br>


<div style="padding:10px;">

  <div class="towns-content_teaserNEW" id="anchor">
    <div class="teaserNEW_btn_container">
      <button class="teaserNEW_btn open tab_1_btn">
        
      </button>
      <button class="teaserNEW_btn tab_2_btn"></button>
      <button class="teaserNEW_btn tab_3_btn"></button>
      <button class="teaserNEW_btn tab_4_btn"></button>
      <button class="teaserNEW_btn tab_5_btn"></button>
      <button class="teaserNEW_btn tab_6_btn"></button>
    </div>
    <div class="teaserNEW_cont tab_1_cont initial_close_mobile" style="display:flex">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1 class="teaserNEW_flex_2"></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    <div class="teaserNEW_cont tab_2_cont">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    <div class="teaserNEW_cont tab_3_cont">
      <img class="teaserNEW_col_1" src="https://www.alpinresorts.com/uploads/David_Hasselhoff_klein.png" />
      <div class="teaserNEW_col_2">
        <h1></h1>
        <p></p>
        <div class="close-button click_for_hide">
          <i class="fa fa-times"></i>
        </div>
      </div>
    </div>
    <div...

CSS

/* teaser old hide */

.towns-content__hasselhoff-ad {
  display: none;
}

/* teaser old hide */

.towns-content_teaserNEW {
  margin-bottom: 15px;
  overflow: hidden;
}

/* teaser old hide */

#filterId,
#sortId {
  display: none;
}

/* teaser old search__breadcrumbs */

.search__breadcrumbs {
  font-size: 90%;
}

.teaserNEW_btn {
  background-color: #475359;
  color: white;
  float: left;
  outline: none;
  border: 1px solid white;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  cursor: pointer;
  padding: 5px 15px 5px 15px;
  font-size: 13px;
  height: 42px;
  transition: background-color 0.4s ease;
}

.teaserNEW_btn:hover {
  background-color: #34393c;
}

.teaserNEW_btn.open {
  background-color: #294878;
  color: white;
}

button.teaserNEW_btn i {
  display: none;
}

div.teaserNEW_cont {
  display: flex;
  color: #475359;
  padding: 20px;
  overflow: hidden;
  width: 100%;
  background-color: #f1f1f3;
  background-image: url("https://www.alpinresorts.com/uploads/images/the_hoff_teaserNEW.jpg");
  background-repeat: no-repeat;
  font-size: 16px;
  margin: 0px;
  font-size: 16px;
  font-style: italic;
}

div.teaserNEW_cont h1 {
  margin: 0px;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}

div.teaserNEW_cont h1 .text_transform {
  text-transform: capitalize;
}

div.teaserNEW_cont h1 strong.important-label {
  font-size: 70%;
  padding: .3em .3em;
  display: inline-block;
  margin-top: 4px;
  padding-left: .6em;
  padding-right: .6em;
  margin-right: 6px;
  font-weight: normal;
  line-height: 120%;
}

div.teaserNEW_cont h1 strong.important-label.lower-important {
  background-color: #475359;
}

div.teaserNEW_cont p {
  padding-top: 20px;
}

div.teaserNEW_cont p span.important-label {
  margin-top: 5px;
}

.teaserNEW_col_1 {
  width: 30%;
}

.teaserNEW_col_2 {
  width: 100%;
  padding: 10px 10px 10px 20px;
  border-radius: 14px;
  background-color: #ffffffb5;
}

div.teaserNEW_cont img {
  width: 170px;
 ...

JavaScript

// biggestDiscount funktioniert bei FR Shops. Da der nachgeladene discount zu der Zeit des Ausführens noch nicht da ist. -> Robin
// valid from 02/02/2019 to 04/02/2019 -> datum muss ich hineinbkommen -> Robin, denke searchForm wäre gut, aber dann muss ich warten bis diese daten da sind.
// teaser Bild wegen responsive doppelt so hoch machen
// Mail-Adresse in Group-Discounts sollte man noch klickbar machen
// tel nummer klickbar für Mobil

// In Town Shops müssen stärker hervorgehoben werden, eventuell im umkreis von XY auch dazu schreiben, siehe Booking.comn!
// Anzahl an Shops in die SearchForm schreiben: Sölden: 7 shops found. Problem: die autovervollständigung zeigt auch nearby-town sh

// Group-bookings hide wenn GeoIP: AT/CH/LI
// breadcrumb "Sölden: 7 ski hire shops found" einsetzen

// Hoff einsetzen als komplettes helles Hintergrundbild mit Bergen

// filter und sortby hide mobil/tablet entfernen vor online gang
// Gewichtung auf 50/50

// dann in alle Sprachen übersetzen


// URL paths for target country fuction

setTimeout(function() {

  var O360G_totalPath = window.location.pathname; // "/en/skiverleih/france/tirol/nauders"; window.location.pathname;
  var O360G_paths = O360G_totalPath.split("/"); // string to [en, ski-rental, france, ...]
  var O360G_lang = O360G_paths[1]; // extract language string, example: en
  var O360G_townName = O360G_paths[5]; // extract language string, example: town-name from URL
  var O360G_target_country = O360G_paths[3]; // extract language string, for exaple: france, frankreich, francia, frankrijk
  var target_country = O360G_target_country; // for html output
  // towns includes sensitive shops
  var O360G_sensitive_towns = ["serfaus", "st-anton-am-arlberg", "feichten", "kaunertaler-gletscher",
    "kuehtai", "gries-im-sellrain", "mittelberg", "vandans",
    "tschagguns", "innsbruck"
  ];

  // FR town has no 7day6payOffer: arget_Countries Arrays from URL path
  var O360G_fr_target_country = ["france", "frankreich",...