Race Result ist einer der weltweit führenden Anbieter für Komplettlösungen im Bereich der Sportevent-Zeitnehmung. Race Result bietet nicht nur die Hardware dafür an, sondern auch das interaktive Anmelde- und Bezahlsystem mit Teilnehmerverwaltung und Ergebnissen. Dieser Beitrag bezieht sich im Speziellen auf die Integration der Race Result Anmeldeseiten in die eigene Sportevent-Website, sowie die Darstellung von Teilnehmer- und Ergebnislisten. Dieser Beitrag ist zwar speziell für die Integration in WordPress geschrieben, dient aber auch als Grundlage für alle anderen Website-Systeme.
RaceResult – WordPress Integration
RaceResult bietet ein eigenes WordPress PlugIn an, um Race Result-Seiten in die Website relativ einfach zu integrieren. Nach Installation und Aktivierung des PlugIns findet man in der PlugIn Beschreibung folgenden Hinweis:
Dabei handelt es sich um Shortcodes, welche man mit der jeweiligen Race Result ID und dem KEY für die Anmeldung (jedes Event hat dafür eine eigene Nummer) mit dem WordPress-Editor Ihrer Wahl als Shortcode an die gewünschte Stelle der Website einbauen kann. Der Hinweis beschreibt folgende Integrationsmöglichkeiten:
Um die Anmeldung darzustellen, ist aus Sicherheitsgründen auch der Key-Code erforderlich. Teilnehmer- und Ergebnis-Listen können lediglich durch die Raceid integriert werden.
Haben Sie Fragen oder benötigen Sie weitere Hilfe?
Wenn Ihnen diese Beschreibung nicht weiterhilft, können Sie mir gerne Ihre individuelle Anfrage senden.
Race Result Integration mit JavaScript
Zur nahtlosen Integration in Ihre Webseite (nicht auf WordPress bezogen) fügen Sie einfach folgenden Quellcode auf Ihrer Webseite ein. Die Darstellung können Sie optional per CSS anpassen.
Online-Anmeldung
Um den folgenden Code für Ihre Website zu verwenden, müssen Sie die die 6-stellige „eventid“ anstelle von „xxxxxx“ einsetzen. Innerhalb dieses Codes können Sie auch Ihren eingenen CSS-Code einfügen zwischen <style> und </style>.
<script type="text/javascript">
<!--
var RRReg_eventid=xxxxxx;
var RRReg_key="ts6VQjFR1aRM";
var RRReg_PreferredRegistration="single";
var RRReg_PreferredContest=0;
var RRReg_server="https://events2.raceresult.com";
-->
</script>
<script type="text/javascript" src="https://events2.raceresult.com/registration/init.js?lang=de"></script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>
Einbindung mit Info-Seite (Wettbewerbsliste, etc.)
<div id="divRRRegStart" class="RRRegStart"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRRegStart/load.js.php?lang=de"></script>
<script type="text/javascript">
<!--
var rrp=new RRRegStart(document.getElementById("divRRRegStart"), xxxxxx);
-->
</script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>Seite „Ergebnisse“
Um den folgenden Code für Ihre Website zu verwenden, müssen Sie die die 6-stellige „eventid“ anstelle von „xxxxxx“ einsetzen. Innerhalb dieses Codes können Sie auch Ihren eingenen CSS-Code einfügen zwischen <style> und </style>.
<div id="divRRPublish" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=de"></script>
<script type="text/javascript">
<!--
var rrp=new RRPublish(document.getElementById("divRRPublish"), xxxxxx, "results");
rrp.ShowTimerLogo=true;
rrp.ShowInfoText=false;
-->
</script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>Seite „Teilnehmer“
Um den folgenden Code für Ihre Website zu verwenden, müssen Sie die die 6-stellige „eventid“ anstelle von „xxxxxx“ einsetzen. Innerhalb dieses Codes können Sie auch Ihren eingenen CSS-Code einfügen zwischen <style> und </style>.
<div id="divRRPublish" class="RRPublish"></div>
<script type="text/javascript" src="https://my.raceresult.com/RRPublish/load.js.php?lang=de"></script>
<script type="text/javascript">
<!--
var rrp=new RRPublish(document.getElementById("divRRPublish"), xxxxxx, "participants");
rrp.ShowTimerLogo=true;
rrp.ShowInfoText=false;
-->
</script>
<style>
/* Add custom CSS here or elsewhere to change the design */
</style>Race Result CSS Anpassungen
Wie im vorigen Abschnitt bereits kurz erwähnt, sind CSS-Anpassungen (Anpassungen am Design, der Darstellung) der Race Result-Seiten in der eigenen Website möglich:
- durch eigenen CSS-Code direkt in oben angeführten Code-Snippets
- durch eigenen CSS-Code über das eigene Theme der Website
Die zweite Variante hat den Vorteil, dass die dari definierten CSS-Regeln global für die ganze Website gelten, also für alle „Classen“ die durch den CSS-Code als solche definiert sind. Noch spezifischere Anpassungen sind dann durch die erste Variante direkt beim JaveScript-Snippet möglich. Diese überschreiben im Bedarfsfall die Regeln im Stylesheet des Themes.
Anpassen der Race Result Anmeldung-Formularfelder mit CSS
Als Veranstalter kann man im Race Result Backend die gewünschten Formularfelder für die Online-Anmeldung selbst erstellen und verwalten. Dabei hat jedes Feld eine CSS-Class, beginnend bei 1 und fortlaufend nummerisch aufsteigend (2, 3, 4, …). Will man also das Feld 1 mit CSS bearbeiten, dann muss man sich die CSS-Class dafür im Quellcode raussuchen und entsprechend diese mit dem gewünschten CSS-Code überarbeiten. Ein Beispiel:
#tdInputCell23_1 {
margin-top: -34px;
}Dieser kurze CSS-Code sorgt dafür, dass das Eingabefeld 23 um 34 Pixel nach oben verschoben wird. Insofern handelt es sich hier um das 23. Feld der Online-Anmeldung.
Diese Vorgehensweise wird dann unter Umständen problematisch, wenn auf der Website mehere Events integriert werden sollen. Denn möglicherweise gibt es ein weiteres Event, welches das 23. Feld verwendet. In diesem Sonderfall würde die CSS-Anpassung auch auf dieses Feld zutreffen, was aber wahrscheinlich gar nicht erwünscht ist. Nun hat man ein Problem, aber es gibt eine Lösung!
Lösung: Eigene CSS-Class in Race Result Backend erstellen und über CSS individualisieren
Es gibt im Race Result Backend die Möglichkeit, HTML-Felder zu erstellen. Diese HTML-Felder bieten die Möglichkeit, eigene CSS-Classen zu erstellen, welche dann ganz individuell im Stylesheet gestylt werden können. Achtung: Diese Möglichkeit bieten nur die HTML-Felder. Beispiel:
<p class=”namedereigenenclass”> Beispiel um eine eiegene CSS-Class zu erstellen. </p>Es ist ganz einfach: Man muss lediglich im HTML-Feld den Code <p class=”namedereigenenclass”> ganz vorne einfügen und den Namen der Class vergeben (in diesem Fall statt namedereigenenclass). Und schon ist eine eigene CSS-Class ins Leben gerufen. Nun muss man lediglich im Stylesheet, die Class mit dem gewünschten CSS-Code anpassen. Hier das Beispiel:
.namedereigenenclass {
margin-top: -34px;
}Mit dieser Möglichkeit ist es völlig egal, um welche Feldnummer / Zeile (zB tdInputCell23_1) es sich handelt, da der Browser für diese eigene Class auch nur hier entsprechend reagiert.
Haben Sie Fragen oder benötigen Sie weitere Hilfe?
Wenn Ihnen diese Beschreibung nicht weiterhilft, können Sie mir gerne Ihre individuelle Anfrage senden.
Eine sehr spezielle Integration des Race Result Anmeldesystems erfolgte für Time Now Sports, einem der größten Laufsport-Event-Dienstleistern in Österreich.
