Tipps & Tricks - Automatische Weiterleitung in Abhängigkeit vom Endgerät
Werden Newsletter oder Aufgaben mit einem Link zu einer Intrexx-Seite per E-Mail versendet,
so ist es nicht möglich, zu kontrollieren, ob der Empfänger den Link auf einem mobilen Gerät oder
in seiner Desktopumgebung öffnet. Zeigt der Link auf eine für den Desktop erstellte Seite,
so lässt sich diese auf dem mobilen Gerät nicht öffnen. Für diesen Fall gibt es im Ziel die Möglichkeit
zu unterscheiden, um welche der beiden Arten es sich handelt und entsprechend darauf zu reagieren.
Dieser Beitrag zeigt Ihnen, wie. Vorkenntnisse in Velocity und JavaScript sind dabei von Vorteil.
Layout
Grundvoraussetzung für das Funktionieren dieser Methode ist, dass sowohl ein Desktop- als auch ein
mobiles Layout konfiguriert werden.
Seitenaufbau
Anders als gewöhnlich sollte als Sprungziel zunächst eine Seite
verwendet werden, die als Schalter dient. Diese Seite muss für alle Arten von Geräten
lesbar sein. Deshalb wird über den
Seitenassistent
eine mobile Ansichtsseite erstellt. Auf dieser Seite werden zwei
Schaltflächen
platziert. Das
Sprungziel der ersten Schaltfläche
soll die Seite für Desktop-Endgeräte sein, das der zweiten Schaltlfläche soll die Seite für
mobile Endgeräte sein. Beide Schaltflächen werden in den
versteckten Bereich der Seite verschoben.
Außerdem wird ein aussagekräftiger Hinweistext für den Benutzer benötigt, damit er weiß, dass
eine automatische Weiterleitung folgt.
Unterscheidung über JavaScript
Bei dieser Variante wird im onload-Ereignis der gerade erstellten Schalter-Seite
folgender JavaScript-Aufruf hinterlegt:
window.setTimeout('MobileDesktopRedirect()',5000);
Die genannte Methode muss sowohl im JavaScript für den Desktop als auch im JavaScript für mobile
Endgeräte definiert werden (
Hauptmenü Bearbeiten / Skript bearbeiten
/ JavaScript für Desktop bearbeiten bzw. JavaScript für mobile Endgeräte bearbeiten). Die Methode für den
Desktop löst einen Klick auf die erste und die Methode für mobile Endgeräte löst einen Klick auf die zweite
Schaltfläche aus. Intrexx entscheidet hierbei selbst, welches der beiden Skripte aufgerufen wird.
/* JavaScript für Desktop Endgeräte */
function MobileDesktopRedirect(){
getElement("B48F.....AFBF").click() /*Desktop buttoncontrol*/
return true;
}
/* JavaScript für mobile Endgeräte */
function MobileDesktopRedirect(){
getElement("0A03.....D462").click() /*Mobile buttoncontrol*/
return true;
}
Unterscheidung über Velocity
Da bei der JavaScript-Variante zwei Skripte gepflegt werden müssen,
hier noch eine Variante mit Velocity. Die Unterscheidung und Weiterleitung findet
an einer zentralen Stelle statt. In den Eigenschaften der Schalter-Seite
wird eine Velocity-Datei zur Initialisierung referenziert. Diese Datei ist folgendermaßen aufgebaut:
#set($guid = "")
#if($LayoutManager.getLayout($layout).isMobile())
#set($guid = "0A03.....D462") ##GUID der Schaltfläche zur mobilen Seite
#else
#set($guid = "B48F.....AFBF") ##GUID der Schaltfläche zur Desktop Seite
#end
<script type="text/javascript" class="evalcode">
function MobileDesktopRedirect(){
getElement("$guid").click();
}
window.setTimeout("MobileDesktopRedirect()",5000);
</script>
Zunächst wird abgefragt, ob es sich beim aktuellen Layout um eine mobile Version handelt,
um dann ausgehend davon ein JavaScript zu generieren, das die entsprechende Schaltfläche klickt.
Das Klassenattribut "evalcode" ist notwendig, da sonst das JavaScript auf mobilen Endgeräten nicht ausgeführt wird.
|
Die hier verwendete Abfrage kann genutzt werden, um die Schaltfläche über eine
Bedingte Anzeige anzuzeigen, die
später auch ausgelöst wird. So kann man dem Benutzer ermöglichen, diese zu klicken, falls
die Weiterleitung nicht funktioniert oder zu lange dauert. In diesem Fall würde man die
beiden Schaltflächen nicht in den versteckten Bereich verschieben, sondern auf der
Arbeitsfläche belassen.
|