Construiți un coș de cumpărături AJAX Powered

Comunitatea NETTUTS a cerut acest lucru. Deci, aici sunteți! Una dintre inovațiile web este cumpărăturile online. Ne permite să cumpărăm lucruri fără a părăsi vreodată confortul casei noastre. Cu toate acestea, elementul cel mai de bază al cumpărăturilor on-line, coșul de cumpărături, nu a evoluat prea mult. În acest tutorial, vom face un cartuș de cumpărături AJAX powered by PHP, jQuery și câteva plug-uri minunate.

Prefaţă

Scopul acestui tutorial este să vă arătăm cum să construiți un coș de cumpărături AJAX. Cu toate acestea, nu va fi gata de producție. Cerințele din spatele final variază de la un site la altul mult prea mult pentru a scrie un tutorial eficient. În schimb, ne vom concentra pe componentele AJAX. Codul final din acest tutorial acționează ca schelă pentru noi pentru a construi funcționalitatea AJAX, dar poate fi construită pentru a îndeplini cerințele site-ului dvs. În ultima secțiune, vom discuta despre câțiva pași următori pentru a implementa acest lucru pe propriile site-uri web.

Alt lucru de reținut este că acest tutorial nu va explica toate detaliile. Este de așteptat o înțelegere fermă a codului HTML, CSS și a câtorva PHP-uri de bază. De bază mă refer la variabile, matrice, structuri de control și de bază OOP. Unele cunoștințe despre Javascript sunt un plus. Vom traversa și vom distruge biții trădători ai PHP și Javascript, dar vom străluci peste lucrurile de bază precum stilul CSS. Legăturile cu documentația și cu alte resurse relevante vor fi stropite ori de câte ori este cazul.

Ultimul lucru pe care trebuie să-l notează este faptul că codurile de comandă (sau codurile produselor) folosite în acest tutorial sunt complet arbitrare.

Demo-ul

Pagina demo arată câteva moduri diferite în care poate funcționa coșul de cumpărături AJAX. Trebuie remarcat faptul că acesta nu este un coș de cumpărături gata de producție. Datorită variabilității cerințelor de la site la site, acest tutorial va acoperi doar construirea scheletului, în timp ce va trebui să codificați detaliile pentru obținerea denumirilor produselor, a prețurilor și a altor date care ar putea proveni dintr-o bază de date.

Pasul 1 - Descărcarea scripturilor

Vom folosi jQuery, jQuery
plugin-uri de animație color și Thickbox. Pluginul color extinde jQuery pentru a ne permite să folosim jQuery pentru a anima culorile și Thickbox ne permite să creăm ferestre modale rapide și ușoare.

Creați un director pe serverul dvs. web pentru a trăi cartul. Pentru acest tutorial vom folosi cărucior /. Înlocuiți căruciorul / cu directorul pe care îl utilizați pe serverul dvs. În interiorul coșului / directorului creați js /, css /, și imagini / foldere pentru stocarea Javascript, CSS și imagini.

Descărcați fișierele jQuery, pluginul color și fișierele Thickbox și salvați-le în dosarele corespunzătoare pe care tocmai le-am creat în directorul cart / director. Asigurați-vă că descărcați grosolarul.company necomprimat.

Structura folderului dvs. ar trebui să arate așa. Am redenumit unele dintre dosare, dar ar trebui să fie destul de evident ce este fiecare.

cart / js / jquery-1.2.6.pack.js coș / js / jquery.color.js coș / js / cartus / thickbox.js cart / images / loadingAnimation.gif cart / images / macFFBgHack.png

Pasul 2 - Configurarea grosimii

Deoarece structura noastră de directoare este puțin diferită de cea implicită Thickbox una, vom fi nevoiți să reparăm câteva dintre căile care fac referire la loadAnimation.gif și macFFBgHack.png.

Deschideți grobot.js și veți vedea următorul rând de cod după comentarii (linia 8):

var tb_pathToImage = "Imagini / loadingAnimation.gif";

Schimbați următoarele, astfel încât să se refere corect la fișierul loadingAnimation.gif:

var tb_pathToImage = "... /images/loadingAnimation.gif";

Apoi deschideți groso.css și găsiți linia care spune (linia 37):

.TB_overlayMacFFBGHack background: url (macFFBgHack.png) se repetă;

Și schimbați-l la:

.TB_overlayMacFFBGHack background: url (... /images/macFFBgHack.png) repetați;

Pasul 3 - Clasa Shopping_Cart

Vom crea o clasă pentru a face față tuturor acțiunilor diferite, cum ar fi adăugarea de articole în coș și salvarea căruciorului. Următorul este codul pentru clasa Shopping_Cart pe care o vom folosi pentru acest tutorial. Din nou, acest lucru este foarte bordo intenționat, deoarece cerințele backend va fi diferit de la site-ul la site-ul. Din moment ce nu există prea multe coduri, nu voi explica fiecare metodă și lăsați comentariile să explice. Salvați aceasta ca shopping_cart.class.php. Vom analiza modul de utilizare a acestei clase în pasul următor când vom crea un script de încărcare probă.

 cart_name = $ nume; $ this-> items = $ _SESSION [$ this-> cart_name];  / ** * setItemQuantity () - Setați cantitatea unui element. * * @ param string $ order_code Codul de comandă al elementului. * @param int $ quantity Cantitatea. * / funcția setItemQuantity ($ order_code, $ quantity) $ this-> items [$ order_code] = $ quantity;  / ** * getItemPrice () - Obțineți prețul unui element. * * @ param string $ order_code Codul de comandă al elementului. * @return int Prețul. * / function getItemPrice ($ order_code) // Aici codul returueaza preturile // merge. Vom spune că totul costă 19,99 USD pentru acest tutorial. întoarcere 9.99;  / ** * getItemName () - Obțineți numele unui element. * * @ param string $ order_code Codul de comandă al elementului. * / function getItemName ($ order_code) // Aici merge codul care readuce numele produsului //. Vom reveni la ceva generic pentru acest tutorial. return 'Produsul meu ('. $ order_code. ')';  / ** * getItems () - Obțineți toate elementele. * * @return array Elementele. * / funcția getItems () return $ this-> items;  / ** * hasItems () - Verifică dacă există articole în coș. * * @return bool Adevărat dacă există elemente. * / funcția hasItems () return (bool) $ this-> items;  / ** * getItemQuantity () - Obțineți cantitatea unui articol în cărucior. * * @param string $ order_code Codul comenzii. * @return int Cantitatea. * / funcția getItemQuantity ($ order_code) retur (int) $ this-> items [$ order_code];  / ** * curat () - Curățați conținutul cartușului. Dacă unele articole au o cantitate * mai mică decât una, eliminați-le. * / function clean () foreach ($ this-> elemente ca $ order_code => quantity quantity) if ($ quantity < 1 ) unset($this->articole [$ order_code]);  / ** * save () - Salvează căruciorul la o variabilă de sesiune. * / funcția salvați () $ this-> clean (); $ _SESSION [$ this-> cart_name] = $ this-> items; ?>

Pasul 4 - load.php

Înainte de a face orice altceva, vom crea un script simplu care încarcă câteva elemente de probă în coș. Acest lucru va face mai ușoară construirea paginii de coș. Să numim acest fișier load.php și să îl salvăm în directorul cart / director.

setItemQuantity ("HSD-KSE", 2); $ Cart-> setItemQuantity ('KLS-IEN', 1); $ Cart-> setItemQuantity ('ELS-OWK', 4); $ Cart-> Salvare (); header ('Locație: cart.php'); ?>

Primele trei linii includ clasa de coșuri de cumpărături pe care am creat-o în etapa anterioară, începeți sesiunea pentru a putea salva căruciorul și creați o nouă instanță Shopping_Cart. Aceste trei linii vor fi în partea de sus a oricărui fișier care trebuie să acceseze coșul de cumpărături. Observați cum pe linia 3 transmit un singur parametru, "shopping_cart", când creez instanța Shopping_Cart. "shopping_cart" este transmis constructorului clasei, care stabilește variabila de instanță $ cart_name. Acesta este numele variabilei de sesiune pe care vom stoca toate datele din cărucior. Motivul pentru care facem acest lucru este evitarea conflictelor cu alte căruțe.

