Reserve

Extension-Key: reserve

TYPO3 Version:10 LTS9 LTS

Die Extension "reserve" bietet die Möglichkeit, für Besuche in zum Beispiel Zoos, Bibliotheken, Ladengeschäften und vielem mehr, Zeitfenster zu reservieren.

Der Besucher kann für sich und ggf. weitere Personen ein Ticket reservieren und erhält anschließend per Mail einen oder mehrere QR-Codes. Diese Codes können dann durch Mitarbeiter der Veranstaltung bzw. der Einrichtung beim Eintritt gescannt werden.

Die Extension wurde ursprünglich für einen unserer Kunden während des ersten Lockdowns der Corona-Pandemie entwickelt, um die Zugriffssteuerung in einem Wildpark zu regeln, steht inzwischen aber öffentlich im TYPO3 Extension Repository zur Verfügung.

In den folgenden Videos zeigen wir, was die Extension kann und wie man sie installiert und konfiguriert.

Was kann die Extension

In diesem Video zeigen wir, was die Extension eigentlich kann und wie so ein Buchungsvorgang aus Sicht eines Benutzers und eines Mitarbeiters abläuft.

Überblick im Backend

Die Extension bringt zwei Plugins mit:

  1. Für die Anzeige der Zeitfenster und Reservierung im Frontend
  2. Für das Scannen der QR-Codes

Damit das ganze richtig funktioniert, wird eine gewisse Ordner/Seitenstruktur empfohlen. In diesem Video schauen wir uns die Struktur und Daten der Demo-Installation ein wenig genauer an.

Eine Einrichtung anlegen

Im ersten Schritt muss eine sogenannte Einrichtung angelegt werden. Das kann ein Ladengeschäft sein, ein Zoo, ein Einkaufszentrum, eine Bücherei oder vieles mehr.

Innerhalb dieser Einrichtung müssen dann die buchbaren Zeitfenster angelegt werden. Hier kann auch eingestellt werden, wieviele Personen maxmimal ein Zeitfenster buchen können, und ob pro Reservierung auch mehr als eine Person reservieren kann. Ebenfalls kann das Aussehen des QR-Codes in einem gewissen Rahmen angepasst werden.

Plugin für Reservierungen anlegen

Im nächsten Schritt muss ein Plugin für die Reservierung angelegt werden. Auf dieser Seite können die Besucher im Frontend dann ein Zeitfenster auswählen und eines oder mehrere Tickets reservieren.

Geschützte Seiten für Mitarbeiter anlegen

Das zweite Plugin der Extension dient dazu, die gebuchten Reservierungen zu verwalten. Hierüber können dann die QR-Codes gescannt werden oder auch manuelle Check-Ins durchgeführt werden.

Die Seite, auf der dieses Plugin liegt, kann dann zum Beispiel direkt auf einem Smartphone oder Tablet aufgerufen werden, damit für den Scan des QR-Codes die eingebaute Kamera des Geräts genutzt werden kann.

Damit nur berechtigte Benutzer auf diese Seite zugreifen können, muss die Seite geschützt werden. Nur Personen, die sich zuvor im Frontend mit Ihrem Benutzernamen und Passwort authentifiziert haben, können die Seite aufrufen und den Scanner nutzen.

Scanner-Plugin einrichten

Auf der geschützten Seite muss nun das Plugin für den QR-Code Scanner angelegt werden.

Route Enhancer in der Site Config

Damit das Scannen der QR-Codes und das manuelle Einlösen der Buchungen funktioniert, muss die Site Configuration noch erweitert werden. Zum einen sollte der Bereich der Route Enhancer wie in der Dokumentation beschrieben ergänzt werden.

Zum anderen muss noch ein weiterer Parameter hinzugefügt werden. Ein bestimmter Page-Type, der vom Scanner genutzt werden, muss im Mapping-Bereich hinzugefügt werden. Dieser Punkt fehlt momentan noch in der Dokumentation, wird aber sicher zeitnah ergänzt werden.

Die Site Configuration ist in einer Datei namens config.yaml zu finden. Je nachdem, ob mit einer Composer- oder Symlink-Basierten TYPO3-Installation arbeitet, ist diese Datei an zwei unterschiedlichen Orten zu finden:

  • In Composer-Installationen:
    Im Verzeichnis config/sites/<bezeichner>/config.yaml
  • In Symlink-Installationen:
    Im Verzeichnis typoconf/sites/<bezeichner>/config.yaml

