Un carrello della spesa in PHP

Siti dinamici con PHP
Impara a creare siti dinamici professionali con PHP

Scritto da Luca Ruggiero nella sezione Php

Il carrello della spesa è un importante elemento dei sistemi di e-commerce che permette, come al supermercato, di aggiungere ed eliminare prodotti dal proprio carrello (appunto), nella quantità e nelle caratteristiche desiderate.

Quando parliamo di carrello della spesa (chiamato anche e-cart) parliamo dunque di un elemento del commercio elettronico, ma non del motore principale che è rappresentato invece dalla gestione dei prodotti per categoria con relativo costo, caratteristiche (come la taglia nel caso di abbigliamento), scorte di magazzino e così via, ma anche di gestione degli utenti, raccolta degli ordini e così via.

L'e-cart, dunque, non è sinonimo di e-commerce, ma aiuta quei sistemi di vendita online di prodotti con determinate caratteristica. Praticamente, qualsiasi tipo di prodotto.

In questo articolo non esamineremo il commercio elettronico ma nella sua interezza (non basterebbe un libro per sviscerare tutte le funzionalità e le peculiari caratteristiche a seconda dei casi), ma capiremo come realizzare un carrello della spesa in PHP dotato delle seguenti funzionalità:

  • consente di aggiungere un prodotto al carrello nella quantità desiderata;
  • se presente, consente di aggiungere la caratteristica del prodotto;
  • se un prodotto è già presente (a prescindere dalle caratteristiche specificate) lo sovrascrive nella quantità;
  • se un prodotto è già presente, con determinate caratteristiche, consente di aggiungere lo stesso prodotto con altre caratteristiche.
  • consente di eliminare un prodotto dal carrello.

Un o screenshot chiarirà le idee:


Quando non sono stati aggiunti prodotti, invece, verrà mostrato a video un messaggio che indica che il carrello è vuoto:


Usiamo due funzioni Javascript per aggiungere (o modificare) ed eliminare i prodotti dal carrello, o meglio, per controllare che i campi del form siano stati valorizzati; quindi invieremo ad uno script PHP i dati da processare.

Il nostro esempio si baserà su quattro file:

  1. prodotti.php - E' la pagina di interfaccia che elenca i prodotti, consente di aggiungerli al carrello e mostra i prodotti che intendiamo acquistare, nelle quantità e con le caratteristiche specificate.
  2. carrello.php - Contiene le funzioni che consentono di aggiungere, modificare ed eliminare prodotti dal carrello, nonchè una funzione utile a verificare l'esistenza di un determinato prodotto (ed eventuali caratteristiche) in memoria.
  3. carrello.css - Offre un minimo di stile all'interfaccia.
  4. carrello.js - Verifica la corretta compilazione dei campi richiesti per l'aggiunta dei prodotti al carrello.

Per il mantenimento dei prodotti nel carrello utilizzeremo le sessioni, per cui al cambio di pagina i prodotti aggiunti al carrello non andranno persi.

Iniziamo dall'interfaccia, rappresentata dal file prodotti.php, di cui segue il codice:

<?PHP
    session_start();
    include("carrello.php");
    $carrello = $_GET["carrello"];
    $id = $_GET["id"];
    $quanti = $_GET["quanti"];
    $taglia = $_GET["taglia"];
    if ($carrello != "")
    {
        switch ($carrello)
        {
            case "aggiungi" :
                if (esiste($id, $taglia))
                {
                    modifica($id, $quanti, $taglia);
                }
                else
                {
                    aggiungi($id, $quanti, $taglia);
                }
            break;
            case "elimina" :
                elimina($id, $taglia);
                if (count($_SESSION["carrello"]) == 0) unset($_SESSION["carrello"]);
            break;
        }
        header("location: prodotti.php");
    }
    $prodotto[0] = "T-Shirt";
    $prodotto[1] = "Bermuda";
    $prodotto[2] = "Cappellino";
