Joomla.it Forum
Joomla! 3 => Joomla! 3 => : kefy 01 Apr 2019, 19:00:03
-
Salve a tutti!
Sto facendo un sito ad un hotel.
Hanno un servizio esterno di booking engine. (Quindi un link a cui collegarsi per procedere con il controllo disponibilità e prenotare).
Io vorrei creare un modulo con un piccolo form con: "data di arrivo", "data di partenza" "persone" e un bottone "cerca e prenota" con cui creare e raggiungere il link esterno.
Mi hanno dato le "istruzioni" e una serie di files. (Ve le allego).
Sto seguendo la "modalità 2", cambiare i codici e modificare il css lo so fare, invece non capisco come integrare il tutto nel mio sito joomla...
Nel senso: la serie di files in che cartella va?
La pagina searchbox.htm ha nell'head una serie di richiami ai suddetti files, la devo copiare direttamente nel mio modulo o da qualche altra parte? Mi verrebbe in mente nella pagina index...
C'è qualcuno che saprebbe aiutarmi?
Grazie!
-
Ciao Kefy,
Il servizio di booking engine non ti da la possibilità di prelevare un semplice widget / script da inserire nel sito?
-
mmh, no, mi hanno dato solo quei files.
Però ho una pagina di esempio: [size=78%]http://hotel.valcaisse.com/ (http://hotel.valcaisse.com/)[/size]
-
Crei un modulo custom, e incolli l'html, solo la parte dentro il body (tag body esclusi):
tipo:
<div id="pass-container">
<form action="https://webhotels.passepartout.cloud/webbooking.aspx" method="get">
<input type="hidden" name="Albergo" value="900065" />
<input type="hidden" name="Lingua" value="0" />
<input type="hidden" name="OidPortaleXAlbergo" value="2496" />
<div style="display: inline-block; width: 120px;">
<label for="dataArrivo">
Data Arrivo:</label>[br /]
....
....
....
<select class="cmbQuantitaRiduzione" name="PersoneXCamera[3].QuantitaRiduzioni" id="cmbQuantitaRiduzioni4">
<option value="0">0</option>
<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>
</select>
</div>
</div>
</div>
<input type="text" name="CodicePromozione" value="" style="width:92%; margin-top:15px" placeholder="Codice promozione" />
</form>
<a href="#" class="myButton" id="btnPrenota" style="margin-top: 20px">Prenota[/url]
</div>
Per i richiami ai css, hai diverse alternative, a seconda del tuo template:
1- incolli il contenuto dei tuoi css nel custom.css del tuo template (che il template dovrebbe già richiamare, quindi non devi modificare l'index.php del template)
2- in colli il contenuto dei tuoi css (SearchBox.css e https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css (https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css)) nello stesso modulo di cui sopra dentro i tag style, che diventa qualcosa del tipo:
<style>
#pass-container
{
font-family: Arial;
font-size: 12px;
overflow: hidden;
display:inline-block;
padding: 10px;
border: solid 1px #cccccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
background: #f5f5f5;
}
#pass-container .colAdulti
{
display:inline-block;
}
#pass-container .cmbQuantitaRiduzione
{
width:80px;
}
......
......
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px;
}
/* Overlays */
.ui-widget-overlay {
background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
opacity: .5;
filter: Alpha(Opacity=50); /* support: IE8 */
}
.ui-widget-shadow {
margin: -5px 0 0 -5px;
padding: 5px;
background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
opacity: .2;
filter: Alpha(Opacity=20); /* support: IE8 */
border-radius: 5px;
}
</style>
<div id="pass-container">
<form action="https://webhotels.passepartout.cloud/webbooking.aspx" method="get">
<input type="hidden" name="Albergo" value="900065" />
<input type="hidden" name="Lingua" value="0" />
<input type="hidden" name="OidPortaleXAlbergo" value="2496" />
<div style="display: inline-block; width: 120px;">
<label for="dataArrivo">
Data Arrivo:</label>[br /]
....
....
....
<select class="cmbQuantitaRiduzione" name="PersoneXCamera[3].QuantitaRiduzioni" id="cmbQuantitaRiduzioni4">
<option value="0">0</option>
<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>
</select>
</div>
</div>
</div>
<input type="text" name="CodicePromozione" value="" style="width:92%; margin-top:15px" placeholder="Codice promozione" />
</form>
<a href="#" class="myButton" id="btnPrenota" style="margin-top: 20px">Prenota[/url]
</div>
3- Richiami i files css dall'index, quindi copi il SearchBox.css dentro una cartella del tuo template (di solito /templates/nometemplate/css/), quindi modifichi l'index php nella sezione head e aggiungi richiami:
<link type="text/css" href="/templates/nometemplate/css/SearchBox.css" rel="stylesheet" />
<link type="text/css" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"
rel="stylesheet" />
Per i javascript copierei i richiami nel modulo stesso, dopo i tag style (se hai scelto l'opzione di copiare i css nel modulo) e comunque prima dei div:
<style>
#pass-container
{
font-family: Arial;
font-size: 12px;
overflow: hidden;
display:inline-block;
padding: 10px;
border: solid 1px #cccccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
background: #f5f5f5;
}
#pass-container .colAdulti
{
display:inline-block;
}
#pass-container .cmbQuantitaRiduzione
{
width:80px;
}
......
......
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 4px;
}
/* Overlays */
.ui-widget-overlay {
background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
opacity: .5;
filter: Alpha(Opacity=50); /* support: IE8 */
}
.ui-widget-shadow {
margin: -5px 0 0 -5px;
padding: 5px;
background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
opacity: .2;
filter: Alpha(Opacity=20); /* support: IE8 */
border-radius: 5px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script type="text/javascript" src="/templates/protostar/js/dateUtil.js"></script>
<script type="text/javascript" src="/templates/protostar/js/SearchBox.js"></script>
<script type="text/javascript" src="/templates/protostar/js/jquery.maskedinput-1.3.min.js"></script>
<div id="pass-container">
<form action="https://webhotels.passepartout.cloud/webbooking.aspx" method="get">
<input type="hidden" name="Albergo" value="900065" />
<input type="hidden" name="Lingua" value="0" />
<input type="hidden" name="OidPortaleXAlbergo" value="2496" />
<div style="display: inline-block; width: 120px;">
<label for="dataArrivo">
Data Arrivo:</label>[br /]
....
....
....
<select class="cmbQuantitaRiduzione" name="PersoneXCamera[3].QuantitaRiduzioni" id="cmbQuantitaRiduzioni4">
<option value="0">0</option>
<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>
</select>
</div>
</div>
</div>
<input type="text" name="CodicePromozione" value="" style="width:92%; margin-top:15px" placeholder="Codice promozione" />
</form>
<a href="#" class="myButton" id="btnPrenota" style="margin-top: 20px">Prenota[/url]
</div>
Controlla, che joomla non carichi già di suo css e js di jquery, in questo caso puoi fare a meno di richiamarli di nuovo.
Molto probabilmente dovrai modificare il file SearchBox.js (errore: $ is not a function): basta che apri/modifichi quel file e rimpiazzi il simbolo $ con la stringa jQuery
Al click del tasto prenota si viene redirezionati per il booking.
Probabilmente dovrai poi giocare un po con i css per l'aspetto, il mio è stato solo un test di funzionamento.
-
Grazie Danielecr
Vado subito a provare..
-
Yuppy!! Ce l'ho quasi fatta..
I files li ho copiati nella root principale del sito e ho sostituito tutti i $ con jQuery.
Ho messo il css direttamente nel modulo cosi ce l'ho subito sott'occhio.
Funziona! ;D
Mi sono sistemata il css, ora devo capire come sistemare i campi in orizzontale...
Io e i DIV non andiamo d'accordo!!
Tra l'altro non vedo l'icona del calendario.. e non capisco da dove salta fuori! Se ispeziono la pagina con chrome lo vedo, ma nel mio codice non c'è.. da dove salta fuori? O meglio: come faccio a capire quale sarebbe il percorso dell'immagine?
Il percorso sembrerebbe "http://www.XXXXXXX.com/index.php/it/calendario.gif (http://www.XXXXXXX.com/index.php/it/calendario.gif)" che ovviamente non esiste. :(
-
Il riferimento è nel file SearchBox.js
Da come è scritto il file calendario.gif dovrebbe stare nella stessa cartella dell'html, ma joomla ha la sua logica e il suo router, visto che hai un sito multilingua, aggiunge il codice lingua nell'url. Prova magari a mettere un percorso assoluto.
-
Ok, sistemato anche il calendario.Però sto impazzendo con i div.Sono riuscita a togliere tutti i campi che non mi interessavano nascondendoli con "display:none".Quelli rimasti (data arrivo, data partenza, persone) sono riuscita ad allinearli in orizzontale con "display: inline-block. Mi rimane fuori solo il pulsante "cerca e prenota" che continua ad andare a capo! E non capisco perchè.L'ho anche rinchiuso tra un tag div (sempre con il display inline-block) ma niente, va sempre a capo! Può essere che sia perchè il tag form si chiude prima? Ho provato a spostarlo in fondo ma poi non funziona più il form.
<option value="5">5</option>
<option value="6">6</option>
</select>
<>
<>
<>
<input type="text" name="CodicePromozione" value="" style="display: none; width:92%;" placeholder="Codice promozione" />
</form>
<div style="display:inline-block;">
<a href="#" class="btn" id="btnPrenota" style="">Prenota</a>
<>
<>
-
CI ho messo una vita, alla fine bastava spostare il tag </form> alla fine. E creare ovviamente un div in cui inserire il bottone! :D