Beispiele Collection-Viewer v4

Einfache Veranstaltungs-Daten ohne Nutzung von JSONata

Die meisten Informationen aus einer Veranstaltung sind einfach darzustellen, indem man einfach das korrekte "field" abfüllt.

HTML-Code

<collection-viewer
    collection="Content.Webseite"
    template="#beispiel1Template"
    filter='{"fromDate": "2024-01-22"}'
    params='{"maxImageHeight": "180", "maxImageWidth": "240"}'
    size="4"
    page="1">
  <ul class="collection-viewer-hook"></ul>
</collection-viewer>

<template id="beispiel1Template">
  <li class="cel-data-root">
    <div class="event">
      <cel-data-img class="event-img" 
        field="urls_image" 
        src-fallback="https://www.pngkey.com/png/detail/14-140872_event-tent-png.png" 
        alt="Veranstaltungsbild">
      </cel-data-img>
      <div class="event-info">
          <cel-data-datetime class="event-datetime" field="startDateTime" options='{"dateStyle":"long","timeStyle":"short"}'></cel-data-datetime>
          <cel-data class="event-title" field="title"></cel-data>
          <cel-data class="event-description" field="description"></cel-data>
          <cel-data-a class="location-link" field="location_url" target="_blank"></cel-data-a>
      </div>
    </div>
  </li>
</template>

Web-Ansicht

Komplexere Veranstaltungs-Daten mit JSONata

Weitere Informationen zu JSONata finden Sie hier.

Wenn die Veranstaltungs-Daten in einer komplexeren JSON-Struktur verschachtelt sind oder die Darstellung mit bestimmten Bedingungen verknüpft werden soll, reicht die Angabe des "field" nicht. Wir zeigen hier zwei Beispiele für den Einsatz von JSONata.

1. Die Event-Genres können in mehreren Sprachen erfasst werden und es können mehrere Genres pro Event erfasst werden. Damit dies auf der Homepage alles korrekt dargestellt wird, ist JSONata nötig.
2. Für die Beschreibung eines Events gibt es die Description und den Kurztext. Mit JSONata kann man nun z.B. den Kurztext darstellen, falls er abgefüllt ist. Ansonsten nimmt es die Description.

HTML-Code

<collection-viewer
    collection="Content.Webseite"
    template="#beispiel2Template"
    filter='{"fromDate": "2024-01-22"}'
    params='{"maxImageHeight": "180", "maxImageWidth": "240"}'
    size="4"
    page="1">
  <ul class="collection-viewer-hook"></ul>
</collection-viewer>

<template id="beispiel2Template">
  <li class="cel-data-root">
    <div class="event">
      <cel-data-img class="event-img" 
        field="urls_image" 
        src-fallback="https://www.pngkey.com/png/detail/14-140872_event-tent-png.png" 
        alt="Veranstaltungsbild">
      </cel-data-img>
      <div class="event-info">
          <cel-data class="event-genres" field="eventGenres" extract="prettyName[language='de'].text ~> $join(', ')"></cel-data>
          <cel-data-datetime class="event-datetime" field="startDateTime" options='{"dateStyle":"long","timeStyle":"short"}'></cel-data-datetime>
          <cel-data class="event-title" field="title"></cel-data>
          <cel-data field="shortText,description" extract="$exists(shortText)?shortText:description"></cel-data>
          <cel-data-a class="location-link" field="location_url" target="_blank"></cel-data-a>
      </div>
    </div>
  </li>
</template>

Web-Ansicht

JSON-Struktur eines Events

Das Beispiel ist eine Ausstellung mit der Struktur von Januar 2024 und ist möglicherweise nicht vollständig abgefüllt. Die Struktur kann sich seither geändert haben. Hier können Sie nachlesen, wie Sie die aktuelle Struktur selbst abfragen können. Voraussetzung dafür ist ein Event in Ihrer Datenbank, bei dem alle Felder abgefüllt wurden.

"results": [
{
  "performanceId": "Collection10-201409021757.151948",
  "progonEventId": "ProgonEvent.ProgonEvent48394",
  "state": "PUBLISHED",
  "title": "Seidenband – Kapital, Kunst & Krise",
  "titleRaw": "Seidenband – Kapital, Kunst & Krise",
  "description": "<p>Dauerausstellung</p>",
  "startDateTime": "2011-04-16T10:00:00",
  "endDateTime": "2024-12-31T17:00:00",
  "category_1_id": "9",
  "category_1_name": "Diverses",
  "category_2_id": "proz-11",
  "category_2_name": "Anderes",
  "createDate": "2011-02-28T15:33:11",
  "changeDate": "2019-10-22T00:00:00",
  "eventStartDateTime": "2011-04-16T10:00:00",
  "eventHasStartTime": true,
  "eventEndDateTime": "2024-12-31T17:00:00",
  "eventHasEndTime": true,
  "eventTimeType": "OPENING_HOURS",
  "eventForm": {
    "name": "ausstellung",
    "prettyName": [
      {
        "language": "de",
        "text": "Ausstellung"
      }
    ]
  },
  "eventGenres": [
    {
      "name": "geschichte",
      "prettyName": [
        {
          "language": "de",
          "text": "Geschichte"
        }
      ]
    }
  ],
  "targetGroups": [],
  "location_fullName": "Place.Place93",
  "location_name": "Museum.BL",
  "location_street": "Zeughausplatz 28",
  "location_city": "Liestal",
  "location_country": "CH",
  "location_url": "http://www.museum.bl.ch",
  "location_latitude": 47.4851197,
  "location_longitude": 7.7354709,
  "urls_image": "https://proz.prog.online/download/progonVeranstaltung/ProgonEvent48394/MuseumBL2DS.jpg?celwidth=240&celheight=180"
}]