?>
<!DOCTYPE html>
<html lang="it">
    <head>
        <title>Un carrello della spesa in PHP</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"/>
        <link rel="stylesheet" type="text/css" href="carrello.css"/>
        <script type="text/javascript" src="carrello.js"></script>
    </head>
<body>

<h1>Un carrello della spesa in PHP</h1>

<form name="carrello">
<p><b><?PHP echo $prodotto[0];?></b></p>
<div>
    <input type="text" name="quanti_1" size="10" autocomplete="off" value="1"/>
    <select name="taglia_1">
        <option value="-">Seleziona la taglia</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
    </select>
    <input type="button" class="submit" value="Aggiungi al carrello" onclick="Aggiungi(1, document.carrello.taglia_1.options[document.carrello.taglia_1.selectedIndex].value)"/>
</div>
<p><b><?PHP echo $prodotto[1];?></b></p>
<div>
    <input type="text" name="quanti_2" size="10" autocomplete="off" value="1"/>
    <select name="taglia_2">
        <option value="-">Seleziona la taglia</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
    </select>
    <input type="button" class="submit" value="Aggiungi al carrello" onclick="Aggiungi(2, document.carrello.taglia_2.options[document.carrello.taglia_2.selectedIndex].value)"/>
</div>
<p><b><?PHP echo $prodotto[2];?></b></p>
<div>
    <input type="text" name="quanti_3" size="10" autocomplete="off" value="1"/>
    <input type="button" class="submit" value="Aggiungi al carrello" onclick="Aggiungi(3, '')"/>
</div>
</form>

<?PHP
    if ($_SESSION["carrello"] == "")
    {
?>
<p>Il tuo carrello è vuoto...</p>
<?PHP
    }
    else
    {
?>
<h2>Il tuo carrello</h2>
<?PHP
        for($x=0; $x<count($_SESSION["carrello"]); $x++)
        {
?>
<div>
<a href="javascript:Elimina(<?PHP echo $_SESSION["carrello"][$x]["prodotto"];?>, '<?PHP echo $_SESSION["carrello"][$x]["caratteristica"];?>')">X</a> -
<?PHP
            echo $prodotto[$_SESSION["carrello"][$x]["prodotto"] - 1] . " | ";
            echo $_SESSION["carrello"][$x]["quantita"];
            if ($_SESSION["carrello"][$x]["caratteristica"] != "") echo " | " . $_SESSION["carrello"][$x]["caratteristica"];
?>
</div>
<?PHP
        }
    }
?>

</body>
</html>

Nell'header HTML della pagina richiamiamo i file esterni Javascript e CSS. Nel corpo, invece, creiamo un form che conterrà l'elenco dei nostri prodotti. Possiamo notare che il prodotto 1 ed il prodotto 2 hanno una caratteristiche che indichiamo come taglia, facendo dunque l'ipotesi che il negozio in questione sia di abbigliamento. Il terzo prodotto, invece, per sua natura (evidentemente) non ha una taglia ne' altre caratteristiche.

Al click sul bottone scateniamo la funzione Javascript Aggiungi() che accetta due parametri:

  1. ID - Ci consente di individuare l'ID (appunto) del prodotto che ci interessa, ma anche - com meglio vedremo in seguito - la quantità.
  2. Taglia - Se presente, come nei primi due casi, cattura il valore della selectbox associata, altrimenti (se non ci sono caratteristiche), lasciamo il valore "vuoto" con due singoli apici.

Restiamo su questo file e guardiamo il codice PHP presente prima dell'inizio del codice HTML. Come prima cosa utilizziamo session_start() per consentire alle nostre pagine PHP di gestire le sessioni, poi includiamo il file con le funzioni per la gestione del carrello, quindi recuperiamo i valori dei campi ossia ID, quantità, taglia, nonchè una variabile "carrello" che valorizzeremo come "aggiungi" o come "elimina" nel caso in cui intendiamo (appunto) aggiungere o eliminare un prodotto dal carrello.

