Termine, Kurse und Kursanmeldung/ Gerätereservierung/ Platzreservierung in einer vorhandenen Website einbinden

21.06.2022

Neben der Möglichkeit SPORTMEO als komplette Website zu betreiben oder die Sporttypen mit den Terminen/Kursen oder auch einzelne Termine von seiner bestehenden Website zu verlinken, stellen wir auch eine Schnittstelle bereit, mit der Sie die Termine und Kurse auch optisch direkt in Ihrer Website integrieren können und auch eine direkte Online-Kursanmeldung bzw. Geräte-/Platzreservierung ist per Klick/Fingertouch darauf möglich! Die Schnittstelle basiert auf REST und wir stellen Entwicklern auf Anfrage gerne detailierte Informationen darüber zur Verfügung. Eine weitere Alternative ist die Einbindung eines vollständigen SPORTMEOs in einer bestehenden Website oder (Web-)App per iFrame oder Webview. Das beschreiben wir in einem anderen Artikel...

Plugin für die einfache Einbindung in beliebige Internetseiten (z.B. Wordpress, Joomla, Typo3 oder individuell programierte Seiten)

Für die einfache Anwendung stellen wir ein jQuery-Plugin zur Verfügung, mit der Sie die SPORTMEO-Schnittstelle ganz einfach für Ihrer bestehende Homepage nutzen können. Die nachfolgenden 3 Schritte zeigen, wie es eingebunden wird:

1. sofern Ihre bestehende Website nicht bereits die Frameworks jQuery und Bootstrap 3 verwendet, müssen Sie diese zwischen <head> und </head> auf Ihrer Website einbinden:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

2. fügen Sie eine Zeile tiefer (aber noch vor dem </head>) folgende Zeile ein, wobei das "demoverein" durch die SPORTMEO-ID von Ihrem Portal ersetzt werden muss:

<script src="https://demoverein.sportmeo.com/min/?f=js/jquery.sm-api.js"></script>

3. Fügen Sie den nachfolgenden Javascript-Code abschließend vor dem </body> auf Ihrer Website ein, wobei das "#ihrElement" durch das Element ersetzt werden muss, in dem die Terminliste auf Ihrer Website erscheinen soll. Das kann z.B. eine optische Box oder ein anderer Platzhalter auf Ihrer Homepage sein. Sollten Sie noch kein passenden Platzhalter-Element auf Ihrer Home haben, ergänzen Sie den nachfolgenden Code vor dem <script> um die Zeile <div id="ihrElement"></div>.

<script>
    $(document).ready(function() {
        $('#ihrElement').getDates();
    });
</script>

Tipp: Möchten Sie nicht alle Termine anzeigen, sondern nur die an einem bestimmten Ort und/oder eines bestimmten Typs? Mit nachfolgendem Script können Sie den Javascript-Code in Schritt 3 anpassen, um z.B. nur die Termine des Typs mit der Nr. 1 und an Ort Nr. 2 anzuzeigen. Welche Nummer Sie für Ihre Typen und Orte verwenden, können Sie ganz einfach oben in der Internetadresse auf der Terminseite Ihres SPORTMEO-Portals sehen:

$('#ihrElement').getDates({
    type: 3,
    location: 1,
    limit: 10, //nur die nächsten 10 Termine/Kurse anzeigen
    textClock: "Uhr" //ist Ihre Website z.B. auf Englisch auf "o'Clock" ändern
});

Durchschnittliche Bewertung: 5 (2 Abstimmungen)

Kommentieren nicht möglich