SortierungNEU

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>


<div class="product">Shop 1</div>
<div class="product">Shop 1</div>
<div class="product">Shop 1</div>
<div class="product">Shop 1</div>
<div class="product">Shop 1</div>
<div class="product">Shop 1</div>
<div class="product not-in-town">Not 1</div>
<div class="product not-in-town">Not 1</div>
<div class="product not-in-town">Not 1</div>
<div class="product not-in-town">Not 1</div>

<input ng-model="option.value" class="filter__slider ng-valid ng-dirty ng-valid-parse ng-touched" type="range" min="1" max="16" value="20" step="1">


  <br> <br>
  
  <ul id="filterId" class="filter__list">

    <input ng-class="{'filter__disabled' : count < 1}" ng-click="showCursorInformation('cursor-information-filter'); filterChangedEvent()" ng-disabled="count < 1" class="style-checkbox ng-pristine ng-untouched ng-valid" ng-model="option.selected" type="checkbox"
      id="virtualshop" name="option.name" ng-false-value="''">
    <input ng-class="{'filter__disabled' : count < 1}" ng-click="showCursorInformation('cursor-information-filter'); filterChangedEvent()" ng-disabled="count < 1" class="style-checkbox ng-pristine ng-untouched ng-valid" ng-model="option.selected" type="checkbox"
      id="topshop" name="option.name" ng-false-value="''">
    <input ng-class="{'filter__disabled' : count < 1}" ng-click="showCursorInformation('cursor-information-filter'); filterChangedEvent()" ng-disabled="count < 1" class="style-checkbox ng-pristine ng-untouched ng-valid" ng-model="option.selected" type="checkbox"
      id="discountshop" name="option.name" ng-false-value="''">
    <input ng-class="{'filter__disabled' : count < 1}"...

CSS

.product__sort-by360 {
    border-bottom-left-radius: 10px;
    border-bottom: 1px solid #d7d7d7;
    border-left: 1px solid #d7d7d7;
    background: #ffffff;
    display: block;
    margin: 1px 0 12px;
    overflow: auto;
    min-width: 768px;
    color: #fff;
  }

  .product__sort-by360 h3 {
    height: 65px;
    float: left;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
  }

  .sortLocatedIn {
    font-size: 95%;
    color: #475359;
    border-radius: 5px;
  }

  .sortLocatedIn:hover {
    background-color: white !important;
    cursor: default !important;
  }

  h3.sortListItem {
    border-right: 1px solid white;
    padding: 10px;
    padding-right: 10px;
    min-width: 176px;
    line-height: 110% !important;
  }

  h3.sortListItem.active {
    background-color: #b62125;
  }

  h3.sortListItem.active i {
    visibility: visible;
  }

  h3.sortListItem.inactive {
    background-color: #475359;
    transition: background-color 0.3s ease;
  }

  h3.sortListItem.inactive i {
    transition: visibility 0.3s ease;
    visibility: hidden;
  }

  h3.sortListItem:hover {
    background-color: #b62125;
    cursor: pointer;
  }

  h3.sortListItem small {
    font-size: 85%;
    color: #cccccc;
  }

  h3:first-child.sortListItem span {
    font-size: 90%;
    font-style: italic;
  }

  h3:first-child.sortListItem small {
    color: #b62125;
  }

  h3 i.sortIcon {
    font: normal normal normal 20px/1.0 FontAwesome;
    vertical-align: text-bottom;
    margin-left: 9px;
    float: right;
  }

  div.inputField {
    float: left;
    width: 237px;
    padding: 10px;
    padding-top: 7px;
    line-height: 120%;
  }

  div.inputField br.hideDesk {
    display: none;
  }

  div.inputField span {
    color: #333333;
    font-style: italic;
  }

  span#sortId {
    display: none;
  }

  div#loading-overlay {
    margin-top: 140px !important;
  }

  .alpin-filter-option-distance-selector__text,
  .filter__slider,
  .filter__slider-min,
  .filter__slider-mid,
 ...

JavaScript

// pay attention, dont show this function for /ski school/ !!!
        // pay attention, the feature doenst run correctly in jsfddle, because of missing lang_path


        // timeout for optimize360 asynchronous loading
        setTimeout(function() {

          var totalPath = "/nl/skiverleih/austria/tirol/nauders";  // "/nl/skiverleih/austria/tirol/nauders"; window.location.pathname;
          var paths = totalPath.split("/"); // string to [en, ski-rental, france, ...]
          var lang = paths[1]; // extract language string, example: en
          var townNameSortBy = paths[5]; // extract language string, example: en
          var target_country = paths[3]; // extract language string, for exaple: france, frankreich, francia, frankrijk

          // Target_Countries Arrays from URL path
          var fr_target_country = ["france", "frankreich", "francia", "frankrijk"];
          var at_target_country = ["austria", "oesterreich", "autriche", "oostenrijk"];
          var ch_target_country = ["switzerland", "svizzera", "schweiz", "zwitserland", "suisse"];
          var ad_target_country = ["andorre", "andorra"];
          var de_target_country = ["duitsland", "deutschland", "allemagne", "germania", "germany"];
          var bg_target_country = ["bulgaria", "bulgarien", "bulgarie", "bulgaria", "bulgarije"];
          var it_target_country = ["italie", "italia", "italy", "italien"];
          var si_target_country = ["slovenien", "slovenia", "slovenie", "slovenia"]; // slovenia
          var sk_target_country = ["slovakia", "slowakei", "slovaquie", "slovacchi", "slowakije"]; // slovakia
          var es_target_country = ["spanje", "spanien", "spain", "espagne", "spagna"];

          var empty_countries = [] // empty arrray for .concat, for a better overview only
          var all_target_countries = empty_countries.concat(// all countries into one array
            fr_target_country, // FR show, avoid the "," after the last one
            // at_target_country, //...