Public API: copilot.js: Unterschied zwischen den Versionen

Aktuelle Version vom 14. April 2023, 14:26 Uhr

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

https://cdn.copilot-office.de/suedpol/multi.html

@@ Zeile 3: / Zeile 3: @@
 ==Einbettung der notwendigen Dateien in die HTML Seite==
 Fügen Sie den folgenden Code zwischen die <code><nowiki><head></nowiki></code> <code><nowiki></head></nowiki></code> 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 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>
+ <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.
@@ Zeile 86: / Zeile 86: @@
 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====
+'''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: <code>data-format=”DD.MM.YYYY”</code> oder <code>data-format=”DD/MM/YYYY”</code>
-====cp-start / cp-entrance====
+'''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: <code>data-format=”HH:mm”</code> oder <code>data-format=”HH:mm:ss”</code>
-====p-ticketURL====
+'''p-ticketURL'''
 Hier wird ein Hyperlink erzeugt. Den Text des Links können sie über das Attribut data-link-name steuern. Beispiel <code>data-link-name=”Hier klicken”</code>. Ob die Seite in einem neuen Tab geöffnet werden soll, können Sie festlegen, indem Sie das Attribut <code>data-link-target=”_blank”</code> mit angeben.
@@ Zeile 97: / Zeile 103: @@
 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====
+'''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: <code>data-size=”10”</code> zeigt 10 Veranstaltungen an, <code>data-size=”1000”</code> 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====
+'''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 <code>data-sort=”dateOfEvent,asc”</code>
 Falls Sie eine andere Sortierung wünschen, kontaktieren Sie uns bitte hierfür.
@@ Zeile 108: / Zeile 116: @@
 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