Inclusioni tra <head> e </head>

Vanno innanzitutto inclusi il file JavaScript e il foglio di stile


<script src="https://secure.bookingevolution.com/be2secure/be2.js"></script>
<link rel="stylesheet" href = "https://secure.bookingevolution.com/be2secure/be2.css" type="text/css"/>
          

Se nel sito non è già presente una chiamata a jQuery, inserire anche quella, prima della chiamata a be2.js, ad esempio:


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://secure.bookingevolution.com/be2secure/be2.js"></script>
<link rel="stylesheet" href="https://secure.bookingevolution.com/be2secure/be2.css" type="text/css"/>
          

ATTENZIONE: La chiamata a jQuery può essere effettuata in qualsiasi modo ma
è necessario che sia inclusa la versione 1.7 o superiore.
L'utilizzo di una versione inferiore potrebbe causare malfunzionamenti.

Configurazione veloce

Puoi creare un elemento universale con una sola riga di codice, che aprirà la versione completa su computer fissi, portatili e tablet, e la versione mobile sugli smartphones.

Può essere un link Prenota ora


<a href = "javascript:openbe2('bareteri', 1)">Prenota ora</a>     
          

Un bottone


<button type = "button" onclick = "openbe2('bareteri', 1)">Prenota ora</button>     
          

O un qualsiasi altro elemento Prenota ora


<div onclick = "openbe2('bareteri', 1)">Prenota ora</div>
          

I due parametri di openbe2 sono:

ID dell'hotel, nel vostro caso bareteri.

Lingua, che può essere 1 (italiano), 2 (inglese), 3 (francese), 4 (spagnolo) o 5 (tedesco).

Omettendo il parametro della lingua il booking online si aprirà nella lingua utilizzata dal browser se prevista, o in inglese se non prevista.

Utilizzare landing page

Nel caso in cui serva utilizzare una landing page per indirizzare l'utenza al sistema di pagamento, si può predisporre una landing page nel proprio sito configurata come da documentazione con controllo per le versioni mobile.
In alternativa si può utilizzare la landing page standard di bookingevolution già predisposta per il riconoscimento dei dispositivi mobili.

Link generico senza lingua,
la landing page aprirà il sistema di prenotazioni nella lingua del browser se supportata, altrimenti utilizzerà la lingua del browser dell'utente.
https://secure.bookingevolution.com/be2secure/book?hotel=bareteri

Link con lingua specifica
La landing page aprirà il sistema di prenotazioni nella lingua indicata se supportata, altrimenti utilizzerà la lingua del browser dell'utente.
Link con codice lingua testuale:  https://secure.bookingevolution.com/be2secure/book?hotel=bareteri&lang=en  Vai alla landing page ⇒
Link con codice lingua numerico:  https://secure.bookingevolution.com/be2secure/book?hotel=bareteri&lang=2  Vai alla landing page ⇒

CODICI LINGUA TESTUALI NUMERICI
ITALIANO it 1
INGLESE en 2
FRANCESE fr 3
SPAGNOLO es 4
TEDESCO de 5

Installazione Widget BookingEvolution

È disponibile un widget standard da poter utilizzare nel sito.
Questo componente può essere incluso nella pagina web una volta sola, e si può configurare in base alle proprie esigenze.
In caso venga visualizzato su dispositivi mobili il widget spegnerà automaticamente il form di prenotazioni a favore del bottone per la gestione delle prenotazioni da dispositivo mobile.
ATTENZIONE: Questo widget non richiede l'installazione di jquery o altro, in quanto si occupa in autonomia di caricare le librerie. Pertanto, se si utilizza il widget, non installare le libreire indicate nel capitolo iniziale.

1 - Installare lo script di caricamento e gestione widget
Si consiglia di installare questo script prima della chiusura della pagina </body>


<script type="text/javascript"  src="https://secure.bookingevolution.com/be2secure/widgets/be2/tsmbe2.js" ></script>

    

2 - Inserire nella pagina html il seguente codice dove si vuole visualizzare il componente.


<div id="bookingevolution-tsmbe" data-hotel="bareteri" data-lang="it" data-promocode="1" ></div>

Parametri configurabili nel tag <div>

Esempio di widget


 
<div id="bookingevolution-container" style="display:block;width:100%;background-color:rgba(0,0,0,0.5)">
	<div class="bookingevolution-tsmbe" data-hotel="bareteri" data-datestart="2d" data-maxnights="15" data-lang="en" data-jqui="0" data-groups="1" data-promocode="1" data-children="1" data-css2="http://www.tosom.it/be2final/widget.css" ></div>
	<script type="text/javascript"  src="https://secure.bookingevolution.com/be2secure/widgets/be2/tsmbe2.js" ></script>
</div> 



Creazione di un form di ricerca

Si possono creare dei form di ricerca dove si possono specificare data di arrivo e numero di notti, in un form con classe beform con le seguenti variabili:

hotel: ID dell'hotel, nel vostro caso bareteri.

lan: lingua del booking, che può essere 1 (italiano), 2 (inglese), 3 (francese), 4 (spagnolo) o 5 (tedesco).

checkin: data di arrivo in formato unix YYYY-MM-DD.

nights: numero di notti.

Utilizzo del calendario delle jQuery UI

E' possibile utilizzare il calendario delle jQuery UI, diventato quasi uno standard per la selezione di una data, dapprima includendo il loro JavaScript e foglio di stile tra <head> e </head>:


<script src = "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel = "stylesheet" href = "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
          

E creando un form di classe beform con le stesse variabili elencate nella sezione Creazione di un form di ricerca.

Ecco un esempio funzionante:
Arrivo: • Notti:

Il codice utilizzato per la creazione del form è:

<div id="bookingevolution2-quicksearch">
<div class="bookingevolution2-mobile">
	<a class="be2-booknow-mobile" href="javascript:openbe2('bareteri',1)">Prenota Ora</a>
</div>
          	
<form class = "beform">
	<input type="hidden" name="hotel" value="bareteri" />
	<input type="hidden" name="lan" value="1" />
	<input type="hidden" id = "checkin" name="checkin" value="" />
	Arrivo:
	<input type = "text" id = "datepicker" />
	• Notti:
	<select name = "nights" style = "padding:3px">
		<option value = "1">1</option>
		<option value = "2">2</option>
		<option value = "3">3</option>
		<option value = "4">4</option>
		<option value = "5">5</option>
		<option value = "6">6</option>
		<option value = "7">7</option>
		<option value = "8">8</option>
		<option value = "9">9</option>
		<option value = "10">10</option>	
	</select>
	<input type = "submit" value = "Cerca" />
</form>
<script>
	$(function() {
		$("#datepicker").datepicker({
			altField: "#checkin",
			altFormat: "yy-mm-dd"    
		});
	});
</script>

<div>

E' possibile personalizzare il form in qualsiasi modo finchè vengono rispettate le variabili da passare.

Versione mobile:

Per gestire la versione mobile si proceda all'inserimento delle media query nel foglio di stile al fine di nascondere il form di prenotazione e abilitare il bottone di prenotazione.

Riportiamo delle media query di esempio per dispositivi mobili, si possono modificare, estendere o utilizzarne altre, in base alle necessità, l'importante è che se il sito viene aperto da un dispositivo mobile si visualizzi il bottone per avviare il sistema di prenotazioni specificatamente realizzato per questi dispositivi.

Il bottone di prenotazioni può essere personalizzato a piacere, anche utilizzando le classi del tema se installato in CMS, l'importante è che a click venga eseguita la funzione javascript: openbe2([hotel login],[codice lingua])

<style>
@media (min-device-width: 320px) and (max-device-width: 480px)
{
    #bookingevolution2-quicksearch .beform{ display:none; }
    #bookingevolution2-quicksearch .be2-booknow-mobile{ display:block; }     
}
</style>

Si può testare la versione mobile tramite gli strumenti di sviluppo del browser in uso.
Se abilitata la visualizzazione in modalità mobile il form di esempio riportato sopra verrà nascosto a favore del bottone di prenotazione per il mobile.

Variabili aggiuntive da passare nei form

Ci può essere l'esigenza di dover passare delle variabili aggiuntive per una maggiore personalizzazione del form:

travelwithchildren: settato a 1 indica che intendiamo viaggiare con bambini.

adults: il numero di adulti.

children: il numero di bambini.

age1: età eventuale primo bambino.

age2: età eventuale secondo bambino.

age3: età eventuale terzo bambino.

refine: deve essere impostato a 1 per rendere attiva la ricerca per adulti e bambini, che potrebbero altrimenti avere valori di default che verrebbero presi in considerazione anche senza volere.

discount: il codice di sconto.

In caso di form con bambini, la variabile children comanda le variabili age1, age2 e age3: significa che se children è impostata a 1, le eventuali variabili age2 e age3 non verranno prese in considerazione anche se impostate.

Ricerca per una camera specifica

Puoi cercare una camera specifica con la variabile favroom.

In questo caso la camera sarà sempre visualizzata in prima posizione, anche se non disponibile mentre le altre camere saranno visualizzate di seguito, in ordine di prezzo, solo se disponibili.

Il valore da assegnare a favroom è l'ID della camera, che nel caso di Locanda ai Bareteri è:

1 Doppia (wi-fi incluso) Bareteri.

2 Tripla (wi-fi incluso) Bareteri.

3 Quadrupla (wi-fi incluso) Bareteri.

4 Doppia (wi-fi incluso) NO COLAZIONE - Bareteri.

5 Doppia uso Singola (wi-fi incluso) Bareteri.

9 Tripla (wi-fi incluso) NO COLAZIONE - Bareteri.

10 Quadrupla (wi-fi incluso) NO COLAZIONE - Bareteri.

11 Doppia Prepagata (wi-fi incluso) NON RIMBORSABILE.

12 Tripla Prepagata (wi-fi incluso) NON RIMBORSABILE.

13 Quadrupla Prepagata (wi-fi incluso) NON RIMBORSABILE.

La ricerca per camera specifica può essere incorporata nel bottone di configurazione veloce aggiungendo un argomento oggetto con il valore di favroom alla funzione openbe2.

Se si vuole creare il bottone per la ricerca specifica per la camera Tripla (wi-fi incluso) NO COLAZIONE - Bareteri il codice da utilizzare è:


<a href = "javascript:openbe2('bareteri', 1, {favroom: 9})">Prenota ora</a>     
          

E questo è il risultato: Prenota ora

Per chi usa Wordpress, Joomla o altri CMS

Ricordati che molte volte i temi scaricati da internet usano oltre a jQuery anche altri framework (MooTools, Backbone, Sammy, Cappuccino, Knockout, JavaScript MVC, Google Web Toolkit, EXT JS o altri), e potrebbero aver usato il carattere $ come shortcut esattamente come fa jQuery.

Significa che tutti i tuoi script che iniziano per $ come ad esempio quelli per chiamare il calendario delle jQuery UI potrebbero non funzionare.

In questo caso, semplicemente sostituisci $ con jQuery.

Non vedi correttamente il sito desktop o mobile?

Invia i dati che vedi qui sotto a emanuele@tosom.it.