Schnelleinstieg für Sprachreisen.Org Courses-App

Voraussetzungen

  1. Die Sprachreisen.Org Courses-App ist bereits auf einer Unterseite Ihrer Webseite eingebunden. Falls noch nicht geschehen, nutzen Sie dazu bitte unsere Gebrauchsanweisung der Sprachreisen.Org Courses-App
  2. Sie haben ein Navigationselement in Ihrer Webseite (z.B. ein kleines Formular in der Sidebar), das eines oder mehrere der folgenden Filterkriterien zur Auswahl anbietet:
    • Sprache
    • Land
    • Zielgruppe
    • Kurstyp
  3. Das Navigationselement leitet den Besucher bei Auswahl (per GET-Anfrage) auf die Unterseite mit der Sprachreisen.Org Courses-App weiter.

Beispielcode

Der einfachheithalber nehmen wir an, dass Ihr Navigationselement ausschließlich die Wahl der Sprache ermöglicht und das diese ein <select>-Formularfeld mit dem HTML-Attribut name="filter_language" erfolgt (Je nach Benennung der Formularfelder ihres Navigationselements heißen diese ggf. anders).

Zur Weitergabe dieser URL-Parameter passen wir den letzten Teil des bereits vorhandenen Code-Snippets der Sprachreisen.Org Courses-App folgendermaßen an:

document.addEventListener('DOMContentLoaded', function() {
  var url = new URL(document.location.href)
  var filterLanguage = url.searchParams.get('filter_language')
  var appElement = document.getElementById('spr-org-courses-app')
  var akConfig = JSON.parse(appElement.dataset.akConfig)

  akConfig.filter_language = filterLanguage
  appElement.dataset.akConfig = JSON.stringify(akConfig)

  akLoader.init('https://assets.austauschkompass.de/spr_org_courses_app/build')
})

Analog kann der obige Code um die Filterkriterien Land, Zielgruppe und Kurstyp erweitert werden.

Bitte beachten Sie: dass etwaige Voreinstellungen, die sie nach unserer Anleitung bereits direkt am HTML-Element (#spr-org-courses-app) getätigt haben, durch einen solchen Schnelleinstieg in jedem Fall überschrieben werden! Wird also die Unterseite mit der Sprachreisen.Org Courses-App direkt besucht (ohne Schnelleinstieg), so verwendet die App die Standardfilterkriterien wie in der Anleitung beschrieben.

Hinweise zur Browserkompatibilität

Zur größtmöglichen Kompatibilität zu Ihrer Webseite zeigt der Beispielcode Standard-JavaScript ohne zusätzliche Bibliotheken.

Damit der Code wie oben gezeigt auch im Internet Explorer funktioniert, empfehlen wir dazu ein URL Polyfill auf Ihrer Webseite einzubinden.

Polyfills sorgen dafür, dass neue, standardkonforme Features (URL und [URLSearchParams] https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)) in älteren Browsern funktionieren.