Dieser Artikel zeigt JavaScript-Code, um den ersten Filter eines Locators automatisch auszuwählen. Er enthält den Code selbst, die „Anleitung zum Einrichten" und wie man es aktiviert. Die Vorauswahl ist nicht dauerhaft – der Nutzer kann sie deaktivieren, um alle Standorte zu sehen.

Das wird passieren

Von hier:

zu hier:

So richtest du es ein

Voraussetzung ist, dass das Datenfeld „services" für deine Standorte ausgefüllt ist, um Filter zum Vorauswählen zu haben. Lerne, wie das geht, hier.

Wenn dein Filter-Setup bereit ist, wird das Skript den ersten Filter mit folgendem Script auswählen.

JavaScript

<script>

  //Unchecks all enabled filters on load
  function removeAllFilters(){
    var checkboxes = document.getElementsByClassName('ubsf_filters-select-checkbox');
    for (var i = 0; i < checkboxes.length; i++){
      if (checkboxes[i].hasChildNodes){
        checkboxes[i].click();
      }
    }
  }

  //Click on a filter and apply
  function presetFilter() {
    var checkbox = document.getElementsByClassName('ubsf_filters-select-checkbox')[0];
    Boolean(checkbox) && checkbox.click();
    var button = document.getElementsByClassName('ubsf_advanced-select-menu_apply-filters-button')[0];
    Boolean(button) && button.click();
  }

  //Click on filters toggle to show and load them
  var showFilters = setInterval(function() {
    if (Boolean(window.ubGoogleMapInstance)) {
      var toggle = document.getElementsByClassName('ubsf_filter-toggle')[0];
      Boolean(toggle) && toggle.click();
      removeAllFilters();
      clearInterval(showFilters);
    }
  }, 50);
  
  //If filters are shown and loaded, select one and hide the toggle
  //Sets the filter drop down to display:none and moves the locations list up to take its spot
  var selectFilter = setInterval(function() {
    if (document.getElementsByClassName('ubsf_filters-select-checkbox').length > 0) {
      presetFilter();
      clearInterval(selectFilter);
    }
  }, 50);

  //Untogles the filters toggle if shown
  if (document.getElementsByClassName('ubsf_filters-select-checkbox').length > 0) {
    var toggle = document.getElementsByClassName('ubsf_filter-toggle')[0];
    toggle.click();
  }

  //---------------------------------------------------------------------------//
  //If you want to show the filter box toggle, remove this section
  var hideFilterSection = setInterval(function() {
    var filterBox = document.getElementsByClassName('ubsf_filter-box')[0];
    if (filterBox && filterBox.style.display != "none"){
      filterBox.style.display = "none";

      var locationsList = document.getElementsByClassName('ubsf_locations-list')[0];
      locationsList.style.top = "66px";
      locationsList.style.height = "calc(100% - 66px)";
    }
  }, 50);
  //---------------------------------------------------------------------------//
  
  </script>

So aktivierst du es

Das Skript muss in einer .js-Datei gespeichert und auf einem öffentlichen Server bereitgestellt werden, wie hier:

https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/Preselect_1st_Filter.js

Dann muss die Datei als Quelle des Skripts angegeben werden.

Verweise auf eine externe JavaScript-Datei:

<script src="https://s3.eu-central-1.amazonaws.com/uberall-downloads-prod/Preselect_1st_Filter.js"></script>

Füge das obige Script-Tag vor dem Uberall Locator & Pages Snippet in deinen HTML-Code ein.

Beispiele:

Mit direktem Code als Quelle (nur in Fiddle möglich zum Anzeigen): https://jsfiddle.net/UberSven/ys3w0zgp/1/

Mit .js-Datei als Quelle – zum Teilen mit Kunden: https://jsfiddle.net/UberSven/ys3w0zgp/4/

Weitere Informationen zum Uberall Locator findest du hier.