So integriert ihr SportsNow in eure Website!

Ihr habt eine schöne WordPress Website und möchtet euren Stundenplan, eure Workshops und Preise aus SportsNow integrieren? Wir erklären euch gerne schrittweise, wie ihr dies im Handumdrehen umsetzen könnt. Ausserdem erfahrt ihr, wie sich die Farben und Schriften verändern lassen, damit es eurem CI Design entspricht.


1. Installiert das „Scripts n Styles“ Plugin

Das Plugin erlaubt es uns eigener JavaScript und CSS Code in unsere Seiten einzufügen.

sportsnow-website-integration-scripts-n-styles

2. Lädt das jQuery Script

Mit Hilfe von jQuery werden wir die Daten von SportsNow ins WordPress laden.

sportsnow-website-integration-jquery

3. Erstellt eine neue Seite

Erstellt eine neue Seite wo ihr eure SportsNow-Daten integrieren möchtet und nennt sie zum Beispiel „Unser Stundenplan“. Zuerst muss das „Scripts n Styles“ Plugin aktiviert werden mittels „Ansicht anpassen“ und danach muss der Editor in den „Text“ Modus gewechselt werden (siehe rote Markierungen im Bild).

Im Editor müsst ihr folgenden HTML Code einfügen:
<h2>Live-Kalender</h2>
<div id="calendar-container"></div>
<h2>Stunden / Kurse</h2>
<div id="schedule-container"></div>
<h2>Workshops / Events</h2>
<div id="events-container"></div>
<h2>Preise</h2>
<div id="pricing-container"></div>

sportsnow-website-integration-neue-seite

4. Fügt den JavaScript Code ein

Nun ein wenig nach unten scrollen und folgender JavaScript Code einfügen wie im Bild:
jQuery(document).ready(function() {
jQuery("#calendar-container").load("https://www.sportsnow.ch/providers/yoganow/calendar?locale=de");
jQuery("#schedule-container").load("https://www.sportsnow.ch/providers/yoganow/schedule?locale=de");
jQuery("#events-container").load("https://www.sportsnow.ch/providers/yoganow/events?locale=de");
jQuery("#pricing-container").load("https://www.sportsnow.ch/providers/yoganow/pricing?locale=de");
});

sportsnow-website-integration-javascript

Dieser Code muss noch ein wenig angepasst werden, damit es auch eure eigene Daten lädt. Im Moment lädt dieser Code nämlich die Daten des YogaNow-Studios. Dazu müsst ihr im obigen Code überall das Wort „yoganow“ mit eurer eigenen URL austauschen. Diese lässt sich herausfinden, indem ihr auf www.sportsnow.ch eure eigene Seite aufruft: https://www.sportsnow.ch/go/<Eure-URL>

Auch die Sprache der Daten lässt sich ändern. Wenn ihr die Daten lieber auf Englisch, Französisch oder Italienisch haben möchtet, dann müsst ihr im obigen Code überall „locale=de“ mit „locale=en“, „locale=fr“ oder „locale=it“ ersetzen.

5. Fügt den CSS Code ein

Hier könnt ihr euren eigenen CSS Code einfügen um die Farben sowie Schriften anzupassen. Wir geben euch hier ein Beispiel wie die Farben der Links auf rot geändert werden kann. Fügt dazu folgender CSS Code wie im Bild ein:

.button {
color: red;
}

sportsnow-website-integration-css-styles

6. Schon fertig!

Nun könnt ihr eure Seite speichern und schon seid ihr fertig! Die Seite lädt nun euren Stundenplan, eure Workshops und Preise automatisch.

sportsnow-website-integration-fertig

Na, hat’s funktioniert? Zeigt uns doch eure Website, wenn ihr fertig seid. Wir sind gespannt! 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.