Nel caso di aggiunta di un prodotto utilizziamo la funzione esiste() per verificare se quel prodotto è già presente, quindi per aggiungere un prodotto o per modificarne le quantità e le caratteristiche. Nel caso di cancellazione, semplicemente lanceremo la funzione elimina().

In ultimo, creiamo un array per assegnare un nome ai tre prodotti di esempio. Naturalmente, nel caso di un e-commerce reale, estrarremo i nomi e tutte le altre caratteristiche dal database.

Concludiamo con il codice PHP che vediamo dopo la chiusura del form, ovvero per mostrare a video i prodotti aggiunti al carrello. Per prima cosa verifichiamo se ce ne sono e, in caso positivo, mostriamo il nome, la quantità e la caratteristica che abbiamo scelto, inserendo riga per riga anche una X che ci consente di eliminare il prodotto con riferimento alla funzione Javascript Elimina() che affronteremo a breve.

Chiusa la spiegazione del file di interfaccia, passiamo alla sua stilizzazione:

html, body, h1, h2, p, div, form, input, select { padding: 0; margin: 0; border: 0; }
body { background: #FFF; margin: 10px; }
h1, h2 { font: bold 20px georgia; }
p, div, input, select { font: normal 13px verdana; }
h1, h2, p, div, form { margin-bottom: 10px; }
a { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; }
form { border-bottom: solid 1px #000; }
input, select { text-align: center; padding: 5px; border: solid 1px #000; }
input:focus, select.focus { outline: 0; }
.submit { background: #111; color: #FFF; cursor: pointer; }

Evitiamo commenti superflui sul codice CSS, contenuto nel file carrello.css, e passiamo immediatamente oltre, ossia alle funzioni Javascript, contenute nel file carrello.js, di cui segue il codice:

function Aggiungi(ID, Taglia)
{
    eval("var quanti_" + ID + " = document.carrello.quanti_"  + ID + ".value;");
    if (isNaN(eval("quanti_" + ID)) || eval("quanti_" + ID) < 1)
    {
        alert("Specifica un valore numerico per la quantità");
        eval("document.carrello.quanti_"  + ID + ".value = 1;");
    }
    else
    {
        if (Taglia != "")
        {
            eval("var taglia_" + ID + " = document.carrello.taglia_"  + ID + ".options[document.carrello.taglia_"  + ID + ".selectedIndex].value;");
            if (eval("document.carrello.taglia_"  + ID + ".value") == "-")
            {
                alert("Seleziona la taglia");
            }
            else
            {
                document.location.href = "prodotti.php?carrello=aggiungi&id=" + ID + "&quanti=" + eval("quanti_" + ID) + "&taglia=" + Taglia;
            }
        }
        else
        {
            document.location.href = "prodotti.php?carrello=aggiungi&id=" + ID + "&quanti=" + eval("quanti_" + ID);
        }
    }
}
function Elimina(ID, Taglia)
{
    eval("var quanti_" + ID + " = document.carrello.quanti_"  + ID + ".value;");
    if (window.confirm("Vuoi eliminare questo prodotto dal carrello?"))
    {
        if (Taglia == "")
        {
            document.location.href = "prodotti.php?carrello=elimina&id=" + ID + "&quanti=" + eval("quanti_" + ID);
        }
        else
        {
            eval("var taglia_" + ID + " = document.carrello.taglia_"  + ID + ".options[document.carrello.taglia_"  + ID + ".selectedIndex].value;");
            document.location.href = "prodotti.php?carrello=elimina&id=" + ID + "&quanti=" + eval("quanti_" + ID) + "&taglia=" + Taglia;
        }
    }
}

Le due funzioni recuperano il valore ID e, dinamicamente, costruiscono il valore relativo alla quantità. Se specificata, in un caso e nell'altro, gestiremo la taglia. Costruiamo quindi la URL parametrizzata a cui inviare i dati che saranno processati, ovvero al file di interfaccia che li gestisce nella porzione di codice precedente all'inizio dell'HTML.

Concludiamo col motore del nostro carrello elettronico, il cui codice è contenuto nel file carrello.php:

<?PHP
    function esiste($id, $car)
    {
        $id = intval($id);
        $conta = count($_SESSION["carrello"]);
        $controllo = 0;
        for($x=0; $x<$conta; $x++)
        {
            if (isset($car))
            {
                if ($id == $_SESSION["carrello"][$x]["prodotto"] && $car == $_SESSION["carrello"][$x]["caratteristica"])
                {
                    $controllo = 1;
                    break;
                }
            }
            else
            {
                if ($id == $_SESSION["carrello"][$x]["prodotto"])
                {
                    $controllo = 1;
                    break;
                }
            }
        }
        return $controllo;
    }
    function elimina($id, $car)
    {
        $id = intval($id);
        $conta = count($_SESSION["carrello"]);
        for($x=0; $x<$conta; $x++)
        {
            if (isset($car))
            {
                if ($id == $_SESSION["carrello"][$x]["prodotto"] && $car == $_SESSION["carrello"][$x]["caratteristica"])
                {
                    unset($_SESSION["carrello"][$x]);
                    break;
                }
            }
            else
            {
                if ($id == $_SESSION["carrello"][$x]["prodotto"])
                {
                    unset($_SESSION["carrello"][$x]);
                    break;
                }
            }
        }
        $_SESSION["carrello"] = array_values($_SESSION["carrello"]);
    }
    function aggiungi($id, $qta, $car)
    {
        $id = intval($id);
        if ($id < 1 || $qta < 1) return;
        if (esiste($id, $car)) return;
        $conta = count($_SESSION["carrello"]);
        $_SESSION["carrello"][$conta]["prodotto"] = $id;
        $_SESSION["carrello"][$conta]["caratteristica"] = $car;
        $_SESSION["carrello"][$conta]["quantita"] = $qta;
    }
    function modifica($id, $qta, $car)
    {
        if (isset($car))
        {
            elimina($id, $car);
            aggiungi($id, $qta, $car);
        }
        else
        {
            elimina($id);
            aggiungi($id, $qta);
        }
    }
?>

Troviamo le seguenti funzioni che vengono gestite come un array di sessione:

  • esiste() - verifica l'esistenza di un prodotto (ed eventuale caratteristica) nel carrello;
  • elimina() - elimina un prodotto (con una determinata caratteristica associata) dal carrello;
  • aggiungi() - aggiunge un prodotto (ed eventuale caratteristica) al carrello;
  • modifica() - modifica la quantità di un prodotto (ed eventuale caratteristica associata) già presente nel carrello.

Tutte le funzioni si preoccupano di verificare se per un prodotto esiste o meno una determinata caratteristica.

In conclusione possiamo affermare che in questo articolo è sostanzialmente presente un esempio di interfaccia e di stampa a video dei valori, ma possiamo considerare il codice del file carrello.php pronto all'utilizzo in produzione per un sistema di commercio elettronico professionale.

I più cliccati della sezione Php

:: Redirect in Php (102.116)

:: Upload di file in Php (32.893)

:: Refresh temporizzato in PHP (26.964)

:: Scrivere il codice di sicurezza CAPTCHA in Php (25.868)

:: Creare un menu dinamico in Php (20.590)

:: Pagamenti online con PayPal e PHP (17.198)

:: Convertire una stringa in maiuscolo e in minuscolo in Php (15.653)

:: Inviare email in formato Html con Php (15.540)

:: Ottenere le dimensioni di un'immagine con PHP (14.746)

:: Indicare il percorso della pagina corrente in Php (14.416)

IN EVIDENZA
DOWNLOAD