Restul codului adaugă pur și simplu trei articole la coș, le salvează și redirecționează utilizatorul la coșul propriu pe care îl vom construi în pasul următor. Metodele (care sunt, în principiu, funcții) dintr-o clasă sunt accesate utilizând o sintaxă specială a săgeților.

Pasul 5 - Construirea căruciorului

Vom construi carul, dar fără funcționalitatea AJAX, pentru ca în cazul în care utilizatorul să fie dezactivat cu Javascript, va putea totuși să folosească carul. Acest lucru este important, pentru că vrem să cumpere ceva și nu va reuși să facă acest lucru dacă nu se degradează bine atunci când Javascript este dezactivat!

    Cărucior de cumpărături        Cărucior de cumpărături
 hasItems ()):?>  getItems () ca $ order_code => cantitate $): $ total_price + = $ quantity * $ Cart-> getItemPrice ($ order_code); ?> ":"";>>   Cantitate  Articol  Codul de comanda  Preț unitar  Total  Elimina  
  getItemName ($ order_code); ?>   $getItemPrice ($ order_code); ?>  $getItemPrice ($ order_code) * $ cantitate); ?>   
  $
 
  
  Nu aveți niciun articol în coșul dvs..
  Încărcați coșul de probă

Cantitate	Articol	Codul de comanda	Preț unitar	Total	Elimina
	getItemName ($ order_code); ?>		$getItemPrice ($ order_code); ?>	$getItemPrice ($ order_code) * $ cantitate); ?>
	$

Aici arătăm doar articolele din coș într-o masă bine formatată, cu niște comenzi pentru eliminarea obiectelor și schimbarea cantităților. Pe linia 18 verificăm dacă există articole în coș. Dacă există, vom merge și vom crea masa. Dacă nu, vom arăta un mesaj simplu, permițând utilizatorului să știe că nu are niciun articol în coșul său. Folosesc sintaxa alternativă pentru declarațiile ... if else.

Această bucată de cod ar putea părea intimidantă, dar este destul de simplu dacă o desființăm:

getItems () ca $ order_code => cantitate $): $ total_price + = $ quantity * $ Cart-> getItemPrice ($ order_code); ?> ":"";>>  getItemName ($ order_code); ?>  $getItemPrice ($ order_code); ?> $getItemPrice ($ order_code) * $ cantitate); ?>

Mai întâi, setăm valoarea totală ($ total_price) și o variabilă de numărare a rândului ($ i) la 0. Apoi se aruncă într-o buclă foreach care creează un rând în tabel pentru fiecare element. Iată o scurgere a ceea ce se întâmplă în interiorul bucla:

Adăugați prețul extins (cantitate * preț unitar) la prețul total.
```
$ total_price + = $ cantitate * $ Cart-> getItemPrice ($ order_code);
```
Echo-ul de deschidere etichetă. Dacă numărarea rândului este ciudată, includeți o clasă numită "impar". Acest lucru este pentru striping zebra care va face navigarea coșul mai ușor. Aici folosim operatorul ternar (? :) ca o comandă rapidă la o instrucțiune completă dacă ... else.
```
echo $ i ++% 2 == 0? "":"„;
```
Echoanați câmpul cantitate de intrare. Numele câmpului de introducere este formatat (cantitate [ORDER-CODE]), astfel încât PHP îl va converti automat într-o matrice. Reutilizăm numărătoarea rândului ($ i) pentru a adăuga un index tab.

Echo afară numele articolului, codul de comandă, prețul unitar și prețul extins.

getItemName ($ order_code); ?>  $getItemPrice ($ order_code); ?> $getItemPrice ($ order_code) * $ cantitate); ?>

Faceți clic pe caseta de selectare Eliminați elementul de eliminare. Observați din nou numele specific formatat al elementului de introducere a casetei de selectare.
```
 
```

