So integriert ihr SportsNow in eure Wix-Website!

sportsnow-website-integrationIhr habt eine schöne Wix-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. Fügt einen HTML-Code hinzu

Der HTML-Code erlaubt es uns zudem eigener JavaScript und CSS Code in unsere Seiten einzufügen.

2. Code eingeben

Klickt nun auf den HTML-Code, den ihr soeben eingefügt habt und drückt auf „HTML-Code bearbeiten“. Es öffnet sich die Einstellungsmaske. Wählt als „Modus“: „HTML-Code“.

HTML Code

Im Eingabefeld müsst ihr folgenden Code einfügen:

<style>
.button {
color: red;
}
</style>

<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>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
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");
});
</script>

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.

Im obigen Beispiel zeigen wir wie die Farben der Links auf rot geändert werden können. Dazu haben wir folgender CSS Code verwendet:

.button {
color: red;
}

Wenn ihr fertig seid, dann drückt auf „Aktualisieren“. Eure SportsNow-Daten müssten nun in den Bereich des HTML-Codes geladen werden.

3. 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.

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.