Autore Topic: [v10 - 11] Carrello e-commerce: integrazione Datepicker nel form mail  (Letto 744 volte)

lemonsong

  • Anziani
  • Utente storico
  • *
  • Post: 1742
    • lemonsong's links
Al Passo 2 del processo di acquisto (Dati del Cliente) si può avere la necessità di inserire un campo "data" con relativo calendario.

Qui un esempio fatto con la 11: http://lemonsong.altervista.org/test_cart_Datepicker/

Abbiamo utilizzato il widget Datepicker

Ecco come procedere.

1. Scaricare i file necessari

Nella sezione download scarichiamo la libreria jQuery UI scegliendo uno tra i temi proposti, visionabili qui.
E' possibile scaricare anche solo il widget Datepicker, togliendo la spunta agli altri componenti della libreria.
Abbiamo bisogno anche di includere il file di lingua, che è possibile scaricare qui.

2. Esportare i file sul server


Non tutti i file contenuti nel "pacchetto" appena scaricato devono essere esportati sul server.
Servono: jquery-ui.css, jquery-ui.js, datepicker-it.js e tutta la cartella images

Noi abbiamo inserito questi file/cartella in una cartella chiamata jqDatepicker

Qui due pacchetti già pronti per l'uso:
http://lemonsong.altervista.org/test_cart_Datepicker/jqDatepicker.zip (tema Redmond)
http://stesil.altervista.org/evo10/campo-data-cart/jqDatepicker.zip (tema Le Frog)

3. Inserire il campo "data"

In Impostazioni Avanzate - Carrello e-commerce - scheda Dati cliente, aggiungere un nuovo campo personale NON obbligatorio.

4. Inserire i codici


Nelle Proprietà Pagina (Carrello e-commerce) - Esperto - Prima della chiusura del tag HEAD inserire questi codici:

Citazione
<link rel="stylesheet" href="../jqDatepicker/jquery-ui.css">
<script src="../jqDatepicker/jquery-ui.js"></script>
<script src="../jqDatepicker/datepicker-it.js"></script>

<style>
#ui-datepicker-div {
    z-index:10001 !important;
}
.ui-widget {
    font-size: 0.9em !important; /* grandezza del font che regola le dimensioni del calendario */
}
input[id='902db0fq'] {
    background: url('../res/date.gif') no-repeat right center !important; /* icona del calendario all'interno del campo data */
}
</style>

<script>
$(document).ready(function(){
    $('#imCartContainer').on('mouseover', '#902db0fq', function(){
        $("#902db0fq").datepicker({ minDate: 0}, $.datepicker.regional[ "it" ]);
    });
});
</script>



Il valore in rosso è da personalizzare con l'id del campo "data" che abbiamo creato.
Il valore in blu (0) impedisce la selezione di una data anteriore alla data corrente. Inserendo, per esempio, 2 la scelta di una data si potrà fare a partire da due giorni dopo la data corrente.

Se invece si vuole utilizzare il calendario senza limitazioni, si deve togliere questo codice: { minDate: 0},


Versione 10

Rispetto alla procedura sopra descritta, l'unica differenza è il punto 4. Inserire i codici

In Impostazioni Generali - Esperto - Prima della chiusura del tag HEAD:

Citazione
<link rel="stylesheet" href="../jqDatepicker/jquery-ui.css">

<style>
#ui-datepicker-div {
    z-index:10001 !important;
}
.ui-widget {
    font-size: 0.9em !important; /* grandezza del font che regola le dimensioni del calendario */
}
input[id='902db0fq'] {
    background: url('../res/date.gif') no-repeat right center !important; /* icona del calendario all'interno del campo data */
}
</style>



Nelle Proprietà Pagina (Carrello e-commerce) - Esperto - Prima della chiusura del tag BODY:

Citazione
<script src="../jqDatepicker/jquery-ui.js"></script>
<script src="../jqDatepicker/datepicker-it.js"></script>

<script>
$(function(){
    $('#imCartContainer').on('mouseover', '#902db0fq', function(){
        $("#902db0fq").datepicker({ minDate: 0}, $.datepicker.regional[ "it" ]);
    });
});
</script>




L'integrazione è stata testata sulle versioni 10.1.12.57 e 11.0.2.13
« Ultima modifica: 15 Novembre, 2014, 00:45:19 da lemonsong »