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.

Installazione Widget BookingEvolution

- Widget standard da poter utilizzare nel sito.
- Questo componente va incluso nella pagina web una volta sola, e si può configurare utilizzando i parametri elencati di seguito.
- 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.

GESTIONE ADULTI/BAMBINI:
I selettori adulti/bambini vanno attivati ESCLUSIVAMENTE su richieta di booking evolution.

ATTENZIONE: se si installa il widget nella pagina non è necessario installare: jquery, be2.js o be.css come indicato nel capitolo iniziale "Inclusioni tra <head> e </head>"
Il widget si occuperà in autonomia di installare e avviare quanto serve in base alla configurazione dei parametri impostata (vedi sotto).

Passi da seguire per installare il widget:

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 id="bookingevolution-tsmbe" ... >

Parametro Obbligatorio Descrizione
data-hotel Y Codice hotel fornito da Bookingevolution
data-lang Y Codice lingua, utilizzare i codici lingua iso "it", "en", "fr", "es", "de"
data-jqui N Gestione caricamento della libreria jQuery-UI per la gestione del calendario. Impostare a 0 se si rilevano incompatibilità con le librerie del sito
data-datestart N Modifica la data di inzio del calendario.
Formato utilizzato [1,n][mwd] "m" mesi, "w" settimane, "d" giorni.
Esempio inizio a 3 giorni data-datestart="3d"
data-maxnights N Numero massimo di notti visualizzate nel selettore.
data-mode N Tipologia widget:
"std": modalità di base con widget predisposto per contenitori orizzontali.
"compact": modalità compatta per barre laterali, o contenitori verticali.
data-css N URL assoluto foglio di stile principale.
Qualora fosse necessario si può utilizzare un foglio di stile personalizzato. Questo è lo stile principale del widget.
data-promocode N Se impostato a 1 abilita la visualizzazione del campo per il codice promozionale.
Se non impostato o impostato a 0 disabilita il campo.

Esempio di widget base 


<!-- data-maxpax="4" -->
<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-promocode="1"
		data-css2=""
	></div>
	<script type="text/javascript"  src="https://secure.bookingevolution.com/be2secure/widgets/be2/tsmbe2.js" ></script>
</div>

Creazione manuale di un form di ricerca

Se impostate un calendario personalizzato vi preghiamo di:
- non consentire la selezione di date nel passato
- pre-imposatare la data in apertura a 15 giorni nel futuro a partire dalla data corrente

Si consiglia inoltre di attivare sempre l'opzione "promo-code" nel form.

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:
Prenota Ora
Arrivo: • Notti: • Promo Code:

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>
	• Promo Code: <input type="text" name="discount"  value="">
	<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 Standard.

2 Tripla Standard.

3 Quadrupla - Standard.

4 Doppia - Expedia Bareteri.

5 Doppia uso singolo - Standard.

6 Doppia - Booking Allegri.

7 Tripla - Booking Allegri.

8 Quadrupla - Booking Allegri.

9 Tripla - Expedia Bareteri.

10 Quadrupla - Expedia Bareteri.

14 DOPPIA - Expedia Allegri.

15 TRIPLA - Expedia Allegri.

16 QUADRUPLA - Expedia Allegri.

29 Doppia - Flexy 14gg - Booking Allegri.

30 Doppia - Rimborsabile 31gg - Booking Allegri .

31 Tripla - Rimborsabile 31gg - Booking Allegri.

32 Tripla - Flexy 14gg - Booking Allegri.

33 Quadrupla - Rimborsabile 31gg - Booking Allegri.

34 Quadrupla - Flexy 14gg - Booking Allegri.

35 Doppia - Rimborsabile 31gg - Expedia Allegri.

36 Doppia - Flexy 14gg - Expedia Allegri.

37 Tripla - Rimborsabile 31gg - Expedia Allegri.

38 Tripla - Flexy 14gg - Expedia Allegri.

39 Quadrupla - Rimborsabile 31gg - Expedia Allegri.

40 Quadruka - Flexy 14gg - Expedia Allegri.

41 Doppia - Rimborsabile 31gg - Expedia Bareteri.

42 Doppia - Flexy 14gg - Expedia Bareteri.

43 Tripla - Rimborsabile 31gg - Expedia Bareteri.

44 Tripla - Flexy 14gg - Expedia Bareteri.

45 Quadrupla - Rimborsabile 31gg - Expedia Bareteri.

46 Quadrupla - Flexy 14gg - Expedia Bareteri.

47 Doppia Prepagata Expedia Bareteri.

48 Tripla Prepagata Expedia Bareteri.

49 Quadrupla Prepagata Expedia Bareteri.

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 QUADRUPLA - Expedia Allegri il codice da utilizzare è:


<a href = "javascript:openbe2('bareteri', 1, {favroom: 16})">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.

Google Analytics

Per inserire le Google Analytics e agganciarle al booking engine, inserire il seguente codice in ogni pagina del sito:


<script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
     ga('create', 'UA-xxxxxxxx-y', 'auto');
     ga('send', 'pageview');
</script>
Cambiare UA-xxxxxxxx-y con il codice del proprio account Analytics.

Non vedi correttamente il sito desktop o mobile?

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