{"_id":"57ea85c97728c8220022bff4","__v":1,"version":{"_id":"5703898d18ad001700a2968d","project":"56d43c20ffd25c150090e049","__v":1,"hasDoc":true,"hasReference":true,"createdAt":"2016-04-05T09:46:53.342Z","releaseDate":"2016-04-05T09:46:53.342Z","categories":["5703898d18ad001700a2968e","5703898d18ad001700a2968f","5703898d18ad001700a29690","5703898d18ad001700a29691","5703898d18ad001700a29692"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"1.2.0","version":"1.2"},"project":"56d43c20ffd25c150090e049","user":"561f59254d67490d00804aa2","category":{"_id":"5703898d18ad001700a29692","version":"5703898d18ad001700a2968d","__v":0,"project":"56d43c20ffd25c150090e049","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-03-01T08:10:52.598Z","from_sync":false,"order":1,"slug":"javascript-client","title":"Javascript-Client"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-27T14:44:25.789Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Einleitung\"\n}\n[/block]\nDer **CF JS Client** ist ein JavaScript geschriebenes Frontend-Framework, welches vorgefertigte modulare Komponenten über die CF API lädt und rendert (via [React](https://facebook.github.io/react/)). Außerdem wird ein Standard-CSS mitgeliefert, welches als rudimentäre Basis für die Darstellung dienen kann. \n\nVoraussetzung für die Nutzung ist eine gültige CF API Client ID.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"|index.php\\n|-cf-js-client\\n   |-base.css\\n   |-cf-api.min.js\",\n      \"language\": \"text\",\n      \"name\": \"Beispiel Verzeichnisstruktur\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"Aktuelle Ressourcen\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Die jeweils aktuelle Version des API Clients steht stets in unserem Repository bei GitHub zur Verfügung.\\n\\nLink: https://github.com/finlane/cf-api-client\",\n  \"title\": \"API Client Repository bei Github\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Skripteinbindung ins Template\"\n}\n[/block]\nFür die Einbindung müssen lediglich die CSS (optional) und CF-API-JS-Dateien eingebunden werden. **Die JS muss zwingend am Seitenende eingefügt werden.**\n\nEinzige JS-Abhängigkeit ist jQuery!\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://code.jquery.com/jquery-3.1.1.min.js\\\"></script>\\n<script src=\\\"cf-js-client/cf-api.min.js\\\"></script>\\n<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"cf-js-client/style.css\\\" />\",\n      \"language\": \"html\",\n      \"name\": \"Beispieleinbindung\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"2. Globale Konfiguration\"\n}\n[/block]\nUm die Anbindung an eine API zu konfigurieren, muss ein globales Config-Objekt angelegt werden. **Verpflichtend ist die Angabe einer clientID und einer baseURL.** \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\n\\tvar cfmAPIConfig = {\\n\\t\\tbaseURL: 'https://api.startnext.com/', //default: '/tycon/modules/crowdfunding/api/' (greift also standardmäßig auf aktuelles Web zu!)\\n\\t\\tversion: '1.2', //API-Version, default: '1.2'\\n\\t\\tclientID: 123456789, //API-Client-ID, default: -\\n\\t\\tcurrencySymbol: '{$smarty.const.CF_CURRENCY_SYMBOL}', //Währungssymbol, default: '€'\\n\\t\\tlang: 'en' //Sprache für API-Abruf, default: 'de',\\n    includeDemoItems: false, //Sollen Projekte und Pages im DEMO-Modus angezeigt werden? Default: false\\n    url: {\\n\\t\\t\\tprojectDetail: '/API-Projektdetail.html?id=[ID]&title=[TITLE]' // URL zur Projektdetailseite. '[ID]' muss enthalten sein, '[TITLE]' ist optional. Wird die 'url' Konfiguration weggelassen, führt der Link zur original Projektseite (z.B. auf startnext.com).\\n\\t\\t}\\n\\t}\\n</script>\",\n      \"language\": \"html\",\n      \"name\": \"Globale Konfiguration des JS-Clients\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"3. Übersicht der aktuell verfügbaren Frontend-Module\"\n}\n[/block]\nEin Modul wird immer über seine **CSS-Klasse** angesprochen und kann, sofern vorgesehen über data-Attribute konfiguriert werden.\nDiese Frontend-Module sind in Funktion und Umfang abgesehen von den Konfigurations-Möglichkeiten fix.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"cfApiFilteredProjects\\\"></div>\",\n      \"language\": \"html\",\n      \"name\": \"Beispiel Einbinden einer Projektliste\"\n    }\n  ]\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Bezeichnung\",\n    \"h-1\": \"CSS-Klasse\",\n    \"h-2\": \"Konfigurations-Attribute\",\n    \"h-3\": \"Beschreibung\",\n    \"0-0\": \"Projektfilter\",\n    \"0-1\": \"cfApiProjectsFilter\",\n    \"0-2\": \"data-sort: ein [Sortierparameter](doc:sortierparameter)\\n\\ndata-limit: Integer-Wert für die Anzahl der mit einem Abruf geholten Projekte (default: 10)\",\n    \"0-3\": \"Filter (Selects) zur Filterung einer Projektliste. Filtereinstellungen filtern andere Filtereinstellungen mit.\",\n    \"1-0\": \"Projektliste\",\n    \"2-0\": \"Projektlisten-Statistiken\",\n    \"3-0\": \"Notifications\",\n    \"4-0\": \"Notifications-Info\",\n    \"6-0\": \"Pfadnavigation zu Unterhaltung\",\n    \"7-0\": \"Infos zu Unterhaltung\",\n    \"8-0\": \"Projektfilter für Unterhaltungen\",\n    \"9-0\": \"Liste von Unterhaltungen\",\n    \"10-0\": \"Pinnwand/Blogkommentare\",\n    \"11-0\": \"Projektdetailansicht\",\n    \"1-1\": \"cfApiFilteredProjects\",\n    \"2-1\": \"cfApiProjectsStatistics\",\n    \"3-1\": \"cfApiNotifications\",\n    \"4-1\": \"cfApiNotificationInfo\",\n    \"5-0\": \"Unterhaltung\",\n    \"5-1\": \"cfApiConversation\",\n    \"6-1\": \"cfApiConversationBreadcrumb\",\n    \"7-1\": \"cfApiConversationInfo\",\n    \"8-1\": \"cfApiConversationsProjectsSelect\",\n    \"9-1\": \"cfApiConversationList\",\n    \"10-1\": \"cfApiWall\",\n    \"11-1\": \"cfApiProjectDetails\",\n    \"1-2\": \"data-lazyload: Nachladen von weiteren Projekten beim Scrollen zum Listenende aktivieren/deaktivieren (0/1, default: 1)\\n\\ndata-sort: ein [Sortierparameter](doc:sortierparameter) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**\\n\\ndata-status: ein Projektstatus, siehe [Filterkriterien](doc:filterkriterien) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**\\n\\ndata-limit: Integer-Wert für die Anzahl der mit einem Abruf geholten Projekte (default: 10) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**\",\n    \"2-2\": \"-\",\n    \"3-2\": \"-\",\n    \"1-3\": \"Liste von Projekten, je nach Filterung. Ist kein Filter gewählt, werden alle Projekte des API-Clients aufgelistet.\",\n    \"2-3\": \"Zu einem Filter gehörende Statistiken. Ist kein Filter gewählt, werden alle Projekte ausgewertet, die dem API-Client zur Verfügung stehen.\",\n    \"3-3\": \"Ungelesene Notifications des angemeldeten Nutzers.\",\n    \"4-3\": \"Marker, ob es eine ungelesene Notification gibt oder nicht\",\n    \"4-2\": \"-\",\n    \"5-3\": \"Unterhaltung in privater/Projektkommunikation\",\n    \"5-2\": \"data-conversation-id: ID der Unterhaltung\\n\\ndata-description: \\nBeschreibungstext (optional)\\n\\ndata-replies-allowed: Antworten auf Einträge erlauben (optional, Standard 0)\",\n    \"6-2\": \"data-conversation-id: ID der Unterhaltung\\n\\ndata-conversation-list-url: Link zur zugehörigen Liste, in der die Unterhaltung vorkommt.\\n\\ndata-conversation-list-caption: Text des Listenlinks\",\n    \"7-2\": \"data-conversation-id: ID der Unterhaltung\",\n    \"8-2\": \"-\",\n    \"9-2\": \"data-empty-list-message: Nachricht, wenn Liste leer ist (optional)\",\n    \"10-3\": \"Pinnwand eines Projekts **ODER** Kommentare zu Blogbeiträgen von Page oder Projekt oder Plattform.\",\n    \"10-2\": \"data-blog-entry-id: ID des Blogbeitrags (optional)\\n\\ndata-project-id: Projekt-ID (optional)\\n\\ndata-is-platform-manager: Info, ob der aktuelle Nutzer Manager ist (erleichtert Zugriffsprüfungen, optional)\",\n    \"11-2\": \"data-id: ID des Projekts\",\n    \"11-3\": \"siehe unten\"\n  },\n  \"cols\": 4,\n  \"rows\": 12\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"4. Module der Projektdetailansicht\"\n}\n[/block]\nFür die Anzeige der Projektdetailansicht gibt es viele kleine Einzelmodule, die alle die CSS-Klasse *cfApiProjectDetails* haben müssen. Welches Modul angezeigt wird, wird über das Attribut „data-type“ definiert. Im Attribut „data-id“ muss zwingend die ID des Projekts angegeben werden.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class=\\\"cfApiProjectDetails\\\" data-type=\\\"titleImage\\\" data-id=\\\"<?php echo (int)$_GET['projectId']; ?>\\\"></div>\",\n      \"language\": \"html\",\n      \"name\": \"Beispieleinbindung\"\n    }\n  ]\n}\n[/block]\nVerfügbare Module des Projektdetails:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Bezeichnung\",\n    \"h-1\": \"Wert für „data-type“\",\n    \"h-2\": \"Beschreibung / Konfiguration\",\n    \"0-1\": \"title\",\n    \"1-1\": \"titleImage\",\n    \"2-1\": \"blog\",\n    \"3-1\": \"video\",\n    \"4-1\": \"sound\",\n    \"5-1\": \"gallery\",\n    \"6-1\": \"facts\",\n    \"7-1\": \"statistics\",\n    \"8-1\": \"description\",\n    \"9-1\": \"descriptionUpdates\",\n    \"10-1\": \"questions\",\n    \"11-1\": \"starter\",\n    \"12-1\": \"imprint\",\n    \"13-1\": \"incentives\",\n    \"14-1\": \"teams\",\n    \"15-1\": \"fans\",\n    \"16-1\": \"fundings\",\n    \"17-1\": \"partners\",\n    \"0-0\": \"Projekttitel\",\n    \"1-0\": \"Titelbild\",\n    \"2-0\": \"Blog\",\n    \"3-0\": \"Video-Embed\",\n    \"4-0\": \"Sound-Embed\",\n    \"5-0\": \"Bildergalerie\",\n    \"6-0\": \"Fakten\",\n    \"7-0\": \"Statistiken\",\n    \"8-0\": \"Projektbeschreibung\",\n    \"9-0\": \"Updates der Projektbeschreibung\",\n    \"10-0\": \"Fragen\",\n    \"11-0\": \"Projektstarter\",\n    \"12-0\": \"Impressum\",\n    \"13-0\": \"Dankeschöns\",\n    \"14-0\": \"Projektteams\",\n    \"15-0\": \"Fans\",\n    \"16-0\": \"Unterstützungen\",\n    \"17-0\": \"Partner\",\n    \"0-2\": \"-\",\n    \"1-2\": \"Großes Titelbild des Projekts.\",\n    \"2-2\": \"Liste der Blogbeiträge (Lazyloading bei Scrolling)\",\n    \"3-2\": \"Videoeinbindung (iframe) von Youtube oder Vimeo\",\n    \"4-2\": \"Sound-Einbindung (iframe) von Soundcloud\",\n    \"5-2\": \"Galerie von Projektbildern\",\n    \"6-2\": \"Umfasst:\\n  * Keywords\\n  * Kategorie\\n  * Ort\\n  * Finanzierungsschwelle\\n  * Finanzierungsziel\\n  * Realisierungszeitraum\",\n    \"7-2\": \"Umfasst:\\n  * Finanzierungszeitraum\\n  * Aktueller Finanzierungsstatus\\n  * Anzahl Unterstützungen\\n  * Anzahl Fans\\n  * Tage verbleibend\",\n    \"8-2\": \"Kurzbeschreibung des Projekts\",\n    \"9-2\": \"Aktualisierungen dieser Kurzbeschreibung\",\n    \"10-2\": \"Detaillierte Beschreibung des Projekts in Form von x Fragen und Antworten\",\n    \"11-2\": \"Informationen zum Starter (mit Bild)\",\n    \"12-2\": \"Offizielles Impressum des Projekts\",\n    \"13-2\": \"Dankeschönliste mit Möglichkeit, nach Auswahl von Dankeschöns und Eingabe eines freien Betrags in den Checkout zu wechseln (sofern Projekt in Finanzierungsphase)\",\n    \"14-2\": \"Teams des Projekts (Nutzer, die das Projekt verwalten)\",\n    \"15-2\": \"Liste von Fans\",\n    \"16-2\": \"Liste von Unterstützungen\",\n    \"17-2\": \"Projektpartner (mit Bild und externem Link)\",\n    \"18-1\": \"fanButton\",\n    \"18-0\": \"Fan-Werden-Button\",\n    \"18-2\": \"Ermöglicht das Ändern des Fan-Status für den aktuellen Nutzer. Ruft ein Login-Fenster auf der Zielplattform auf, sofern der Nutzer noch nicht eingeloggt ist. Wenn der Fan-Status erfolgreich gesetzt wurde, kann er bei erneutem Klick auf den Knopf wieder entfernt werden.\",\n    \"19-0\": \"Aktuelle Phase des Projekts\",\n    \"19-1\": \"phase\",\n    \"19-2\": \"Einfacher Text, der die aktuelle Phase ausgibt\"\n  },\n  \"cols\": 3,\n  \"rows\": 20\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"5. Module der Contest-Detailansicht\"\n}\n[/block]\nFür die Anzeige der Page-Contest-Detailansicht gibt es viele kleine Einzelmodule, die alle die CSS-Klasse *cfApiContestDetails* haben müssen. Welches Modul angezeigt wird, wird über das Attribut „data-type“ definiert. Im Attribut „data-id“ muss zwingend die ID des Contests angegeben werden.\n\nVerfügbare Module:\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Beschreibung\",\n    \"h-1\": \"Wert für \\\"data-type\\\"\",\n    \"h-2\": \"Beschreibung / Konfiguration\",\n    \"0-1\": \"title\",\n    \"1-1\": \"titleImage\",\n    \"2-1\": \"listImage\",\n    \"3-1\": \"description\",\n    \"4-1\": \"video\",\n    \"5-1\": \"participationRules\",\n    \"6-1\": \"applicationInformation\",\n    \"7-1\": \"statistics\",\n    \"8-1\": \"projects\",\n    \"0-0\": \"Contesttitel\",\n    \"1-0\": \"Titelbild\",\n    \"2-0\": \"Listenbild\",\n    \"3-0\": \"Beschreibung\",\n    \"3-2\": \"In HTML\",\n    \"4-2\": \"Videoeinbindung (iframe) von Youtube oder Vimeo\",\n    \"4-0\": \"Video-Embed\",\n    \"5-0\": \"Regeln\",\n    \"5-2\": \"In HTML\",\n    \"6-0\": \"Teilnehmerinformationen\",\n    \"6-2\": \"In HTML\",\n    \"7-0\": \"Contest-Statistiken\",\n    \"7-2\": \"Umfasst\\n  * Gesamtsumme an Fundings\\n  * verbleibende Zeit\\n  * Anzahl Projekte gesamt\\n  * Anzahl Fans insg.\\n  * Anzahl Unterstützer insg.\",\n    \"8-0\": \"Projekte\",\n    \"8-2\": \"Am Contest teilnehmende Projekte, sortiert nach aktueller Contest-Platzierung\",\n    \"2-2\": \"Im Attribut **data-size** kann eine Bildgröße angegeben werden. Diese sind in [Image](doc:image) definiert. Standard hier ist \\\"medium\\\".\",\n    \"1-2\": \"Im Attribut **data-size** kann eine Bildgröße angegeben werden. Diese sind in [Image](doc:image) definiert. Standard hier ist \\\"medium\\\".\",\n    \"0-2\": \"-\"\n  },\n  \"cols\": 3,\n  \"rows\": 9\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"6. Beispielimplementationen\"\n}\n[/block]\n## Beispiel Projektdetail\nDieses Beispiel fragt Namen, Titelbild, Beschreibung und Video eines Projekts von der API ab und rendert diese Bestandteile in die Seite.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  \\n  <head>\\n    <title>CF API JS Client - Project Page</title>\\n  </head>\\n  \\n  <body>\\n    \\n    <h1 class=\\\"cfApiProjectDetails\\\" data-type=\\\"title\\\" data-id=\\\"45786\\\"></h1>\\n    <div class=\\\"cfApiProjectDetails\\\" data-type=\\\"titleImage\\\" data-id=\\\"45786\\\"></div>\\n    <div class=\\\"cfApiProjectDetails\\\" data-type=\\\"description\\\" data-id=\\\"45786\\\"></div>\\n    <div class=\\\"cfApiProjectDetails\\\" data-type=\\\"video\\\" data-id=\\\"45786\\\"></div>\\n    \\n    <script>\\n      var cfmAPIConfig = {\\n        baseURL: 'https://api.startnext.com/',\\n        clientID: 123456789\\n      };\\n\\t\\t</script>\\n    \\n    <script src=\\\"https://code.jquery.com/jquery-3.1.1.min.js\\\"></script>\\n\\t\\t<script src=\\\"cf-js-client/cf-api.min.js\\\"></script>\\n\\t\\t<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"cf-js-client/style.css\\\" />\\n    \\n  </body>\\n  \\n</html>\",\n      \"language\": \"html\",\n      \"name\": \"Anzeige eines Beispielprojekts\"\n    }\n  ]\n}\n[/block]\n## Beispiel Projektübersicht\nDieses Beispiel zeigt die Seite der Projektübersicht inklusive Filter und Statistiken an.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  \\n  <head>\\n    <title>CF API JS Client - Project List</title>\\n  </head>\\n  \\n  <body>\\n    \\n    <div class=\\\"cfApiProjectsFilter\\\"></div>\\n    <div class=\\\"cfApiProjectsStatistics\\\"></div>\\n    <div class=\\\"cfApiFilteredProjects\\\"></div>\\n    \\n    <script>\\n      var cfmAPIConfig = {\\n        baseURL: 'https://api.startnext.com/',\\n        clientID: 123456789\\n      };\\n\\t\\t</script>\\n    \\n    <script src=\\\"https://code.jquery.com/jquery-3.1.1.min.js\\\"></script>\\n\\t\\t<script src=\\\"cf-js-client/cf-api.min.js\\\"></script>\\n\\t\\t<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"cf-js-client/style.css\\\" />\\n    \\n  </body>\\n  \\n</html>\",\n      \"language\": \"html\",\n      \"name\": \"Anzeige der Projektliste\"\n    }\n  ]\n}\n[/block]\n## Beispiel Contestdetailseite mit Contest-Liste und Contest-Titel\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<html>\\n  \\n  <head>\\n    <title>CF API JS Client - Contest Detail</title>\\n  </head>\\n  \\n  <body>\\n    \\n    <div class=\\\"cfApiContestDetails\\\" data-type=\\\"title\\\" data-id=\\\"<?php echo (int)$_GET['contestId']; ?>\\\"></div>\\n    <div class=\\\"cfApiContestDetails\\\" data-type=\\\"projects\\\" data-id=\\\"<?php echo (int)$_GET['contestId']; ?>\\\"></div>\\n    \\n    <script>\\n      var cfmAPIConfig = {\\n        baseURL: 'https://api.startnext.com/',\\n        clientID: 123456789\\n      };\\n\\t\\t</script>\\n    \\n    <script src=\\\"https://code.jquery.com/jquery-3.1.1.min.js\\\"></script>\\n\\t\\t<script src=\\\"cf-js-client/cf-api.min.js\\\"></script>\\n\\t\\t<link rel=\\\"stylesheet\\\" type=\\\"text/css\\\" href=\\\"cf-js-client/style.css\\\" />\\n    \\n  </body>\\n  \\n</html>\",\n      \"language\": \"php\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"js-client","type":"basic","title":"JS-Client"}
[block:api-header] { "type": "basic", "title": "Einleitung" } [/block] Der **CF JS Client** ist ein JavaScript geschriebenes Frontend-Framework, welches vorgefertigte modulare Komponenten über die CF API lädt und rendert (via [React](https://facebook.github.io/react/)). Außerdem wird ein Standard-CSS mitgeliefert, welches als rudimentäre Basis für die Darstellung dienen kann. Voraussetzung für die Nutzung ist eine gültige CF API Client ID. [block:code] { "codes": [ { "code": "|index.php\n|-cf-js-client\n |-base.css\n |-cf-api.min.js", "language": "text", "name": "Beispiel Verzeichnisstruktur" } ] } [/block] [block:api-header] { "title": "Aktuelle Ressourcen" } [/block] [block:callout] { "type": "info", "body": "Die jeweils aktuelle Version des API Clients steht stets in unserem Repository bei GitHub zur Verfügung.\n\nLink: https://github.com/finlane/cf-api-client", "title": "API Client Repository bei Github" } [/block] [block:api-header] { "type": "basic", "title": "1. Skripteinbindung ins Template" } [/block] Für die Einbindung müssen lediglich die CSS (optional) und CF-API-JS-Dateien eingebunden werden. **Die JS muss zwingend am Seitenende eingefügt werden.** Einzige JS-Abhängigkeit ist jQuery! [block:code] { "codes": [ { "code": "<script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"></script>\n<script src=\"cf-js-client/cf-api.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"cf-js-client/style.css\" />", "language": "html", "name": "Beispieleinbindung" } ] } [/block] [block:api-header] { "type": "basic", "title": "2. Globale Konfiguration" } [/block] Um die Anbindung an eine API zu konfigurieren, muss ein globales Config-Objekt angelegt werden. **Verpflichtend ist die Angabe einer clientID und einer baseURL.** [block:code] { "codes": [ { "code": "<script>\n\tvar cfmAPIConfig = {\n\t\tbaseURL: 'https://api.startnext.com/', //default: '/tycon/modules/crowdfunding/api/' (greift also standardmäßig auf aktuelles Web zu!)\n\t\tversion: '1.2', //API-Version, default: '1.2'\n\t\tclientID: 123456789, //API-Client-ID, default: -\n\t\tcurrencySymbol: '{$smarty.const.CF_CURRENCY_SYMBOL}', //Währungssymbol, default: '€'\n\t\tlang: 'en' //Sprache für API-Abruf, default: 'de',\n includeDemoItems: false, //Sollen Projekte und Pages im DEMO-Modus angezeigt werden? Default: false\n url: {\n\t\t\tprojectDetail: '/API-Projektdetail.html?id=[ID]&title=[TITLE]' // URL zur Projektdetailseite. '[ID]' muss enthalten sein, '[TITLE]' ist optional. Wird die 'url' Konfiguration weggelassen, führt der Link zur original Projektseite (z.B. auf startnext.com).\n\t\t}\n\t}\n</script>", "language": "html", "name": "Globale Konfiguration des JS-Clients" } ] } [/block] [block:api-header] { "type": "basic", "title": "3. Übersicht der aktuell verfügbaren Frontend-Module" } [/block] Ein Modul wird immer über seine **CSS-Klasse** angesprochen und kann, sofern vorgesehen über data-Attribute konfiguriert werden. Diese Frontend-Module sind in Funktion und Umfang abgesehen von den Konfigurations-Möglichkeiten fix. [block:code] { "codes": [ { "code": "<div class=\"cfApiFilteredProjects\"></div>", "language": "html", "name": "Beispiel Einbinden einer Projektliste" } ] } [/block] [block:parameters] { "data": { "h-0": "Bezeichnung", "h-1": "CSS-Klasse", "h-2": "Konfigurations-Attribute", "h-3": "Beschreibung", "0-0": "Projektfilter", "0-1": "cfApiProjectsFilter", "0-2": "data-sort: ein [Sortierparameter](doc:sortierparameter)\n\ndata-limit: Integer-Wert für die Anzahl der mit einem Abruf geholten Projekte (default: 10)", "0-3": "Filter (Selects) zur Filterung einer Projektliste. Filtereinstellungen filtern andere Filtereinstellungen mit.", "1-0": "Projektliste", "2-0": "Projektlisten-Statistiken", "3-0": "Notifications", "4-0": "Notifications-Info", "6-0": "Pfadnavigation zu Unterhaltung", "7-0": "Infos zu Unterhaltung", "8-0": "Projektfilter für Unterhaltungen", "9-0": "Liste von Unterhaltungen", "10-0": "Pinnwand/Blogkommentare", "11-0": "Projektdetailansicht", "1-1": "cfApiFilteredProjects", "2-1": "cfApiProjectsStatistics", "3-1": "cfApiNotifications", "4-1": "cfApiNotificationInfo", "5-0": "Unterhaltung", "5-1": "cfApiConversation", "6-1": "cfApiConversationBreadcrumb", "7-1": "cfApiConversationInfo", "8-1": "cfApiConversationsProjectsSelect", "9-1": "cfApiConversationList", "10-1": "cfApiWall", "11-1": "cfApiProjectDetails", "1-2": "data-lazyload: Nachladen von weiteren Projekten beim Scrollen zum Listenende aktivieren/deaktivieren (0/1, default: 1)\n\ndata-sort: ein [Sortierparameter](doc:sortierparameter) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**\n\ndata-status: ein Projektstatus, siehe [Filterkriterien](doc:filterkriterien) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**\n\ndata-limit: Integer-Wert für die Anzahl der mit einem Abruf geholten Projekte (default: 10) - **greift nur, wenn kein cfApiProjectsFilter vorhanden ist!**", "2-2": "-", "3-2": "-", "1-3": "Liste von Projekten, je nach Filterung. Ist kein Filter gewählt, werden alle Projekte des API-Clients aufgelistet.", "2-3": "Zu einem Filter gehörende Statistiken. Ist kein Filter gewählt, werden alle Projekte ausgewertet, die dem API-Client zur Verfügung stehen.", "3-3": "Ungelesene Notifications des angemeldeten Nutzers.", "4-3": "Marker, ob es eine ungelesene Notification gibt oder nicht", "4-2": "-", "5-3": "Unterhaltung in privater/Projektkommunikation", "5-2": "data-conversation-id: ID der Unterhaltung\n\ndata-description: \nBeschreibungstext (optional)\n\ndata-replies-allowed: Antworten auf Einträge erlauben (optional, Standard 0)", "6-2": "data-conversation-id: ID der Unterhaltung\n\ndata-conversation-list-url: Link zur zugehörigen Liste, in der die Unterhaltung vorkommt.\n\ndata-conversation-list-caption: Text des Listenlinks", "7-2": "data-conversation-id: ID der Unterhaltung", "8-2": "-", "9-2": "data-empty-list-message: Nachricht, wenn Liste leer ist (optional)", "10-3": "Pinnwand eines Projekts **ODER** Kommentare zu Blogbeiträgen von Page oder Projekt oder Plattform.", "10-2": "data-blog-entry-id: ID des Blogbeitrags (optional)\n\ndata-project-id: Projekt-ID (optional)\n\ndata-is-platform-manager: Info, ob der aktuelle Nutzer Manager ist (erleichtert Zugriffsprüfungen, optional)", "11-2": "data-id: ID des Projekts", "11-3": "siehe unten" }, "cols": 4, "rows": 12 } [/block] [block:api-header] { "type": "basic", "title": "4. Module der Projektdetailansicht" } [/block] Für die Anzeige der Projektdetailansicht gibt es viele kleine Einzelmodule, die alle die CSS-Klasse *cfApiProjectDetails* haben müssen. Welches Modul angezeigt wird, wird über das Attribut „data-type“ definiert. Im Attribut „data-id“ muss zwingend die ID des Projekts angegeben werden. [block:code] { "codes": [ { "code": "<div class=\"cfApiProjectDetails\" data-type=\"titleImage\" data-id=\"<?php echo (int)$_GET['projectId']; ?>\"></div>", "language": "html", "name": "Beispieleinbindung" } ] } [/block] Verfügbare Module des Projektdetails: [block:parameters] { "data": { "h-0": "Bezeichnung", "h-1": "Wert für „data-type“", "h-2": "Beschreibung / Konfiguration", "0-1": "title", "1-1": "titleImage", "2-1": "blog", "3-1": "video", "4-1": "sound", "5-1": "gallery", "6-1": "facts", "7-1": "statistics", "8-1": "description", "9-1": "descriptionUpdates", "10-1": "questions", "11-1": "starter", "12-1": "imprint", "13-1": "incentives", "14-1": "teams", "15-1": "fans", "16-1": "fundings", "17-1": "partners", "0-0": "Projekttitel", "1-0": "Titelbild", "2-0": "Blog", "3-0": "Video-Embed", "4-0": "Sound-Embed", "5-0": "Bildergalerie", "6-0": "Fakten", "7-0": "Statistiken", "8-0": "Projektbeschreibung", "9-0": "Updates der Projektbeschreibung", "10-0": "Fragen", "11-0": "Projektstarter", "12-0": "Impressum", "13-0": "Dankeschöns", "14-0": "Projektteams", "15-0": "Fans", "16-0": "Unterstützungen", "17-0": "Partner", "0-2": "-", "1-2": "Großes Titelbild des Projekts.", "2-2": "Liste der Blogbeiträge (Lazyloading bei Scrolling)", "3-2": "Videoeinbindung (iframe) von Youtube oder Vimeo", "4-2": "Sound-Einbindung (iframe) von Soundcloud", "5-2": "Galerie von Projektbildern", "6-2": "Umfasst:\n * Keywords\n * Kategorie\n * Ort\n * Finanzierungsschwelle\n * Finanzierungsziel\n * Realisierungszeitraum", "7-2": "Umfasst:\n * Finanzierungszeitraum\n * Aktueller Finanzierungsstatus\n * Anzahl Unterstützungen\n * Anzahl Fans\n * Tage verbleibend", "8-2": "Kurzbeschreibung des Projekts", "9-2": "Aktualisierungen dieser Kurzbeschreibung", "10-2": "Detaillierte Beschreibung des Projekts in Form von x Fragen und Antworten", "11-2": "Informationen zum Starter (mit Bild)", "12-2": "Offizielles Impressum des Projekts", "13-2": "Dankeschönliste mit Möglichkeit, nach Auswahl von Dankeschöns und Eingabe eines freien Betrags in den Checkout zu wechseln (sofern Projekt in Finanzierungsphase)", "14-2": "Teams des Projekts (Nutzer, die das Projekt verwalten)", "15-2": "Liste von Fans", "16-2": "Liste von Unterstützungen", "17-2": "Projektpartner (mit Bild und externem Link)", "18-1": "fanButton", "18-0": "Fan-Werden-Button", "18-2": "Ermöglicht das Ändern des Fan-Status für den aktuellen Nutzer. Ruft ein Login-Fenster auf der Zielplattform auf, sofern der Nutzer noch nicht eingeloggt ist. Wenn der Fan-Status erfolgreich gesetzt wurde, kann er bei erneutem Klick auf den Knopf wieder entfernt werden.", "19-0": "Aktuelle Phase des Projekts", "19-1": "phase", "19-2": "Einfacher Text, der die aktuelle Phase ausgibt" }, "cols": 3, "rows": 20 } [/block] [block:api-header] { "type": "basic", "title": "5. Module der Contest-Detailansicht" } [/block] Für die Anzeige der Page-Contest-Detailansicht gibt es viele kleine Einzelmodule, die alle die CSS-Klasse *cfApiContestDetails* haben müssen. Welches Modul angezeigt wird, wird über das Attribut „data-type“ definiert. Im Attribut „data-id“ muss zwingend die ID des Contests angegeben werden. Verfügbare Module: [block:parameters] { "data": { "h-0": "Beschreibung", "h-1": "Wert für \"data-type\"", "h-2": "Beschreibung / Konfiguration", "0-1": "title", "1-1": "titleImage", "2-1": "listImage", "3-1": "description", "4-1": "video", "5-1": "participationRules", "6-1": "applicationInformation", "7-1": "statistics", "8-1": "projects", "0-0": "Contesttitel", "1-0": "Titelbild", "2-0": "Listenbild", "3-0": "Beschreibung", "3-2": "In HTML", "4-2": "Videoeinbindung (iframe) von Youtube oder Vimeo", "4-0": "Video-Embed", "5-0": "Regeln", "5-2": "In HTML", "6-0": "Teilnehmerinformationen", "6-2": "In HTML", "7-0": "Contest-Statistiken", "7-2": "Umfasst\n * Gesamtsumme an Fundings\n * verbleibende Zeit\n * Anzahl Projekte gesamt\n * Anzahl Fans insg.\n * Anzahl Unterstützer insg.", "8-0": "Projekte", "8-2": "Am Contest teilnehmende Projekte, sortiert nach aktueller Contest-Platzierung", "2-2": "Im Attribut **data-size** kann eine Bildgröße angegeben werden. Diese sind in [Image](doc:image) definiert. Standard hier ist \"medium\".", "1-2": "Im Attribut **data-size** kann eine Bildgröße angegeben werden. Diese sind in [Image](doc:image) definiert. Standard hier ist \"medium\".", "0-2": "-" }, "cols": 3, "rows": 9 } [/block] [block:api-header] { "type": "basic", "title": "6. Beispielimplementationen" } [/block] ## Beispiel Projektdetail Dieses Beispiel fragt Namen, Titelbild, Beschreibung und Video eines Projekts von der API ab und rendert diese Bestandteile in die Seite. [block:code] { "codes": [ { "code": "<html>\n \n <head>\n <title>CF API JS Client - Project Page</title>\n </head>\n \n <body>\n \n <h1 class=\"cfApiProjectDetails\" data-type=\"title\" data-id=\"45786\"></h1>\n <div class=\"cfApiProjectDetails\" data-type=\"titleImage\" data-id=\"45786\"></div>\n <div class=\"cfApiProjectDetails\" data-type=\"description\" data-id=\"45786\"></div>\n <div class=\"cfApiProjectDetails\" data-type=\"video\" data-id=\"45786\"></div>\n \n <script>\n var cfmAPIConfig = {\n baseURL: 'https://api.startnext.com/',\n clientID: 123456789\n };\n\t\t</script>\n \n <script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"></script>\n\t\t<script src=\"cf-js-client/cf-api.min.js\"></script>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"cf-js-client/style.css\" />\n \n </body>\n \n</html>", "language": "html", "name": "Anzeige eines Beispielprojekts" } ] } [/block] ## Beispiel Projektübersicht Dieses Beispiel zeigt die Seite der Projektübersicht inklusive Filter und Statistiken an. [block:code] { "codes": [ { "code": "<html>\n \n <head>\n <title>CF API JS Client - Project List</title>\n </head>\n \n <body>\n \n <div class=\"cfApiProjectsFilter\"></div>\n <div class=\"cfApiProjectsStatistics\"></div>\n <div class=\"cfApiFilteredProjects\"></div>\n \n <script>\n var cfmAPIConfig = {\n baseURL: 'https://api.startnext.com/',\n clientID: 123456789\n };\n\t\t</script>\n \n <script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"></script>\n\t\t<script src=\"cf-js-client/cf-api.min.js\"></script>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"cf-js-client/style.css\" />\n \n </body>\n \n</html>", "language": "html", "name": "Anzeige der Projektliste" } ] } [/block] ## Beispiel Contestdetailseite mit Contest-Liste und Contest-Titel [block:code] { "codes": [ { "code": "<html>\n \n <head>\n <title>CF API JS Client - Contest Detail</title>\n </head>\n \n <body>\n \n <div class=\"cfApiContestDetails\" data-type=\"title\" data-id=\"<?php echo (int)$_GET['contestId']; ?>\"></div>\n <div class=\"cfApiContestDetails\" data-type=\"projects\" data-id=\"<?php echo (int)$_GET['contestId']; ?>\"></div>\n \n <script>\n var cfmAPIConfig = {\n baseURL: 'https://api.startnext.com/',\n clientID: 123456789\n };\n\t\t</script>\n \n <script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"></script>\n\t\t<script src=\"cf-js-client/cf-api.min.js\"></script>\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"cf-js-client/style.css\" />\n \n </body>\n \n</html>", "language": "php" } ] } [/block]