booking engine Widget

Last updated: 7 Maggio 2018

Installazione

Versione

1.0 released 07/05/2018

Versione base, contiene il widget con la generazione in formato Bootstrap 3 e le lingue italiano, inglese e francese.

HTML

Per effettuare l´inserimento del Booking Engine basterà inserire un elemento <div> con id="widget".
Ricordiamo che sarà necessario includere il seguente link Jquery nella sezione <head> della pagina. Jquery

HTML Code Example
<!DOCTYPE html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://js.hota.it/bewidget/jquery.bewidget.1.0.js"></script>
</head> <body> ... <!-- page content --> ... <div id="widget"></div> ... <!-- page content --> </body> </html>
In fondo alla pagina viene richiamata la generazione del widget sull'elemento scelto

    <script type="text/javascript" >
$(document).ready(function () {
$("#widget").buildBEWForm({
hash: "stringa alfanumerica" <!-- codice univoco del tuo booking engine -->
lang: "en" <!-- Lingua del booking engine (it en fr de) -->
<!--se non impostata viene controllata la lingua del browser --> });
});
</script>
La pagina HTML risultante sara simile a questa
<!DOCTYPE html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://js.hota.it/bewidget/jquery.bewidget.1.0.js"></script>
</head> <body> ... <!-- page content --> ... <div id="widget"></div> ... <!-- page content --> ... <script type="text/javascript" >
$(document).ready(function () {
$("#widget").buildBEWForm({
hash: "stringa alfanumerica" <!-- codice univoco del tuo booking engine -->
});
});
</script>
</body> </html>

Stili CSS

Il widget viene creato con le classi di Bootstrap 3. Puoi tuttavia impostare degli stili personalizzati al bottone modificando la classe .widgetsubmitbutton.
Per modificare i box delle date basta intervenire sulle classi css delle stesse.

CSS Code Example
/* ======= Styling the widget button ======= */
.widgetsubmitbutton {
    color: white; 
    background-color:red;
    font-size: 1.6em; 
}

Javascript

Puoi anche aggiungere diversi bottoni di ricerca, impostando dei valori di default, che verranno aggiornati se la ricerca nella barra di widget cambia.

JavaScript Code Example
<script> 
    $(element).SearchWithBookingEngine({
            // Valori di defaults.
            from: today(),
            to: tomorrow(),
            pax: 2,
            ages: "45,45",
            hash: "stringa alfanumerica" // Obbligatorio
        });
</script>

Versione

1.1 released 17/05/2018

Aggiunta la generazione la generazione senza alcuna classe o stile. Di default rimane Bootstrap3.

Affinchè l'utilizzo di questa versione sia effettiva è necessaria l'implementazione dei seguenti riferimenti:
HTML Code Example
<!DOCTYPE html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://js.hota.it/bewidget/jquery.bewidget.1.1.js"></script>
</head>
<script> 
    $(".demowidget").buildBEWForm({
        hash: "hash",
        styleFramework: "easyHTML"  // generazione html senza style 
                                    // ma con classi per la personalizzazione tramite CSS
    });
</script>


Con l'implementazione di pochi fogli di stili il risultato che si otterrà è il seguente:

La lista delle classi per la customizzazione è di seguito riportata:

.label_from
.input_from
.label_to
.input_to
.totalpaxlabel
.widgetsubmit
.beguestbox
.beguestbox_adult
.beguestbox_adult_minus
.beguestbox_adult_plus
.beguestbox_children
.beguestbox_children_minus
.beguestbox_children_plus
.children_agest

Versione

1.2 released 22/06/2018

Sostituito $ con jQuery nello script per evitare conflitti di nome.