Public API: copilot.js: Unterschied zwischen den Versionen

Aus co*pilot Wiki
Zur Navigation springen Zur Suche springen
(Die Seite wurde neu angelegt: „/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf“)
 
Zeile 1: Zeile 1:
  +
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.
−
/google_drive/sp office gmbh/Technik/2015/documentation/copilot.js-Dokumentation.pdf
  
  +
  +
==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 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:
  +
  +
<nowiki>
  +
<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>
  +
</nowiki>
  +
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===
  +
{| class="wikitable"
  +
!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: <code>data-format=”DD.MM.YYYY”</code> oder <code>data-format=”DD/MM/YYYY”</code>
  +
====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====
  +
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.
  +
  +
==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: <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====
  +
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.
  +
  +
==Weitere Beispiele==
  +
Anstelle von Tabellen können Sie auch mit <code><nowiki><div></nowiki></code> 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 <code><nowiki><div></nowiki></code> Elemente verwendet
  +
  +
https://cdn.copilot-office.de/suedpol/div.html
  +
  +
  +
Ein Beispiel mit mehreren Künstlern
  +
  +
https://cdn.copilot-office.de/suedpol/multi.html

Version vom 28. März 2017, 13:04 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

Abgerufen von „https://wiki.copilot-office.de/index.php?title=Public_API:_copilot.js&oldid=423“