În cazul în care bifăm foreach-ul, reluăm un alt rând care arată prețul total al tuturor articolelor din coș. Am adăugat, de asemenea, un link la load.php pe care l-am creat în etapa anterioară, astfel încât să putem încărca cu ușurință date de probă pentru testare.

Pasul 6 - Stylingul căruciorului

Coșul de cumpărături arată puțin clar în acest moment, așa că permiteți-i să-i dați ceva stil. Salvați codul CSS ca cart.css în directorul cart / css /. Acest lucru va da carului o culoare și formatare, astfel încât să fie mai ușor pentru ochi.

corp culoare: # 222; font: 0.8m Arial, Helvetica, sans-serif;  h1 font: 2m normal Arial, Helvetica, sans-serif; marginea inferioară: 0,5;  #container marja: 0 auto; lățime: 80%;  table # cart colaps de frontieră: colaps; marginea inferioară: 1em; lățime: 100%;  tabelul # căruța fond: # 006b68; culoare: #fff; text-aliniere: stânga; spațiu alb: acum;  tabelul # cartul, tabelul # cart td padding: 5px 10px;  tabelă # cart. nume_fișier lățime: 100%;  table # cart. intrare cantitativă text-align: center;  tabelul # cart tr td background: #fff;  tabelul # cart tr.odd td background: #eee;  .center text-aliniere: centru;

Pasul 7 - Prelucrarea căruciorului

Acum trebuie să scriem scriptul care gestionează adăugarea, eliminarea și setarea cantităților pentru elemente. Salvați-o ca cart_action.php în cărucior / dosar.

getItemQuantity ($ _ GET [ 'order_code']) + $ _ GET [ 'cantitate']; $ Cart-> setItemQuantity ($ _GET ['order_code'], $ cantitate);  dacă ! empty ($ _GET ['quantity'])) foreach ($ _GET ['quantity'] ca $ order_code => quantity quantity) $ Cart-> setItemQuantity ($ order_code, $ quantity);  dacă (! gol ($ _GET ['remove'])) foreach ($ _GET ['remove'] ca $ order_code) $ Cart-> setItemQuantity ($ order_code, 0);  $ Cart-> save (); header ('Locație: cart.php'); ?>

Acesta este un alt scenariu destul de simplu. Există trei declarații pentru a verifica dacă adăugați elemente, setați cantități și eliminați elementele. Iată unde se află în joc formatul special pe numele câmpurilor de intrare. PHP va converti automat numele câmpurilor de intrare cu paranteze în matrice. Deci, dacă facem un var_dump () de $ _GET pe formularul de actualizare a coșului de completare, puteți obține ceva care arată astfel:

array (3) ["cantitate"] => array (3) "HSD-KSE" "KWL-JFE"] => șir (1) "9" ["eliminare"] => șir (7) ) "KWL-JFE" ["actualizare"] => șir (11) "Actualizare coș"

Deoarece toate cantitățile noi și elementele care urmează a fi eliminate sunt în tabele, putem pur și simplu să le comprimăm folosind o buclă de foreach și să apelam funcțiile corespunzătoare. Prima instrucțiune if adaugă elemente noi în coș, cele două cantități de elemente de modificare și cea de-a treia elimină elementele.

În acest moment, avem un coș de cumpărături fără AJAX. Destul de plictisitor până acum, dar vom adăuga în AJAX în pasul următor.

Pasul 8 - Adăugarea AJAX

Primul lucru pe care trebuie să-l facem este să conectăm jQuery, pluginul de animație pentru culori și propriul javascript, pe care îl vom crea într-un pic, la coș. Deschideți din nou cart.php și adăugați următoarele linii în interiorul Etichete.

Acum creați un fișier numit cart.js în directorul cart / js /. Aici vom pune propriul cod Javascript care să permită funcționarea tuturor funcțiilor AJAX. În interiorul acestuia, adăugați următorul cod.

