Modulo di prenotazione sul sito web
Per iniziare a utilizzare il modulo di prenotazione sul tuo sito web, devi scoprire il numero tecnico speciale della tua azienda (token). Per fare ciò, devi andare al Profilo aziendale nella scheda Azienda, lì troverai la riga del token API. Per copiare un token è necessario fare clic su di esso e verrà copiato. Dopo aver ricevuto il numero, devi inserire solo poche righe nel codice del tuo sito.
Questo codice deve essere inserito tra i tag <head>
<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>
Questo codice deve essere inserito prima del tag di chiusura </body>
<script src="https://rentprog-b5205.web.app/js/app.js"></script>
Tquesto è il codice dell'applicazione stessa, va inserito tra i tag <body> nel punto desiderato
<rentprog-widget
token="token"
locale="it"
show_all_cars='true'
hidden_car_year='false'
places='[{"place":"Office","price":0},{"place":"Delivery within the city","price":30},{"place":"Airport","price":80}]'
equipment='[{"item":"Roof rack","price":40, "daily": true},{"item":"GPS Navigator","price":15, "daily": false}]'
middlename_required="false"
agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.ru/public/agreement.html"}'
button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none"
icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono"
form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base"
container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow"
title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700"
title_classes="lg:leading-relaxed sm:text-4xl text-xl"
show_email="false"
show_phone="false"
show_middlename="false"
show_birthday="false"
show_passport="false"
show_driver_license="false"
rental_object="Choose a boat"
>
</rentprog-widget>
token: devi inserire il tuo token API. Può essere trovato nel profilo aziendale, scheda Azienda. È necessario fare clic su di esso e il token verrà copiato negli appunti.
locale - lingua del modulo, è necessario inserire en - per l'inglese, de - per il tedesco, fr - per il francese, pt - per il portoghese, es - per lo spagnolo, hi - per l'hindi, sr - per il serbo, tr - per turco, th - per tailandese, it - per italiano, id - per indonesiano.
show_all_cars - mostra tutte le auto; per impostazione predefinita vengono mostrate solo quelle disponibili per le date specificate, tenendo conto dell'intervallo tra le prenotazioni specificato nelle impostazioni.
show_email: mostra o meno il campo di input dell'e-mail. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_phone: mostra o meno il campo di input del telefono. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_middlename - mostra il campo per inserire o meno un secondo nome. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_birthday - mostra il campo per inserire o meno la data di nascita. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_passport: mostra o meno il campo per l'inserimento dei dati del passaporto. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_address - mostra o meno il campo di inserimento dell'indirizzo. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
show_driver_license - mostra il campo per inserire o meno i dati della patente di guida. Se il valore è "true", verrà mostrato il campo; se il valore è "false", il campo verrà nascosto.
rental_object - un parametro che sostituisce la riga "Seleziona auto" con il valore inserito, ad esempio "Seleziona una barca".
hidden_car_year - nasconde l'anno di produzione dell'auto, se è impostato su "true", l'anno verrà nascosto, se è impostato su "false" o manca il parametro, quindi verrà mostrato l'anno
passport_required - campi dati del passaporto, se impostati su "true", i campi diventano obbligatori.
driver_license_required - campi dati della patente di guida, se il valore è "true", i campi diventano obbligatori, se "false" sono facoltativi.
birthday_required - campo data di nascita, se è “true”, i campi diventano obbligatori, se “false” allora sono facoltativi.
email_required - Campo email, se è "true", i campi diventano obbligatori, se "false" sono facoltativi.
phone_required - campo di input del telefono, se è "true", i campi diventano obbligatori, se "false" sono facoltativi.
middlename_required - campo di immissione del secondo nome, se è "true", i campi diventano obbligatori, se "false" sono facoltativi.
places - Si tratta dei luoghi di consegna e di ricevimento, che indicano i prezzi per la consegna/ricezione. Se non ti servono i dati del campo, rimuovi questa opzione.
equipment - elenco delle attrezzature aggiuntive, daily - pagamento giornaliero o per l'intero periodo di noleggio, price - prezzo. Se non hai bisogno di questo campo, rimuovi semplicemente questo parametro.
chairs - seggiolini per bambini, daily - pagamento giornaliero o per l'intero periodo di noleggio, price - prezzo. Se non ti servono i dati del campo, rimuovi questa opzione.
boosters - sedie per bambini senza schienale (sedili), le impostazioni sono le stesse. Se non ti servono questi campi, elimina questo parametro.
agreement - la prima riga è fissa, poiché raccogliamo dati personali, se desideri aggiungere un collegamento ai tuoi termini e condizioni, devi compilare questo parametro.
Se le sedie, i rialzi, le attrezzature, i parametri dell'accordo non sono necessari, è sufficiente rimuoverli dal codice.
Progettazione visiva
Per la progettazione viene utilizzata la libreria Tailwind v2. Maggiori dettagli qui. Per velocizzare il caricamento del form, non vengono utilizzate tutte le classi, ma solo quelle già utilizzate nel form, nonché tutte le classi di colore dello sfondo e del testo (bg-... e text-...). Se hai davvero bisogno di qualche corso aggiuntivo, scrivi al supporto e lo aggiungeremo. Se desideri apportare modifiche, utilizza le variabili seguenti. È meglio lasciare le classi predefinite responsabili dei rientri, ecc. e modificare solo le classi responsabili dello sfondo e del colore del testo. È anche possibile apportare modifiche ai rientri, ecc., ma ciò potrebbe influire sulla visualizzazione su diversi dispositivi, fare attenzione. Puoi vedere i valori predefiniti nell'esempio sopra, così come nel modulo generato sul tuo sito web. L'utilizzo delle variabili sottostanti è facoltativo; se non vengono compilati verranno presi i valori di default.
button_classes - classi css che controllano la visualizzazione visiva dei pulsanti.
icon_classes - classi css che controllano la visualizzazione dell'icona a sinistra.
container_classes - classi css che controllano la visualizzazione visiva del contenitore.
form_container - classi css che controllano la visualizzazione visiva del contenitore del modulo.
title_container_classes - classi css che controllano la visualizzazione visiva del contenitore dell'intestazione.
title_classes - classi css che controllano la visualizzazione visiva dell'intestazione.