<bezeichner> steht dabei für einen frei wählbaren Verzeichnisnamen, der in der Regel während der Einrichtung der Site Configuration durch den Adminisatrator der Website vergeben wird. Im Musterprojekt heisst dieses Verzeichnis zum Beispiel "main".

Unterhalb des Videos ist die komplette Site Configuration der Demo-Installation aus dem Video zu finden.

Site Configuration der Demo-Installation

base: 'https://reserve.ddev.site/'
errorHandling:
  -
    errorCode: 404
    errorHandler: Page
    errorContentSource: 't3://page?uid=18'
languages:
  -
    title: Deutsch
    enabled: true
    languageId: 0
    base: /
    typo3Language: de
    locale: de_DE.UTF-8
    iso-639-1: de
    navigationTitle: DE
    hreflang: de-DE
    direction: ltr
    flag: de
    websiteTitle: ''
  -
    title: English
    enabled: true
    base: /en/
    typo3Language: default
    locale: en_US.UTF-8
    iso-639-1: en
    websiteTitle: 'TYPO3 template from jweiland.net'
    navigationTitle: EN
    hreflang: en-US
    direction: ''
    fallbackType: strict
    fallbacks: ''
    flag: en-us-gb
    languageId: 1
rootPageId: 1
routeEnhancers:
  ReservePlugin:
    type: Extbase
    extension: Reserve
    plugin: Reservation
    routes:
      - routePath: '/checkout/list'
        _controller: 'Checkout::list'
      - routePath: '/checkout/form/{period_uid}'
        _controller: 'Checkout::form'
        _arguments:
          period_uid: period
      - routePath: '/checkout/create'
        _controller: 'Checkout::create'
      - routePath: '/checkout/confirm/{order_email}/{order_activation_code}'
        _controller: 'Checkout::confirm'
        _arguments:
          order_email: email
          order_activation_code: activationCode
      - routePath: '/checkout/cancel/{order_email}/{order_activation_code}'
        _controller: 'Checkout::cancel'
        _arguments:
          order_email: email
          order_activation_code: activationCode
    requirements:
      period_uid: '^[0-9]+$'
      order_activation_code: '^[a-zA-Z0-9]+$'
    defaultController: 'Checkout::list'
    aspects:
      period_uid:
        type: PersistedAliasMapper
        tableName: tx_reserve_domain_model_period
        routeFieldName: uid
  NewsPlugin:
    type: Extbase
    extension: News
    plugin: Pi1
    routes:
      -
        routePath: '/{news_title}'
        _controller: 'News::detail'
        _arguments:
          news_title: news
    defaultController: 'News::detail'
    aspects:
      news_title:
        type: PersistedAliasMapper
        tableName: tx_news_domain_model_news
        routeFieldName: path_segment
  PageTypeSuffix:
    type: PageType
    default: .html
    map:
      sitemap.xml: 1533906435
      yoast-snippetpreview.json: 1480321830
      feed.xml: 9818
      reserve-scanner.html: 1589460150
routes:
  -
    route: robots.txt
    type: staticText
    content: "## Use the following lines during development of a website to disallow robots to spider the website\r\nUser-agent: *\r\nDisallow: /\r\n\r\n## Use the following lines to ALLOW robots the access to the website\r\n## Remove the # at the beginning of each line\r\n#User-agent: *\r\n#Disallow: /fileadmin/_temp_/\r\n#Disallow: /t3lib/\r\n#Disallow: /typo3/\r\n#Disallow: /typo3_src/\r\n#Disallow: /clear.gif\r\n#Allow: /typo3/sysext/frontend/Resources/Public/*"
settings:
  redirects:
    autoUpdateSlugs: true
    autoCreateRedirects: true
    redirectTTL: 0
    httpStatusCode: 301
websiteTitle: 'TYPO3 Musterprojekt von jweiland.net'

 

Scheduler Tasks einrichten

Zum Schluss sollten noch ein paar Scheduler-Tasks eingerichtet werden, um die Datenbank von alten und nicht mehr benötigen Dateien "zu reinigen". So können zum Beispiel nicht bestätigte Reservierungen oder abgelaufenen Zeitfenster nach einer gewissen Zeit gelöscht werden.

Aktualisiert: 22.07.2021