$ () ($) ($) ($) ($) ($) ($) cart_action.php ", data:" remove [] = "+ comanda de comanda, success: function () $ (" .fadeOut (500, funcția () $ (aceasta) .remove (); calcPrice ();); eroare: function () window.location ("cart_action.php? ; () ());)); $ ("# cart tr.quantity input") schimbare (function () var commandCode = $ (this) .attr ("name"). (type: "GET", url: "cart_action.php", date: "quantity [" + comandCode + "] =" + quantity, success: ) var startColor = $ ("# cart tr.quantity input [nume * =" + comanda + "]") "(# background_color:" # ff8 ", () () () 100) .animate (backgroundColor: startColor, 800); calcPrice ();, eroare: function () windo w.locație ("cart_action.php? quantity [" + comandCode + "] =" + cantitate); ); ); ); funcția calcPrice () var totalPrice = 0; $ (("cantitate de intrare", aceasta) .val (); var unitPrice = $ (". unit_price", aceasta ) .text () "slice (1); var extinsPrice = cantitate * unitPrice; totalPrice + = prelungită; $ (" .prelungită_price ", aceasta) .html (" $ "); html ("$" + totalPrice);); dacă (totalPrice == 0) $ ("# cart") parent () replaceWith ("Nu aveți niciun articol în coșul dvs..
");

Acest amestec de cod pare prea intimidant, dar poate fi împărțit în trei blocuri distincte: blocul care se ocupă de căsuțele de eliminare, blocul care ocupă câmpurile cantitate și ultimul bloc care recalculează toate prețurile când un element este eliminat sau o cantitate este schimbată. Primele două blocuri sunt cuprinse într-o funcție care arată astfel:

$ (funcția () // Codul merge aici ...);

Codul care intră în această funcție se execută odată ce DOM-ul a fost încărcat. Este o comandă rapidă pentru funcția $ (document) .ready (callback).

Primul bloc de cod care intră în interiorul acelei funcții menționate anterior se ocupă de casetele de eliminare:

$ () ()) ()) () () () () () : "remove [] =" + comanda de comanda, succes: function () $ ("# cart tr tr. retragere intrare [value =" + comanda + "] () $ (this) .remove (); calcPrice (););, error: function () window.location ("cart_action.php? );

Aceasta leagă o funcție de evenimentul clic al tuturor căsuțelor de bifare. Când se bifează o casetă de selectare, se întâmplă câteva lucruri:

Prindeți codul de comandă și stocați-l într-o variabilă.
```
var ordCode = $ (acest) .val ();
```
Efectuați un apel AJAX către server, spunându-i să elimine elementul. Dacă citiți tutorialul lui Eric despre trimiterea formularelor fără a reîmprospăta o pagină, acest lucru va arăta familiar. Datele care sunt trimise sunt exact aceleași ca și când am fi făcut o depunere a formularului. Parametrul de date este identic cu șirul GET pe care l-am vedea dacă am elimina redirecționarea în cart_action.php și am făcut o trimitere a formularului de coș de actualizare. Dacă apelul AJAX are succes, vom decolora rândul cu elementul pe care dorim să îl eliminăm și apoi îl vom elimina complet din DOM. Apoi numim funcția calcPrice () (al treilea bloc de cod) pentru a recalcula toate prețurile. Dacă apelul nu a reușit, vom reveni la o reîmprospătare a paginii.

Al doilea bloc de cod este foarte asemănător, cu excepția faptului că stabilește cantitățile:

