Anleitung
Integration Stationfinder
Der neue Stationfinder wird als «Webcomponente» in einer Seite nach Wahl an der gewünschten Stelle eingebunden (direkt zur Anleitung).
Er ist voll responsiv und für Mobile-Geräte optimiert. Die Breite wird durch das umgebende HTML definiert.
Erforderlich dazu sind lediglich ein paar wenige Zeilen HTML-Code (direkt zum Code).
Gängige CMS verfügen über die Möglichkeit, Inhalte mittels HTML-Code direkt, mit entsprechenden Modulen (Bsp. Code-Modul) oder entsprechenden Plugins einzubinden.
Als Beispiel nachfolgend die Variante mit Breite = ContentContainer.
Die Variante mit voller Breite ist unter https://avia.ch/mobilitaet/tankstelle-finden/ umgesetzt.
WICHTIG: Sämtliche Elemente des bisherigen Tankstellenfinders (JS, HTML, Google-API etc.) müssen entfernt bzw. deaktiviert werden.
Voransicht Code:
Guide mit Erklärungen
1. CSS
Für einen einwandfreien Ladevorgang und die initiale Darstellung muss auf der umgebenden Seite das Stationfinder-Element mit „display: none“ deklariert werden. Möglichkeiten:
- direkt im CMS-Code-Modul vor dem Stationfinder-Element
- als Inline-CSS des CMS-Code-Moduls
- in der umgebenden Seite
<style>
tankstellen-finder {
display: none;
}
</style>
2. Hauptelement «Stationfinder»
Die eigentliche «Stationfinder» wird mit bloss einer Code-Zeile eingebunden:
<tankstellen-finder top="0=70,600=150,1000=200,1200=0" css="https://avia.ch/2023/addons/css/mdb.min.css;https://avia.ch/2023/css/avia-theme.css"> </tankstellen-finder>1.1 Informationen zu den einzelnen Attributen
Attribut „lang“ (im Beispiel-Code nicht enthalten)
Der Stationfinder ist 4-sprachig (de, en, fr, it) konzipiert und die anzuzeigende Sprache wird grundsätzlich dem HTML-Tag der umgebenden Seite entnommen.
<html lang="de-DE" ...
Ohne Sprach-Deklaration kann der Stationfinder möglicherweise nicht geladen werden.
Sofern die Sprache nicht dem HTML-Tag entnommen werden kann, lässt sie sich mit dem Attribut „lang“ im Tankstellenfinder-Tag forcieren.
Mögliche Werte: de, fr, it, en (Bsp.: [lang=“de“]
Attribut „filter“
Dies dient der Vorselektion der entsprechenden Tankstellen.
Mögliche Werte: treibstoff, elektrisch, wasserstoff, shop, carwash, washbox, workshop (Bsp.: [filter=“shop“])
Beispiel für filter=“shop“ => https://avia.ch/avia-shoptankstellen/
Attribut „top“
Damit lässt sich die Position des Stationfinders inkl. responsiven Scroll-Effekt zwischen Tankstellen-Details und Karte beeinflussen (Einheit = px).
Attribut „css“
Mit Semikolon getrennt kann der Pfad zu einer weiteren CSS-Datei angegeben werden, um die Optik der umgebenden Seite anzugleichen (Bsp. Schriften).
Die beiden enthaltenen CSS-Dateien sind erforderlich für die Grundeinstellungen / -funkionen und sollten daher NICHT entfernt werden.
3. JS-Scripts einbinden
Als letztes erforderliches Element müssen folgende Scripts eingebunden werden:
<script src="https://stationfinder.avia.ch/polyfills.js" type="module"></script><script src="https://stationfinder.avia.ch/main.js" type="module"></script>Fallback-Script (optional)
Mit folgendem Script wird sichergestellt, dass alle erforderlichen Parameter vorhanden sind und – wenn nicht – diese zusätzlich forciert werden.
<script>
let pageLang = document.getElementsByTagName("html")[0].getAttribute("lang");
pageLang = pageLang.slice(0, 2);
let params = new URLSearchParams(location.search);
let paramLang = params.get("lang");
let paramFilter = params.get("filter");
let element = document.querySelector("tankstellen-finder");
if (!params.get("lang")) {
element.setAttribute("lang", pageLang || 'de');
} else {
element.setAttribute("lang", params.get("lang"));
}
</script> 4. Zusammenfassung
Der erforderliche Code als Ganzes:
<!-- Stationfinder without filter --- start -->
<style>
html, body {
tankstellen-finder {
display: none;
}
</style>
<tankstellen-finder top="0=70,600=150,1000=200,1200=0" css="https://avia.ch/2023/addons/css/mdb.min.css;https://avia.ch/2023/css/avia-theme.css"> </tankstellen-finder>
<script src="https://stationfinder.avia.ch/polyfills.js" type="module"></script>
<script src="https://stationfinder.avia.ch/main.js" type="module"></script>
<!-- Stationfinder without filter --- end -->