Implementierung

Einleitung

Die ausgelieferte .zip Datei beinhaltet alle notwendigen Dateien zur Einrichtung des Online-Reservierungsmodul (ORM) in ihrer vorhandenen Webseite.

Die grau markierten Tags nicht mitkopieren!

Bitte ihre C-RENT Kundennummer kontrollieren oder ersetzen:

1. Datenupload

Laden Sie die Ordner „reservation“ und „customer“ in das root Verzeichnis ihres Webservers.

(Dies ist optional, falls Sie ein eigenes Routing verwenden möchten. s. Abschnitt 6)

2. Anpassungen an der HTML Startseite

Es müssen sowohl im <head> , als auch im <body> Bereich der HTML Seite Änderungen vorgenommen werden.

An beliebiger Stelle im <head> :

<head> […]
<link href="https://cdn.linienflug.design/Kundennummer/crent/css/orm.css" rel="preload" as="style" /> <link href="https://cdn.linienflug.design/Kundennummer/crent/js/orm.js" rel="preload" as="script" /> <link href="https://cdn.linienflug.design/Kundennummer/crent/css/orm.css" rel="stylesheet" />
[…] </head>

Am Ende des <body>:

<body> […]
<script src="https://cdn.linienflug.design/Kundennummer/crent/js/orm.js"></script>
</body>

An beliebiger Stelle im <body> :

<body> […]
<div id="crentReservation" class="orm-html" data-stationtype="RENT" data- loginIconText="true"></div>
[…] </body>

Dies ist das Core Modul des ORM. Es muss auf allen Seiten vorhanden sein. Auf der Startseite kann die Position des Core Moduls beliebig gewählt werden, da die Ausgabe über die individuellen Step 1 Module erfolgt (siehe 3). Im Reservierungsprozess bestimmt die Position des Core Moduls, die Position der Inhalte (siehe 4 & 5).

Über das Attribut data-loginIconText wird festgelegt, ob der Anmeldebutton als Icon („false“) oder als Icon mit Text („true“) angezeigt wird.

3. Einsetzen der Step1 Module

In der Standversion des ORM stehen ihnen die Module „Reservierungssuche“, „Fahrzeugkategorieslider“ und „Locationmap“ zur Verfügung. Es können alle Module parallel auf der gleichen HTML Seite betrieben werden.

3.1 Reservierungssuche

<body> […]
<div id="crentSearchBar" class="orm-html" data-headline="dark"></div>
[…] </body>

Über das Attribut data-headline kann die Farbe der Überschrift auf hell („light“) oder dunkel („dark“) gesetzt werden. Es werden die im PDF „ORM - Anpassungsmöglichkeiten“ gelieferten Farbwerte für „Dunkle Schriftfarbe (ID 1.3)“ und „Helle Schriftfarbe (ID 1.4)“ genutzt.

3.2 Fahrzeugkategorieslider

<body> […]
<div id="crentCarCategorySlider" class="orm-html" data-sort="random"></div>
[…] </body>

Über das Attribut data-sort kann die Reihenfolge der Kategorien eingestellt werden. Zur Verfügung stehen „asc“ für Aufsteigend, „desc“ für Absteigend und „random“ für Zufällig.

3.3 Locationmap

<body> […]
<div id="crentLocationMap" class="orm-html crentLocationMap" data-headline="dark"> </div>
[…] </body>

Über das Attribut data-headline kann die Farbe der Überschrift auf hell („light“) oder dunkel („dark“) gesetzt werden. Es werden die im PDF „ORM - Anpassungsmöglichkeiten“ gelieferten Farbwerte für „Dunkle Schriftfarbe (ID 1.3)“ und „Helle Schriftfarbe (ID 1.4)“ genutzt.

3.4 Angebote

<body> […]
<div id="crentOfferSlider" class="orm-html"> </div>
[…] </body>

4. Anpassungen des Reservierungsprozesses

Die HTML Seite zur Anzeige des Reservierungsprozesses finden sie unter: reservation/index.html

Sie können Sie mit eigenen Elementen, wie z.B. Footer, Navigation, etc. erweitern. Standardmäßig werden folgende ORM Module eingebunden:

4.1 Modul „crentReservation“

<head> […]
<div id="crentReservation" class="orm-html" data-stationtype="RENT"></div>
[…] </head>

Dies ist das Core Modul des Reservierungsprozesses und darf nicht entfernt werden. Die Position des Core Moduls, bestimmt die Position der Inhalte.

4.2 Modul „crentReservationHeader“

<body> […]
<div id="crentReservationHeader" class="orm-html" data-logo="true"></div>
[…] </body>

Über das Attribut data-logo kann die Anzeige des Logos bestimmt werden. „true“ für Anzeigen und „false“ für nicht anzeigen.

4.3 Modul „Reservierungssuche“

<body> […]
<div id="crentSearchBar" class="orm-html" data-headline="dark"></div>
[…] </body>

Dieses Modul dient als „Fallback“-Lösung, falls die URL: "domain/reservation" direkt aufgerufen wird.

5. Kundenbereich

Das Kundenbereich Widget kann an beliebiger Stelle ihrer Webseite eingesetzt werden.

<body> […]
<div id="crentCustomerWidget" class="orm-html" data-loginIconText="true"></div>
[…] </body>

Über das Attribut data-loginIconText wird festgelegt, ob der Anmeldebutton als Icon („false“) oder als Icon mit Text („true“) angezeigt wird.

6. Verwendung eines Content Management Systems, wie Wordpress, o.ä.

Je nach verwendeten CMS kann die Einbindung der ORM Module variieren. Wichtig ist, dass alle für die Startseite angegeben Scripte im und Bereich, so wie unter 2. & 3. angegeben, im ausgegebenen HTML Dokument eingebunden sind. Wenn ihr CMS das Routing des Reservierungsablaufs und des Kundenbereichs übernehmen soll, müssen sie folgenden Seitenaufbau erstellen:

domain/reservation
domain/reservation/step1
domain/reservation/step2
domain/reservation/step3
domain/reservation/step4
domain/reservation/success
domain/abo/step1
domain/abo/step2
domain/abo/step3
domain/abo/step4
domain/abo/success
domain/customer/mydata
domain/customer/bookings
domain/customer/activate/ + "token"
domain/customer/activatepassword/ + "token"
domain/customer/forgot/ + "token"
  • “token" bedeutet, dass Parameter durchgelassen und Pfadangaben im Token auf den Pfad vor dem Token geroutet werden müssen. Beispiel: domain/customer/forgot/12345 ruft die Seite „domain/customer/forgot“ auf und liest 12345 als Token aus.