Aufgabenstellung: Wir bieten generell die Möglichkeit, den Kurskalender von myGymPoint abzurufen und direkt in Ihre Webseite einzubinden. Ein Beispiel dazu finden Sie hier: https://crossfitplan.com/fitness-schedule/
Ausserdem können Sie an einer anderen Stelle die Kurse einblenden, die als nächstes stattfinden; ohne den kompletten Kalender zu zeigen. Darum geht es hier!
Die Funktionalität ist nun in unserer externen API verfügbar. Dazu einfach einen "API Key" in den Studioeinstellungen erstellen. Auf der Webseite des Kursanbieters muss dann innerhalb des HTML Body Tags folgendes "script" Tag eingefügt werden:
<script> document.mgpBootstrap = function () { mgp.init({ studioKey: 'F2tEnX1jQLF.....P2pdG5wSM' }); }; (function () { if (document.getElementById('mgp-js')) { return; } var scriptElement = document.createElement('script'); scriptElement.id = 'mgp-js'; scriptElement.src = 'http://connect.mygympoint.com/mgp.js'; var first = document.getElementsByTagName('script')[0]; first.parentNode.insertBefore(scriptElement, first); }()); </script>
Dabei muss natürlich der "studioKey" mit dem erzeugten API Key ersetzt werden (dieser hier wurde tw unkenntlich gemacht)
An die Stelle, an welcher später die Liste aktuellen Kurse angezeigt werden soll, muss folgendes Tag eingefügt werden:
<div class="mgp_calendar_today"></div>
Das wars eigentlich auch schon. Das geht schnell und sieht gut aus.
Anpassungen:
Der "Style" der Kursliste kann (soll) natürlich noch per CSS angepasst werden. Folgende CSS Klassen werden verwendet:
- mgp_calendar_today
Das Containerelement (ein <div>), welches alles umschließt - mgp_calendar_today__date_header
Ein <h4> Element, welches den Wochentag und das Datum anzeigt - mgp_calendar_today__group
Ein <ul> Element, welches die Listeneinträge beinhaltet - mgp_calendar_today__item
Ein Eintrag (Kurs) in der Liste (<li> Element) - mgp_calendar_today__item__time
Ein <span> Element, welches die Anfangszeit eines Kurses beinhaltet
Hier ein Beispiel von dem dynamisch erstellten HTML:
<div class="mgp_calendar_today">
<h4 class="mgp_calendar_today__date_header">Dienstag, 10.02.2015</h4>
<ul class="mgp_caledar_today__group">
<li class="mgp_calendar_today__item mgp_calendar_today__item--even">
<a href="https://app.mygympoint.com/courses/6442">
<span class="mgp_calendar_today__item__time">09:30</span>Test Kurs</a>
</li>
</ul>
</div>
Das ist hoffentlich hilfreich und ein schönes Feature für Ihre Webseite.