Classe 3E e 3I SIA: Il carrello in Javascript senza Php (funzionante) della spesa (e-commerce) senza pagine dinamiche
(applicazione nativa trovata su Internet nel 2002)
TUTTI I FILES QUI CONTENUTI SONO LIBERAMENTE DISTRIBUIBILI, MODIFICABILI ED UTILIZZABILI IN TUTTO E PER QUALSIASI MOTIVO SENZA CHE ALCUNA SEGNALAZIONE O COMPENSO MI SIA DOVUTO.
VISUALIZZATE LE PAGINE CON IL BROWSER MOZILLA
L'obiettivo di questa esercitazione didattica quello di dimostrare come sia possibile realizzare un sistema per la presentazione di un negozio in Internet dotato delle caratteristiche minime indispensabili affinché' sia utilizzabile da un ipotetico cliente per fare acquisti. La tecnologia impiegata per la realizzazione del carrello usa i linguaggi di scripting ed ipertestuali integrati nei piu' comuni browser; con tutti i limiti di questa soluzione rispetto a piu' avanzate tecnologie client-server (tipo Php, Aspx, Java) a pagamento.... Ma con il vantaggio di essere economica, adatta a piccoli negozi; e nel caso qualcuno voglia servirsi di questa esercitazione anche del tutto gratuita. Per la personalizzazione del carrello non servono particolari conoscenze informatiche, basta la lettura delle istruzioni qui riportate e parte di quelle che si trovano all'inizio del file dati.js contenuto nell' archivio.
All'interno di carrello.zip ci sono i files:
index.html
dati.js
car.js
stile.css
QJOpti.html
leggimi.txt (il file che state leggendo)
I primi quattro sono parte integrante del carrello; pertanto se avete intenzione di usarlo dovete copiarli tutti insieme nella stessa directory di destinazione.
QJOpti.html e' una utility che serve a ridurre la dimensione dei files .js togliendone i commenti, gli spazi e gli avanzamenti di riga inopportuni nel caso in cui vogliate utilizzare i files .js in rete. Il vantaggio del codice cosi' "ottimizzato" sta nella maggiore velocita' di caricamento ottenuta grazie alla riduzione della dimensione e nella maggiore (di poco) velocita' di esecuzione nel browser.
Questa versione (1.18) del carrello e' stata provata essere funzionale allo scopo detto nell'introduzione con i seguenti browsers e relative versioni tutte per sistema operativo Microsoft Windows:
11NET
Amaya
Arachne
Arora
Avant Browser
Bird
Camino
Chromium
Cyberdog
Dillo
Dooble
Enigma Browser
Epiphany
ELinks
Epic
Flock
Galeon
Gnu IceCat
Google Chrome
GreenBrowser
IceWeasel
Internet Explorer
K-Meleon
Kazehakase
Kirix Strata
Konqueror
Kiwe (per bambini[27])
Links (testuale)
Lunascape
Lynx (testuale)
Maxthon (prima noto come Myie2)
Midori
Minimo
Mosaic
Mozilla
Mozilla Firefox
Netscape
Netsurf
Omniweb
Pale Moon
Opera
RealPlayer
RocketMelt[28]
Safari
SeaMonkey
Sleipnir
Slim Browser[29]
SRWare Iron
w3m (testuale
Sul MAC in ogni caso la visualizzazione del carrello e' leggermente diversa rispetto a Windows.
Non chiedetemi di personalizzare il carrello per adattarlo alle vostre esigenze nemmeno dietro compenso. Sono disponibile solo a correggere eventuali malfunzionamenti che avete riscontrato essere imputabili al codice da me scritto e vi ringrazio in anticipo della vostra eventuale segnalazione.
Paolo Latella E-mail: paolo.latella@alice.it 14-settembre-2003
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// ISTRUZIONI PER LA PERSONALIZZAZIONE DEL CARRELLO
L'utilizzatore puo' modificare il programma carrello della spesa, piu' avanti detto semplicemente "carrello", per adattarlo ai suoi specifici prodotti senza conoscere una sola riga del codice di programmazione usato per sua costruzione. Daro' qui le istruzioni indispensabili per la sua personalizzazione, che in questa
versione si limita agli articoli del proprio negozio e a pochi altri aspetti indispensabili al suo corretto funzionamento.
Non sono per ora possibili modifiche al layout ed ai colori delle scritte interne nelle varie porzioni in cui e' suddivisa l'area della finestra del browser.
In testa al file dati.js sotto una riga che ripete la dicitura INIZIO PARTE MODIFICABILE indica il punto in cui l'utilizzatore non esperto del codice di programmazione puo' (e deve) intervenire per adattare il carrello alle proprie esigenze. Al temine una riga
che riporta: FINE PARTE MODIFICABILE delimita la fine della parte suscettibile di modifiche.
Per inserire i vostri prodotti nel carrello dovete prima di tutto decidere il numero di reparti in cui suddividere il vostro negozio (massimo 25), poi assegnare ad ogni prodotto un proprio codice identificativo univoco per distinguerlo dagli altri prodotti (massimo 999 prodotti); in modo che quando ricevete l'ordine potrete associare il codice al prodotto vero e proprio.
Per popolare il carrello con i vostri reparti e articoli osservate lo schema di esempio usato nella parte modificabile. Ci sono sette colonne, e solo le prime quattro di esse possono essere modificate per la personalizzazione del carrello: Codice, Modello, Prezzo e Link; le rimanenti tre sono riservate per l'uso interno.
La colonna del codice deve contenere il codice del vostro prodotto. Utilizzate un codice unico per ogni articolo, se vi sono codici articolo duplicati verrete avvisati da un messaggio di avvertimento quando proverete il carrello. Per il codice articolo usate solo caratteri alfanumerici o "-" o "_"; sono vietati segni di interpunzione e spazi vuoti. Queste norme apparentemente restrittive sono del tutto normali quando si tratta di associare un codice ad un articolo perche' la loro osservanza facilita l'elaborazione automatica dei dati da parte dei programmi. Non e' necessario che i codici articolo siano di lunghezza fissa e non ci
sono eccessivi limiti alla loro lunghezza, anche se un codice articolo da 100 caratteri e' decisamente sconsigliato.
I campi della colonna Link possono essere riempiti con un link esterno ad una pagina descrittiva dell'articolo. Nel mio esempio solo alcuni articoli del reparto ABBIGLIAMENTO hanno un link a puro scopo dimostrativo. Se non avete intenzione di associare una descrizione al vostro articolo impostate a 0 il valore in tale colonna.
Per creare rapidamente un vostro reparto fate un copia-incolla di uno quasiasi dei reparti di esempio qui proposti. Come si distingue un reparto ? La riga di inzio e':
articoli[v++] = new Array( Che voi dovrete riprodurre fedelmente all'inizio di ogni reparto.
La riga conclusiva e': "REPARTO NOME_DEL_VOSTRO_REPARTO" );
Badate a mantenere i doppi apici che delimitano la stringa "REPARTO NOME_DEL.." e la ); finali. Per dare il nome al vostro reparto conservate inalterata la parola di inizio REPARTO e sostituite NOME_DEL_VOSTRO_REPARTO.
Le righe comprese tra queste due possono essere tolte o aggiunte ed ognuna di essere rappresenta un singolo articolo del reparto.
Il numero di queste righe indica il numero di articoli immessi in ogni reparto. I reparti di esempio da me inseriti devono essere cancellati interamente nel caso in cui vogliate servirvi della vostra personalizzazione.
Come riceverete l'ordine ? In questo carrello e' stato definito il seguente metodo: quando l'utente premera' il tasto di conferma si avviera' nel suo computer il programma di posta elettronica che inviera' al vostro indirizzo email i dati con le scelte fatte dal cliente ed i dati personali disposti come nel seguente esempio:
user_name=Paolo
user_cognome=Latella
user_fiscale=NONE
user_indirizzo=http://paololatella.blogspot.com/
user_cap=26900
user_citta=LODI
user_prov=LO
user_stato=Italia
user_email =paolo.latella@alice.it
user_telefono=666
XM-J01=1
XM-J02=1
DA-A04=1
DA-A05=5
DB-B07=1
DB-B08=3
ED-B13=1
COD_434_626=Sun%2C_4_Mar_2001_14%3A24%3A10_UTC
L'ultima riga contiene un codice associato all'ordine e dopo il segno di = la data in un formato trasmissibile con i protocolli di Internet. Provate voi stessi ad inviarvi un ordine dopo aver fatto alcuni acquisti con il carrello per sincerarvi del suo corretto funzionamento.
Pur essendo semplice da applicare l'invio dell'ordine tramite email e' un sistema sconsigliato; qui forzatamente adottato perche' l'unico applicabile sul client senza bisogno della collaborazione di programmi residenti sul server. Ma sarebbe più utile avere un cgi salvato su un server esterno; l'utilizzo di questo procedimento insieme al carrello e' possibile, semplice, piu' sicuro, e spesso completamente gratuito perche' compreso nel servizio.
// CONTINUA IN TESTA AL FILE dati.js
Scarica l'intera applicazione a questo indirizzo:
Commenti
Posta un commento