Door een stukje code toe te voegen op een bestaande website, kan de ProPlanner webmodule ingeladen worden. Onderstaande informatie kan helpen om de website bouwer te informeren hoe ze te werk kunnen gaan.
Om de webplugin in actie te zien en enkele code voorbeelden te bekijken, bezoek onze webplugin showcase.
Code toe te voegen
HTML toe te voegen op de website:
<div id="proplanner-plugin"> </div>
Script toe te voegen:
<script type="text/javascript">
var ProPlannerConfig = {
columns: 3,
lang: "nl",
key: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
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>
De configuratie parameters kunnen aangepast worden.
Key | verplicht | Mogelijke waardes | omschrijving |
columns |
| 1,2,3,4,... | In hoeveel kolommen moeten de resources getoond worden? |
lang | ja | nl, fr | In welke taal moet de plugin geladen worden? |
key | ja |
| Unieke sleutel te verkijgen via uw commercieel contact. |
startTime | ja | "09:00" | Vanaf welk tijdstip kan men beschikbaarheid vragen en een boeking doen? |
endTime | ja | "19:00" | Tot welk tijdstip kan men beschikbaarheid vragen en een boeking doen? |
showResultsOnLoad | nee | true/false | Moeten resultaten onmiddelijk getoond worden zonder filters? |
showAdditionalFilters | nee | true/false | Moeten filters getoond worden van de eigenschappen? |
showSearchButton | nee | true/false | Moet de zoek knop getoond worden? |
redirectToUrlOnSearch | nee |
| Open deze pagina wanneer je klikt op de zoekknop. Volledige URL, op hetzelfde domein. |
showLocationFilter | nee | true/false | Moet de locatie filter getoond worden? Indien niet worden alle locaties gebruikt om beschikbaarheid te bepalen. |
reservationChecks | nee | checkboxLabel: "ik bevestig…" checkboxWarning: "waarschuwing,…" | Moet de locatie filter getoond worden? Indien niet worden alle locaties gebruikt om beschikbaarheid te bepalen. |
disabledFromDates | nee | array ['2022/7/11', '2022/7/12'] | Opgegeven data zijn niet beschikbaar om als startdatum te kiezen |
disabledToDates | nee | array ['2022/7/11', '2022/7/12'] | Opgegeven data zijn niet beschikbaar om als einddatum te kiezen |
availableFromTimes | nee | Array ['15:00', '15:30', '17:00', '17:30'] | Lijst met uren die beschikbaar zijn als starttijd. Optioneel - standaard gebruiken tonen we de uren per half uur tussen de eigenschap startTime en endTime |
availableToTimes | nee | array ['15:00', '15:30', '17:00', '17:30'] | Lijst met uren die beschikbaar zijn als eindtijd Optioneel - standaard gebruiken tonen we de uren per half uur tussen de eigenschap startTime en endTime |
| filters | nee | JSON object filters: { parentresourcecategoryid: [1], branchid: [3,6,9], from: new Date(), fromTime: "9:15", to: new Date(), toTime: "17:00" } Van boven naar onder wat er voorgeselecteerd staat: - Resourcetype - Locatie - Startdatum - Startuur - Einddatum Einduur | Bepaalt de standaard voorgeselecteerde waarde van elke filter. |
| showNotAvailableInfoButton | nee | true/false | Indien geen beschikbaarheid voor een bepaalde categorie, dan wordt de reservatieknop (die normaal disabled wordt) vervangen door een knop "Vraag info". Hierbij kan de gebruiker een formulier invullen en wordt een mail gestuurd naar de vestiging met de vraag van de gebruiker. |
| showNotFoundInfoButton | nee | true/false | Onderaan de resultaten komt een knop beschikbaar waarbij de gebruiker info kan vragen. Hierbij kan de gebruiker een formulier invullen en wordt een mail gestuurd naar de vestiging met de vraag van de gebruiker. |
onlyShowAvailableCategories | nee | true/false | Al dan niet verbergen van resource categorieën die géén beschikbaarheid hebben. Standaard staat dit uit en worden ze achteraan gesorteerd. |
showEquipmentFilter | nee | true/false | Wanneer "showAdditionalFilters" aanstaat kan je ervoor kiezen om de equipment (uitrusting) filter te verbergen. |
| ownerBranchID | nee | 1 | De standaard ownerbranchid die moet ingevuld worden op het contract (bvb. bij verhuurmaatschappij) |
De verschillende mogelijkheden voor het instellen van deze parameters kan bekijken op onze showcase pagina.
Layout aanpassingen
De webplugin gebruikt de CSS van de website. Als de layout niet is zoals gewenst, kan dit aangepast worden door de website bouwer. Deze kan zelf de layout bijsturen indien gewenst. Hiervoor kunnen enkele CSS klasses gebruikt of overschreven worden.
Alle HTML zit in een div met id "proplanner-plugin-wrapper". Deze kan dus altijd gebruikt worden om geneste CSS te gebruiken.
De standaard iconen zijn beschikbaar uit Bootstrap Icons (https://icons.getbootstrap.com). Vul de volledige classname in: bi bi-bag (bij Font Awesome is dat bijvoorbeeld fas fa-envelope). Indien in CSS zelf iconen geconfigureerd werden (bv png/..), kan in ProPlanner ook de volledige klasse ingevuld worden. Indien niets opgegeven werd, wordt gewoon de tekst getoond.
Enkele interessante CSS klasses:
ID(#) of Class(.) | Property | Default waarde | Description |
#proplanner-plugin-wrapper | min-height | 400px | Wat is de minimum hoogte van de plugin? |
#filters |
|
| De volledige filtergroep |
.filter-group |
|
| Groep van eigenschappenfilters |
.filter-title |
|
| Titel van een eigenschappenfilter |
.filter-options |
|
| Div rond de checkboxes |
.filter-option |
|
| Div rond checkbox |
.search-button-container |
|
| Div rond de zoek knop |
#searchButton |
|
| Zoek knop |
.category |
|
| Div rond een enkele zicthbare categorie |
.category-title |
|
|
|
.category-pricing |
|
|
|
.category-description |
|
|
|
.property-logo |
|
| Div rond een icoon (indien aanwezig) |