Si tratta di una progress-bar che fa la sua comparsa nella pagina del carrello, e indica quanti step sono ancora necessari prima di concludere l'acquisto. Su ogni pagina viene evidenziato lo step attuale.
In realtà questa non è solo una miglioria, ma anche e soprattutto una caratteristica richiesta in base alle norme di chiarezza e trasparenza che regolano il commercio elettronico.
Questa progress-bar è realizzata interamente con CSS e un pizzico di jQuery, più quattro icone formato PNG (o anche GIF), una per ogni step.
Si potrebbe usare anche soltanto del CSS, ma voglio utilizzare anche un po' di jQuery per mostrare la potenza dei suoi selettori.
1. Markup HTML
Per prima cosa è necessario creare gli elementi della barra, inserendoli nella pagina con dell'HTML valido e accessibile:
<div id="checkoutbar"> <ol> <li>Carrello</li> <li>Inserimento dati</li> <li>Riepilogo ordine</li> <li>Ordine completo</li> </ol> </div>
Una lista ordinata è l'ideale per una sequenza logica di fasi.
2. Aggiungere CSS q.b.
Adesso serve dello stile per creare quattro blocchi allineati e non delle righe tipiche delle liste, più altro stile di base per rendere la barra più attraente ed in linea col design del sito.
#checkoutbar{
margin: 0 auto;
padding: 0;
height: 50px;
width: 700px;
}
#checkoutbar ol{
list-style-type: none;
margin: 0 auto;
}
#checkoutbar li{
float: left;
font-size: .6em;
margin: 1em;
padding: 1em 2em;
background: #abdbff;
border: 3px solid #abdbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
opacity: .7;
filter: alpha(opacity=70);
}
La proprietà float: left conferita agli elementi-lista fa sì che essi si dispongano l'uno accanto all'altro. La spaziatura si ottiene con margini e padding opportuni.
Da notare i bordi stondati (proprietà border-radius, CSS3) per i browser che li supportano (come Firefox e Safari... niente IE, come al solito!): la prima dichiarazione, quella con -moz è per Firefox, la seconda per Safari.
La terza è la dichiarazione ufficiale come da linee guida CSS3.
Vedi questo articolo per una spiegazione sulla natura di queste dichiarazioni.
Altro attributo interessante è l'opacità, che necessita di due settaggi: il primo (aderente alle linee guida di CSS3) non è valido per il solito IE, che vuole l'attributo filter : alpha.
La trasparenza ci serve per concentrare ancora di più l'attenzione dell'utente sullo step in cui egli si trova, che sarà reso in seguito del tutto opaco (opacity: 1).
3. Stile dello step corrente
A questo punto le scelte sono due, piuttosto equivalenti:
- attribuire in ciascuna pagina una classe all'elemento lista attivo, ad esempio con un class="current" e creare uno stile solo su quella classe.
- utilizzare i selettori di jQuery e creare uno stile attraverso di essi.
Oggi andiamo per la seconda strada, giusto per vedere un paio di selettori all'opera.
Ecco il codice:
$(document).ready(function(){
$('#checkoutbar li:not(:last)').append(' >>');
$('#checkoutbar li:eq(0)').css({
'opacity' : '1',
'padding-left' : '40px',
'background' : '#0081e4 url(images/checkoutbar1.png) center left no-repeat',
'color' : '#fff',
'border' : '3px double #abdbff'
});
});
La prima istruzione serve per attaccare a tutti i nomi degli step due simboli "maggiore di" (>), a fare le veci di una freccia che indica un percorso. Ho preferito inseririli tramite jQuery perché non hanno alcun significato semantico in senso stretto, ma sono solo un semplice artificio di design, e il markup della nostra lista rimane pulito.
Il selettore not() è un esclusore, cioè un NOT logico, mentre last identifica l'ultimo elemento di una serie, in questo caso la serie dei tag <li>.
In questo modo l'ultimo step, che è la fine del persorso, non ha alcuna freccia associata.
Il resto è lo stile dell'elemento corrente, identificato con il selettore eq(index): esso identifica un elemento di una serie in base al suo indice, che parte da 0. In questo caso, essendo il primo elemento quello corrente, abbiamo .eq(0): questo valore va cambiato su ogni pagina su cui figura la nostra barra.
L'immagine cui si fa riferimento nell'attributo background è un'icona che identifica la fase corrente, anch'essa individuale per ciascuna fase.
Post