$ ()) .attr ("nume") slice (9, -1); var quantity = $ (this) .val (): $ .ajax (tip: "GET", url: "cart_action.php", date: "quantity [" + #cart tr .cantity input [nume * = "+ comandaCode +"] ") parent () parent () hasClass (" ciudat ")" #eee ":" #fff "; (backgroundColor: "# ff8", 100) .animate (backgroundColor: background color: startColor, 800), calcPrice ();, eroare: function () window.location ("cart_action.php? quantity [" + orderCode + "] =" + quantity ");

Aici legăm o funcție la schimbarea evenimentului tuturor câmpurilor de cantitate de intrare care vor executa un apel AJAX ori de câte ori se schimbă cantitățile. Să-l distrugem:

Extrageți și stocați codul de comandă și noua cantitate.

var comandCode = $ (acest) .attr ("nume") slice (9, -1); var cantitate = $ (acest) .val ();

Efectuați un apel AJAX către server, informându-l să actualizeze cantitatea specificată. Dacă apelul este reușit, facem ca culoarea de fundal a rândului să clipească galben pentru o secundă pentru a permite utilizatorului să știe că cantitatea a fost schimbată, apoi apelați funcția calcPrice () pentru a recalcula toate prețurile. Dacă apelul nu reușește, reveniți la reîmprospătarea unei pagini.

Și în sfârșit cel de-al treilea bloc de cod, pe care l-am văzut, a fost apelat de două ori deja: funcția calcPrice ().

funcția calcPrice () var totalPrice = 0; $ (("cantitate de intrare", aceasta) .val (); var unitPrice = $ (". unit_price", aceasta ) .text () "slice (1); var extinsPrice = cantitate * unitPrice; totalPrice + = prelungită; $ (" .prelungită_price ", aceasta) .html (" $ "); html ("$" + totalPrice);); dacă (totalPrice == 0) $ ("# cart") parent () replaceWith ("Nu aveți niciun articol în coșul dvs..
");

Acest lucru este simplu, de asemenea. Se trece prin fiecare rând și se recalculează prețul extins și prețul total. Să ne descurcăm ce se întâmplă în fiecare buclă:

În primul rând, preluați cantitatea și prețul unitar al elementului și înmulțiți-le pentru a obține prețul extins. Apoi, adăugați-l la prețul total de rulare care începe de la zero.

var cantitate = $ ("cantitate de intrare", aceasta) .val (); var unitPrice = $ (". unit_price", aceasta) .text () slice (1); var extendedPrice = cantitate * unitPrice; totalPrice + = prelungităPrice;

Actualizați prețul extins pentru rândul curent și prețul total cu totalul de funcționare.

$ (".prelungire_price", aceasta) .html ("$" + extensiePrice); . $ ( "# TOTAL_PRICE") html ( "$" + totalPrice);

Dacă după ce terminăm cu buclă prin coloane, vom constata că toate elementele au fost eliminate, înlocuiți vizualizarea căruciorului cu un mesaj care spune că carul este gol.
```
dacă (totalPrice == 0) $ ("# cart") parent () replaceWith ("Nu aveți niciun articol în coșul dvs..
");
```

Un lucru de remarcat este selectorul pe care îl folosesc pentru a prelua rândurile din tabel. Selectez toate celulele de masă cu clasa "quantity" și apoi sună funcția parent () pentru a obține rândurile. Acest lucru se datorează faptului că și anteturile tabelului sunt stocate într-un rând. Dacă am folosi pur și simplu "#cart tr", am obține și anteturile tabelului.

Pasul 9 - "Adăugați în coș"

Nici un cărucior nu este complet fără o modalitate de a adăuga elemente noi în coșul de cumpărături, așa că vom crea o pagină index care arată două moduri diferite de a face acest lucru. În timp ce ne aflăm la el, vom activa Thickbox pentru a deschide coșul de cumpărături într-o fereastră modală, în loc să mergeți la o pagină nouă.

Să creăm pagina și apoi să o despărțim. Salvați următoarele ca index.html în coș / dosar.

   Cărucior de cumpărături           Cosul de cumparaturi Demo
 Deschideți Cosul 
 Adăugați trei KWL-JFE în coș 
   KWL-JFE:

Dacă aruncați o privire la codul dintre veți observa că am inclus încă două fișiere, grosub.js și grosime.css și am adăugat mai mult Javascript. Hai să vorbim mai întâi despre biți de grosime.

Thickbox convertește linkurile cu o clasă de "grosime" într-o legătură care se deschide într-o fereastră modală. Diferitele opțiuni pentru fereastra modală sunt definite în șirul GET al adresei URL. Diferitele opțiuni sunt detaliate în secțiunea de exemple a site-ului Thickbox. Pentru coșul nostru de cumpărături, suntem interesați să deschidem conținutul iFramed într-o fereastră modală.

Pentru a deschide conținutul iFrame, folosim în URL următorii parametri:

?KeepThis = true & TB_iframe = true & height = 400 & lățime = 600

Primii doi parametri, KeepThis și TB_iframe, sunt constanți, dar ceilalți doi definesc înălțimea și lățimea ferestrei modale. Vom face 780px lățime și 400px înălțime. Legătura noastră cu coșul deschis va arăta astfel (nu uitați să setați clasa la "grosime" sau nu va funcționa!):

Deschideți Cosul

Un alt lucru de observat este faptul că atributul titlu al linkului va fi afișat ca titlul ferestrei modale.

Următorul link va adăuga un element în coș, pe lângă deschiderea acestuia. Pentru a face acest lucru, trebuie să trecem doi alți parametri în șirul de interogare GET: order_code și quantity. Cu toate acestea, acești doi parametri trebuie să apară înaintea parametrului KeepThis din interogare - Cutia groasă elimină automat toți parametrii după parametrul KeepThis. Adresa URL ar trebui să arate astfel:

cart_action.php? order_code = KWL-JFE & Cantitate = 1 & TB_iframe = true & height = 400 & width = 780

Această adresă URL va adăuga un singur element cu codul de comandă al KWL-JFE. Scriptul cart_action.php pe care l-am scris anterior va căuta codul de comandă și parametrii cantității și îi va adăuga în coș în consecință.

Al doilea mod în care putem adăuga elemente în coș este prin forma care permite utilizatorului să specifice cantitatea. Cu toate acestea, deoarece vrem ca carul să se deschidă într-o cutie groasă, trebuie să folosim un pic de Javascript. Între veți observa că avem un Javascript care se execută odată ce DOM a fost încărcat:

Acest cod caută formele cu o clasă de "cart_form" și leagă o funcție la evenimentul de trimitere. Operatorul poate fi defalcat după cum urmează:

Setați titlul ferestrei și obțineți codul și cantitatea de ordine din câmpurile de formular.
Construiți o adresă URL cu cod_cod, cantitate și parametrii Thickbox.
Deschideți o fereastră modală grosieră.
Return false pentru a opri depunerea formularului.

În cele din urmă, vom adăuga un pic de CSS pentru a da un stil. Salvați următorul cod ca stil.css în directorul cart / css /.

corp culoare: # 222; font: 0.8m Arial, Helvetica, sans-serif;  h1 font: 2m normal Arial, Helvetica, sans-serif; marginea inferioară: 0,5;  #container marja: 0 auto; lățime: 80%;  table # cart colaps de frontieră: colaps; marginea inferioară: 1em; lățime: 100%;  tabelul # căruța fond: # 006b68; culoare: #fff; text-aliniere: stânga; spațiu alb: acum;  tabelul # cartul, tabelul # cart td padding: 5px 10px;  tabelă # cart. nume_fișier lățime: 100%;  table # cart. intrare cantitativă text-align: center;  tabelul # cart tr td background: #fff;  tabelul # cart tr.odd td background: #eee;  .center text-aliniere: centru;

Produsul final

Ați terminat! Ei bine, ați terminat cu acest tutorial. Există încă unele coduri care trebuie făcute pentru a se adapta la cerințele site-ului dvs..

Pasii urmatori

Așa cum am mai spus de mai multe ori, mai sunt încă unele părți cheie ale căruciorului pe care tocmai l-am creat și care lipsesc. Aceste părți depind de cerințele site-ului dvs. De exemplu: cele mai multe site-uri de cumpărături online vor avea o bază de date care să stocheze toate informațiile despre produs, dar structura acestei baze de date variază foarte mult. Metodele din clasa Shopping_Cart care preia numele de produse, prețurile și alte informații vor avea nevoie de codul bazei de date.

Un alt lucru important de adăugat este validarea intrărilor. Deoarece o mare parte din date sunt transmise prin GET, nu ar fi greu pentru cineva să înceapă să introducă coduri de comandă aleatoare și cantități non-numerice. Aceste două lucruri trebuie validate cu siguranță înainte de a adăuga un element la coș.

Cod