[RISOLTO] Creare modulo?

[kefy]

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!

[ANTONIO76]

Ciao Kefy,


Il servizio di booking engine non ti da la possibilità di prelevare un semplice widget / script da inserire nel sito?

[kefy]

mmh, no, mi hanno dato solo quei files.
Però ho una pagina di esempio: [size=78%]http://hotel.valcaisse.com/[/size]

[danielecr]

Crei un modulo custom, e incolli l'html, solo la parte dentro il body (tag body esclusi):
tipo:

Codice: [Seleziona]

<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) nello stesso modulo di cui sopra dentro i tag style, che diventa qualcosa del tipo:

Codice: [Seleziona]

<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:

Codice: [Seleziona]

    <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:

Codice: [Seleziona]

<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.

[kefy]

Grazie Danielecr
Vado subito a provare..

[kefy]

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! 
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" che ovviamente non esiste.

[danielecr]

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.

[kefy]

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.

Codice: [Seleziona]

             
                                 <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>
     <>
   
   
    <>
       


[kefy]

CI ho messo una vita, alla fine bastava spostare il tag </form> alla fine. E creare ovviamente un div in cui inserire il bottone!