Aggiunta di articoli al carrello php mysql. Carrello della spesa per un negozio online nella parte anteriore o Scrittura Javascript modulare

“Quale cestino? E perché all'improvviso un cestino? - potresti rimanere sorpreso dopo aver letto il titolo. Quindi, il carrello della spesa è quello più comune, quello che usiamo tutti quando acquistiamo qualcosa in un negozio online. E ho deciso di pubblicare un articolo sulla sua creazione per un unico motivo: non ho potuto resistere alla meravigliosa e bellissima soluzione.

Non mi credi? puoi vedere il risultato. E se sei interessato a come viene fatto, continua a leggere.

introduzione

In questo articolo creeremo un carrello della spesa basato sulla tecnologia Ajax. Tutti i prodotti verranno registrati in un database MySQL e i dati verranno elaborati utilizzando PHP.

JQuery lancerà Ajax sulla pagina, inoltre, il plugin simpletip aggiungerà interattività all'intero processo.

Quindi cominciamo, scarichiamo i file demo e iniziamo a leggere.

Passaggio 1: database MySQL

Se desideri ottenere una demo funzionante, dovrai eseguire la seguente query SQL nel pannello di controllo del tuo database (ad esempio phpMyAdmin). Questa query creerà una tabella e inserirà diversi prodotti. Questo codice di query è disponibile anche nel file table.sql nei file demo.

tabella.sql

