[v10 - 11] Carrello e-commerce: integrazione Datepicker nel form mail

[lemonsong]

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:

<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

Esempio: http://stesil.altervista.org/evo10/campo-data-cart/

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

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

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

<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