Public API: copilot.js
Im nachfolgendem Dokument wird erklärt, wie die Datei copilot.js verwendet werden kann um damit die Termine eines bestimmten Künstlers auf der Webseite einzubinden.
Einbettung der notwendigen Dateien in die HTML Seite
Fügen Sie den folgenden Code zwischen die <head> </head> Tags in Ihrer HTML Seite ein:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script> <script type="text/javascript" src="//cdn.copilot-office.de/KUNDE/copilot.js"></script>
Damit das Skript verwendet werden kann, werden die beiden Bibliotheken jQuery und moment.js benötigt. In obigem Code Abschnitt sind diese bereits vorhanden.
Präparieren der HTML Seite zum Anzeigen der Termine
Damit die Termine angezeigt werden können, benötigen Sie ein Container HTML Element. In folgendem Beispiel verwenden wir eine Tabelle zum anzeigen der Termine. Damit das Container Element korrekt erkannt wird, muss die CSS Klasse cp-artist hinzugefügt werden. Binden Sie zunächst folgenden Code in die HTML Datei an der gewünschten Stelle ein:
<table> <thead> <tr> <th>Datum</th> <th>Einlass</th> <th>Beginn</th> <th>Tour</th> <th>Ticket URL</th> <th>Ticket Hotline</th> <th>Location</th> <th>Strasse</th> <th>PLZ</th> <th>Ort</th> </tr> </thead> <tbody class="cp-artist" data-size="10" data-artist-id="20a3f8bd-43da-42a7-8d96-77724c4de7d7"> <tr> <td class="cp-date" data-format="DD.MM.YYYY"></td> <td class="cp-entrance" data-format="HH:mm">--:--</td> <td class="cp-start" data-format="HH:mm">--:--</td> <td class="cp-tour meineEigeneCSSKlasse">---</td> <td class="cp-ticketURL" data-link-name="Hier klicken" data-link-target="_blank">---</td> <td class="cp-ticketPhone">---</td> <td class="cp-locationName">---</td> <td class="cp-locationStreet">---</td> <td class="cp-locationZip">---</td> <td class="cp-locationCity" style="font-weight:bold">---</td> </tr> </tbody> </table>
Dem Container Element (im Beispiel das Tag tbody) können weitere Eigenschaften angegeben werden. Wichtig ist für den ersten Schritt, dass sie das HTML Attribut data-artist-id entsprechend anpassen. Hier muss die interne co*pilot ID des Künstlers eingetragen werden.
Steuerung was angezeigt werden soll
Die Datei copilot.js lädt für den angegebenen Künstler nun alle Daten von der Webseitenschnittstelle und fügt die Daten in entsprechend gekennzeichnete HTML Elemente ein. Damit ein HTML befüllt werden kann, müssen die entsprechenden CSS Klassen beim HTML Element angegeben werden.
Aufstellung der verfügbaren CSS Klassen
| CSS Klasse | Beschreibung |
|---|---|
| cp-date | Datum der Veranstaltung |
| cp-entrance | Einlass der Veranstaltung |
| cp-start | Beginn der Veranstaltung |
| cp-tour | Der Name der Tour unter welcher die Veranstaltung stattfindet |
| cp-ticketURL | Ein Hyperlink zum Kartenvorverkauf |
| cp-ticketPhone | Eine Telefonnummer, über welche Tickets erworben werden können |
| cp-locationName | Der Name des Veranstaltungsorts |
| cp-locationStreet | Die Strasse des Veranstaltungsorts |
| cp-locationZIP | Die Postleitzahl des Veranstaltungsorts |
| cp-locationCity | Die Stadt des Veranstaltungsorts |
Bei manchen dieser Felder können noch weitere HTML Attribute angegeben werden um zum Beispiel festzulegen, wie der eingefügte Text formatiert werden soll. Diese seien im folgenden Erläutert:
cp-date
Hierbei handelt es sich um ein Datum. Durch die angabe des HTML Attributs data-format kann festgelegt werden, wie das Datum formatiert werden soll. Beispiele hierfür sind: data-format=”DD.MM.YYYY” oder data-format=”DD/MM/YYYY”
cp-start / cp-entrance
Hierbei handelt es sich um eine Uhrzeit, welche ebenfalls wie ein Datum formatiert werden kann. Dazu ist ebenfalls das Attribut data-format anzugeben. Beispiele hierfür sind: data-format=”HH:mm” oder data-format=”HH:mm:ss”
p-ticketURL
Hier wird ein Hyperlink erzeugt. Den Text des Links können sie über das Attribut data-link-name steuern. Beispiel data-link-name=”Hier klicken”. Ob die Seite in einem neuen Tab geöffnet werden soll, können Sie festlegen, indem Sie das Attribut data-link-target=”_blank” mit angeben.
Steuerung der Seiten
Da ein Künstler mehrere Veranstaltung haben kann (oftmals mehr als 30), besteht die Möglichkeit die Auflistung der Veranstaltungen in Seiten aufzuteilen. Es wird dann automatisch eine kleine Navigation eingebunden, welche es dem Besucher der Seite erlaubt durch diese Seiten zu blättern. Wie diese Seiten aufgeteilt werden sollen, können Sie beim Container Element (in diesem Beispiel das tbody Element) mit angeben. Hierzu stehen Ihnen 2 Attribute zur Verfügung.
data-size
Mit diesem Attribut bestimmen Sie wieviele Einträge pro Seite angegeben werden sollen. Wenn Sie keine Seitennavigation haben möchten setzen Sie dies einfach auf einen sehr hohen Wert. Beispiele: data-size=”10” zeigt 10 Veranstaltungen an, data-size=”1000” würde theoretisch 1000 Veranstaltungen anzeigen. Da aber in der Praxis nicht soviele künftige Veranstaltungen pro Künstler angelegt werden, kann man davon ausgehen, dass alle angezeigt werden.
data-sort
Mit diesem Attribut geben Sie an, in welcher Reihenfolge die Veranstaltungen sortiert werden sollen. In der Regel werden siese meist chronologisch aufsteigend angezeigt. Dies erreichen Sie mit data-sort=”dateOfEvent,asc”
Falls Sie eine andere Sortierung wünschen, kontaktieren Sie uns bitte hierfür.
Weitere Beispiele
Anstelle von Tabellen können Sie auch mit <div> Elementen arbeiten. Diese eigenen sich in der Regel besser um sie mit CSS Eigenschaften dekorieren zu können.
Auf unserem Server stehen hierfür ein paar Beispiele bereit.
Sehen Sie sich dazu bitten den Quelltext folgender HTML Seiten an:
Das Dokument aus dieser Dokumentation finden Sie unter
https://cdn.copilot-office.de/suedpol/test.html
Ein Beispiel, welches <div> Elemente verwendet
https://cdn.copilot-office.de/suedpol/div.html
Ein Beispiel mit mehreren Künstlern