CREA TABELLA SE NON ESISTE internet_shop (id int(6) NOT NULL auto_increment, img varchar(32) collate utf8_unicode_ci NOT NULL default "", nome varchar(64) collate utf8_unicode_ci NOT NULL default "", testo descrittivo collate utf8_unicode_ci NOT NULL, prezzo double NOT NULL default "0", PRIMARY KEY (id), UNIQUE KEY img (img)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ; INSERT INTO internet_shop VALUES(1, "iPod.png", "iPod", "L'iPod originale e popolare.", 200); INSERT INTO internet_shop VALUES(2, "iMac.png", "iMac", "Il computer iMac.", 1200); INSERT INTO internet_shop VALUES(3, "iPhone.png", "iPhone", "Questo è il nuovo iPhone.", 400); INSERT INTO internet_shop VALUES(4, "iPod-Shuffle.png", "iPod Shuffle", "Il nuovo iPod shuffle.", 49); INSERT INTO internet_shop VALUES(5, "iPod-Nano.png", "iPod Nano", "Il nuovo iPod Nano.", 99); INSERT INTO internet_shop VALUES(6, "Apple-TV.png", "Apple TV", "La nuova Apple TV. Comprala subito!", 300);

Successivamente, devi inserire i dettagli del tuo account MySQL nel file connect.php.

Passaggio 2: XHTML

Per prima cosa creeremo il markup di base.

demo.php

Carrello I migliori prodotti, ai migliori prezzi Prodotti // Codice php che genera il Carrello dei prodotti Progetto

Come avrai notato dal codice sopra, abbiamo inserito i nostri contenuti in due sezioni principali, completamente identiche in termini di markup XHTML. Nella prima colonna mostriamo tutti i nostri prodotti, la seconda colonna funge da carrello della spesa.

Di seguito puoi vedere una rappresentazione dettagliata della struttura della nostra sezione prodotti.

I prodotti vengono generati utilizzando il nostro codice PHP, come si può vedere alla riga 18. Lo vedremo più in dettaglio tra qualche minuto. Ora diamo un'occhiata a come elaboriamo il markup XHTML per produrre il progetto finale.

Passaggio 3: CSS

Questa volta il codice CSS era molto lungo, quindi l'ho diviso in due parti.

demo.css

Body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label( /* ripristina gli stili originali, per compatibilità con il browser */ margin:0px; imbottitura:0px; font- family :Arial, Helvetica, sans-serif; ) body( color:#555555; font-size:13px; background-color:#282828; ) .clear( /* clear-fix hack per pulire lo stream dai float */ clear :both ; ) #main-container( /* questo è il contenitore principale contenente due sezioni */ width:700px; margin:20px auto; ) .container( /* il contenitore principale per le sezioni di contenuto: prodotti e carrello */ margin -bottom:40px; ) .top-label( /* span esterno, incluso il nome della sezione */ background: url(img/label_bg.png) no-repeat; /* visualizza il lato sinistro di label_bg.png - un'immagine ampia con bordi arrotondati */ display: inline-block; margin-left:20px; position:relative; margin-bottom:-15px; /* lo span interno è delineato in rosso nell'immagine sopra*/ background: url(img/label_bg.png) no-repeat in alto a destra; /* visualizza il lato destro dell'immagine label_bg.png */ display:inline-block; dimensione carattere: 10px; altezza: 36px; margine sinistro: 10px; /* viene lasciato uno spazio vuoto a sinistra per mostrare lo sfondo della sezione esterna */ padding:12px 15px 0 5px; text-transform:uppercase ) .content-area( /* La parte superiore dell'immagine con bordi arrotondati; guarda l'immagine sopra */ background:url(img/container_top.png) no-repeat #fcfcfc; riempimento:15px 20px 0 20px ) .content( /* riempimento totale per entrambe le sezioni */ riempimento:10px; ) .drag- desiderati( /* proprietà assegnate individualmente */ background:url(img/drag_desired_label.png) no-repeat in alto a destra; riempimento:20px; .drop-here( /* non destinato ad altre sezioni */ background:url(img/drop_here_label .png) no- ripeti in alto a destra; ) .bottom-container-border( /* la parte inferiore dell'immagine arrotondata che termina la sezione */ background:url(img/container_bottom.png) no-repeat; altezza:14px; ) .product( /* stili per i prodotti */ bordo:2px solido #F5F5F5; float:sinistra; imbottitura:10px; .product img( cursore:sposta; ) p.descr( imbottitura:5px 0; ) piccolo( display:blocco; margin- top:4px; ) .tooltip( /* descrizioni comandi create utilizzando il plugin simpletip */ position: Absolute; superiore: 0; a sinistra: 0; indice z: 3; visualizzazione: nessuno; colore di sfondo:#666666; bordo: 1px solido #666666; colore:#fcfcfc; imbottitura: 10px; -moz-border-raggio:12px; /* angoli arrotondati */ -khtml-border-radius: 12px; -raggio-bordo-webkit: 12px; raggio del bordo: 12px; )

Presta attenzione alla classe tooltip. Viene creato automaticamente dal plugin simpletip, ma per impostazione predefinita non ha stili. Ecco perché qui gli assegniamo uno stile. Ho utilizzato la proprietà border-radius, che non è ancora supportata da tutti i browser, ma non causerà molti danni a coloro che non la supportano.

Ora diamo un'occhiata agli stili CSS per la sezione del carrello.

#cart-icon( /* div che contiene l'icona del carrello */ width:128px; float:left; position:relative; /* imposta il posizionamento relativo in modo che il caricatore ajax sia posizionato rispetto al div*/ ) #ajax- loader ( position:absolute; /* il posizionamento assoluto posiziona l'elemento sulla pagina rispetto al suo elemento genitore, a cui è assegnato il posizionamento relativo */ top:0px; left:0px; visibilità:hidden; ) #item-list( /* il contenuto del carrello verrà posizionato in questo blocco */ float:left; width:490px; padding-top:10px; text-transform:uppercase ) #total( /* blocco, con importo totale */ clear:both; float:right; font-size:10px; font-weight:bold; imbottitura:10px 12px; text-transform: uppercase ) #item-list table( /* ogni articolo nel carrello è posizionato all'interno del blocco item-list* / colore di sfondo:#F7F7F7; bordo: 1px solido #EFEFEF; margine superiore: 5px imbottitura: 4px; ) a.button,a.button:visited( /* Pulsante Checkout */ display:none; altezza:29px; larghezza:136px; imbottitura-top:15px; margine:0 automatico; overflow:nascosto; colore:bianco; carattere - size:12px; font-weight:bold; text-transform:uppercase; background:url(img/button.png) no-repeat center top; /* visualizza solo la parte superiore dell'immagine di sfondo */ ) a.button:hover ( background-position:bottom; /* al passaggio del mouse, mostriamo la parte inferiore dell'immagine di sfondo */ text-decoration:none; ) /* Alcuni stili meno interessanti */ a, a:visited ( color:#00BBFF ; text- decorazione:none; contorno:none; ) a:hover( decorazione del testo:underline; ) h1( dimensione del carattere:28px; peso del carattere:grassetto; famiglia dei caratteri:"Trebuchet MS", Arial, Helvetica, sans-serif ; ) h2( peso carattere:normal; dimensione carattere:20px; colore:#666666; rientro testo:30px; margine:20px 0; ) .tutorialzine h1( colore:bianco; margine-inferiore:10px; dimensione carattere :48px; ) .tutorialzine h3( colore:#F5F5F5; dimensione carattere:10px; peso carattere:grassetto; margine inferiore:30px; trasformazione del testo: maiuscolo; ) .tutorial-info( colore:bianco; allineamento testo:centro; imbottitura:10px; margine-superiore:-20px; )

Qualsiasi sviluppatore ci dirà che ci siamo persi qualcosa qui. Come probabilmente avrai intuito, esistono procedure di trattamento speciali per IE6.

Personalmente, ho intenzione di smettere presto di supportare IE6 in tutti i miei progetti: se non fosse per IE6, il codice sopra sarebbe più corto di un quarto e non dovrei dedicare così tanto tempo al debug.

Ma in ogni caso ecco cosa ci serve per far capire a IE6 cosa vogliamo che faccia:

demo.php

.pngfix ( behavior: url(pngfix/iepngfix.htc);) /* questo è un file htc speciale che risolve i problemi di trasparenza di IE6 */ .tooltip(width:200px;); /* fornisce una larghezza predefinita per i tooltip */

Grande. Ora diamo un'occhiata al PHP finale.