Durch Hinzufügen eines Codes auf einer bestehenden Website kann das ProPlanner-Webmodul geladen werden. Die nachstehenden Informationen können dem Website-Ersteller helfen, das weitere Vorgehen zu bestimmen.
Um das Web-Plugin in Aktion zu sehen und einige Code-Beispiele anzusehen, besuchen Sie unser Web-Plugin-Showcase.
Code hinzufügen
HTML, das auf der Website hinzugefügt werden soll:
<div id="proplanner-plugin"> </div>
Skript zum Hinzufügen:
<script type="text/javascript">
var ProPlannerConfig = {
columns: 3,
lang: "nl",
key: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx-xxxxxxxx",
startTime: "09:00",
endTime: "19:00",
showResultsOnLoad: false,
showAdditionalFilters: true,
baseurl: "https://webplugin.proplanner.be"
};
</script>
<script defer type="text/javascript" src="https://webplugin.proplanner.be/embed/plugin"></script>
Die Konfigurationsparameter können angepasst werden.
Schlüssel | obligatorisch | Mögliche Werte | Beschreibung |
Spalten |
| 1,2,3,4,... | In wie vielen Spalten sollen die Ressourcen angezeigt werden?? |
lang | ja | de, fr | In welcher Sprache sollte das Plugin geladen werden? |
Schlüssel | ja |
| Eindeutiger Schlüssel zu erhalten Sie über Ihren Geschäftskontakt. |
startTime | ja | "09:00" | Ab wann kann man die Verfügbarkeit abfragen und eine Buchung vornehmen? |
endTime | ja | "19:00" | Bis wann kann man die Verfügbarkeit abfragen und eine Buchung vornehmen? |
showResultsOnLoad | keine | wahr/falsch | Sollten die Ergebnisse sofort ohne Filter angezeigt werden? |
showAdditionalFilters | keine | wahr/falsch | Sollen Filter in den Eigenschaften angezeigt werden? |
showSearchButton | keine | wahr/falsch | Sollte die Suchschaltfläche angezeigt werden? |
redirectToUrlOnSearch | keine |
| Öffnen Sie diese Seite, wenn Sie auf die Schaltfläche "Suchen" klicken. Vollständige URL, auf derselben Domäne. |
showLocationFilter | keine | wahr/falsch | Soll der Standortfilter angezeigt werden? Ist dies nicht der Fall, werden alle Standorte zur Ermittlung der Verfügbarkeit herangezogen. |
reservationChecks | keine | checkboxLabel: "Ich bestätige…" checkboxWarning: "Warnung,…" | Soll der Standortfilter angezeigt werden? Ist dies nicht der Fall, werden alle Standorte zur Ermittlung der Verfügbarkeit herangezogen. |
disabledFromDates | keine | Array ['2022/7/11', '2022/7/12'] | Angegebene Daten können nicht als Startdatum gewählt werden |
disabledToDates | keine | Array ['2022/7/11', '2022/7/12'] | Angegebene Daten können nicht als Enddatum gewählt werden |
availableFromTimes | keine | Array ['15:00', '15:30', '17:00', '17:30'] | Liste der verfügbaren Stunden als Startzeit. Optional - standardmäßig werden die Stunden pro halbe Stunde zwischen der Eigenschaft angezeigt. startTime und endTime |
availableToTimes | keine | array ['15:00', '15:30', '17:00', '17:30'] | Liste der verfügbaren Stunden als Endzeit Optional - standardmäßig werden die Stunden pro halbe Stunde zwischen der Eigenschaft angezeigt. startTime und endTime |
| filtert | keine | JSON object filters: { parentresourcecategoryid: [1], branchid: [3,6,9], from: new Date(), fromTime: "9:15", to: new Date(), toTime: "17:00" } Von oben nach unten, was vorgewählt ist: - Art der Ressource - Standort - Datum des Beginns - Beginn Stunde - Datum des Endes Begriff | Bestimmt den voreingestellten Wert für jeden Filter. |
| showNotAvailableInfoButton | keine | wahr/falsch | Wenn für eine bestimmte Kategorie keine Verfügbarkeit besteht, wird die Schaltfläche "Reservierung" (die normalerweise deaktiviert ist) durch eine Schaltfläche "Info anfordern" ersetzt. So kann der Benutzer ein Formular ausfüllen, woraufhin eine E-Mail mit der Anfrage des Benutzers an die Filiale geschickt wird. |
| showNotFoundInfoButton | keine | wahr/falsch | Am Ende der Ergebnisse wird eine Schaltfläche angezeigt, über die der Nutzer Informationen anfordern kann. So kann der Benutzer ein Formular ausfüllen, woraufhin eine E-Mail mit der Anfrage des Benutzers an die Filiale geschickt wird. |
onlyShowAvailableCategories | keine | wahr/falsch | Ausblenden oder nicht Ausblenden von Ressourcenkategorien, die nicht verfügbar sind. Standardmäßig ist diese Funktion ausgeschaltet und sie werden nach hinten sortiert. |
showEquipmentFilter | keine | wahr/falsch | Wenn "showAdditionalFilters" aktiviert ist, können Sie den Ausrüstungsfilter ausblenden. |
| ownerBranchID | keine | 1 | Die Standard-Eigentümer-Filialnummer, die auf dem Vertrag anzugeben ist (z. B. bei der Vermietungsfirma) |
Die verschiedenen Optionen zur Einstellung dieser Parameter können auf unserer Showcase-Seite eingesehen werden.
Layout-Anpassungen
Das Web-Plugin verwendet das CSS der Website. Wenn das Layout nicht wie gewünscht ist, kann es mit dem Website-Builder angepasst werden. Diese kann das Layout bei Bedarf selbst anpassen. Hierfür können einige CSS-Klassen verwendet oder überschrieben werden.
Das gesamte HTML befindet sich in einem div mit der id "proplanner-plugin-wrapper". Es kann also immer verwendet werden, um verschachteltes CSS zu verwenden.
Die Standard-Symbole sind über Bootstrap Icons verfügbar (https://icons.getbootstrap.com). Geben Sie den vollständigen Klassennamen ein: bi-bag (für Font Awesome lautet er zum Beispiel fas-envelope). Wurden Icons in CSS selbst konfiguriert (z.B. png/...), kann die vollständige Klasse auch in ProPlanner ausgefüllt werden. Wurde nichts angegeben, wird nur der Text angezeigt.
Einige interessante CSS-Klassen:
ID(#) oder Klasse(.) | Eigentum | Standardwert | Beschreibung |
#proplanner-plugin-wrapper | min-Höhe | 400px | Was ist die Mindesthöhe des Plugins? |
#Filter |
|
| Die gesamte Filtergruppe |
.filtern-Gruppe |
|
| Gruppe von Eigenschaftsfiltern |
.filtern-Titel |
|
| Titel eines Immobilienfilters |
.filter-Optionen |
|
| Div um Kontrollkästchen |
.filter-Option |
|
| Div um Ankreuzfeld |
.suche-button-container |
|
| Div um Schaltfläche "Suchen |
#searchButton |
|
| Schaltfläche "Suchen |
.Kategorie |
|
| Div um eine einzelne zicthable Kategorie |
.Kategorie-Titel |
|
|
|
.Kategorie-Preisgestaltung |
|
|
|
.Kategorie-Beschreibung |
|
|
|
.property-logo |
|
| Div um ein Symbol (falls vorhanden) |