Einbindung von Teaser in eine WordPress-Homepage
Da ich etwas Zeit gebraucht habe, die Teaser-Funktion in meine WordPress-Homepage zu integrieren, beschreibe ich hier mal kurz, wie es dann am Ende (und wenn man weiß, wie) auch ganz leicht geklappt hat. Wer von Euch auch eine WordPress-Homepage hat, kann das vermutlich ähnlich machen. Los geht's:
1. WordPress unterstützt aus Schutzgründen von Haus aus kein JavaScript (was für Teaser zum Abrufen des nächsten freien Termins aber gebraucht wird). Es gibt aber viele Wege JavaScript doch in WordPress zum laufen zu bringen.
2. Ich habe mir verschiedene Möglichkeiten angeschaut und mich dann für ein sehr einfaches Plugin entschieden:
Simple Custom CSS and JS
Das kann - wie jedes andere Plugin auch - in WordPress installiert und aktiviert werden. Das habe ich also gemacht.
3. Nach Installation und Aktivierung erscheint dann am linken Menü-Rand im Dashboard von WordPress ein neuer Menü-Punkt mit Namen "Custom CSS & JS" (siehe Screenshot 1).
4. Dort dann auf den Unterpunkt "Add Custom JS" (also neues JavaScript hinzufügen) klicken.
5. Es erscheint dann ein neues Fenster, in das JavaScipt-Code eingefügt werden kann. Ich habe dafür den Namen "Teaser" vergeben. Jeder andere Name müsste aber auch gehen (siehe Screenshot 2).
6. In dieses Fenster muss dann der JavaScript-Code von der
Lemniscus-Hilfe-Seite eingetragen (reinkopiert) werden.
(Nicht irritieren lassen: Im Fenster stehen bereits ein paar Kommentare und Hilfstexte auf englisch. Diese können stehen gelassen werden oder gelöscht werden - das ist egal.)
Außerdem und das ist sehr wichtig !!!): am Anfang und am Ende des Codes von der Lemniscus-Hilfe-Seite muss jeweils eine Zeile ergänzt werden. Und zwar:
Vor der ersten Code-Zeile von Lemniscus:
jQuery(document).ready(function( $ ){
Nach der letzten Code-Zeile von Lemniscus:
});
Mit diesen zusätzlichen beiden Zeilen werden der Beginn und das Ende des Skripts markiert. Ohne diese Ergänzungen funktioniert das Ganze nicht!!!
Insgesamt habe ich also dort in das Fenster zunächst den Code von Lemniscus reinkopiert und diesen dann um die erste und letzte Zeile ergänzt:
_______________________________________________________________________________
jQuery(document).ready(function( $ ){
const token = 'DEIN_TOKEN_AUS_DEN_EINSTELLUNGEN_HIER_EINFÜGEN';
$('#pssLink').attr('href', 'https://my.lemniscus.de/pss.html?token=' + token);
$.getJSON(
'https://my.lemniscus.de/mvc/pss/teaser?token=' + token,
function(res) {
if (res.errorMessage) {
$('#termine').append('<p>Oh-oh: ' + res.errorMessage + '</p>');
} else {
res.teasers.forEach(function(t) {
$('#termine').append(
'<li class="list-group-item">' + t.title +
' am ' + t.formattedDate +
' um ' + t.formattedTime +
' Uhr</li>'
);
});
}
}
)
.fail(
function() {
$('#termine').append('<p>Fehler beim Laden der Termine</p>');
}
);
});
_______________________________________________________________________________
Achtung: bei dem gesamten JavaSkript-Code kommt es (wie auch bei jedem anderen Programmier-Code) auf jedes einzelne Zeichen an, also auf jedes Komma, jedes Semikolon, auf jede Klammer usw. Hier darf also nichts gelöscht, geändert oder hinzugefügt werden - sonst klappt's nicht.
In der zweiten Zeile, dort wo steht:
'DEIN_TOKEN_AUS_DEN_EINSTELLUNGEN_HIER_EINFÜGEN';
muss dann noch abschließend statt dieses Erklärtextes von Lemniscus Dein persönlicher Online-Terminbuchungs-Token eingetragen werden, und zwar zwischen die zwei Hochkommata (
'....
'). Die Zeile sieht dann ungefähr so aus:
const token = '07xxxxx1-dxxc-4xxf-8xx1-e8xxxxxxxx2e';
Deinen Token findest Du in den Lemniscus-Einstellungen unter Tokens (dort dann: PSS/lemniscus online Terminbuchung). Von dort einfach kopieren und im Code einsetzen.
7. Nachdem Du den Code in dem Plugin-Fenster eingefügt und ergänzt hast, diese ganze Seite mit dem Code bitte noch speichern, bzw. aktualisieren.
(An den Einstellungen des Plugins habe ich keinerlei Veränderungen vorgenommen.)
Ab jetzt steht der Lemniscus-Teaser-JavaScript-Code dann für alle Seiten Deiner Homepage zur Verfügung.
8. Auf einer beliebigen WordPress-Seite Deiner Homepage kann jetzt im Text-Editor (Achtung: nicht im Visuellen Editor!) der Teaser-Zugriff auf Deine nächsten freien Termine für diejenigen Leistungsketten, die Du in Lemniscus für Teaser freigegeben hast, hinein geschrieben werden. Zum Beispiel könntest Du probeweise einfach mal den HTML-Beispielcode von der
Lemniscus-Hilfe-Seite einfügen. Das habe ich als erstes gemacht und konnte so gleich sehen, dass es wunderbar klappt. Sprich: Die nächsten freien Termine wurden automatisch auf der Seite eingefügt und es gibt durch den HTML-Beispielcode von Lemniscus am Ende des Textes noch einen Link, der direkt zur Online-Termin-Buchungsseite führt.
Denke auch daran, dass nur für diejenigen Leistungsketten Termine angezeigt werden können, die Du in Lemniscus hierfür freigeschaltet hast. Das kannst Du in den Leistungsketten-Einstellungen unter dem Reiter Onlinebuchung machen, indem Du dort das Häkchen vor "Terminvorschlag als Teaser anbieten (API)" setzt.
9. Selbst habe ich mich dann aber dazu entschieden, nur einen kleinen Teil (nur eine einzige Zeile) aus dem HTML-Beispiel zu verwenden:
<ul id="termine" class="list-group "><!-- Termine werden hier automatisch eingefügt --></ul>
Diese Zeile habe ich dann in meinen schon bestehenden Text eingebunden, der dann insgesamt im Text-Editor so aussieht:
<h5>Nächster freier Termin</h5>
<ul id="termine" class="list-group "><!-- Termine werden hier automatisch eingefügt --></ul>
Wenn Sie diesen Termin oder einen späteren reservieren möchten, schreiben Sie mir bitte eine E-Mail oder nutzen einfach das Kontaktformular.
Falls es bei Ihnen sehr akut seine sollte, kann ich Ihnen u.U. auch schon früher einen Notfall-Termin anbieten. Weitere Termine werden dann aber vermutlich frühestens zu dem hier genannten (immer aktuellen) nächsten freien Termin möglich sein. Auch hierzu kontaktieren Sie mich bitte schriftlich.
Aussehen tut's dann so:
www.paartherapie-muenster.org
(Das hatte ich ja aber auch schon in meinem ersten Post zum Thema verlinkt.)
Über die
id="termine" in dieser einen HTML-Code-Zeile wird das JavaScript angesprochen und so werden die Termine dann von Lemniscus geholt und an der gewünschten Stelle angezeigt.
Viel Spaß beim selbst Ausprobieren wünscht Euch
Rupprecht