paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Ajax / Php: carrello della spesa

Per ragioni di riservatezza dei dati, in questo tutorial riporto solo uno schema del codice e della base dati e non la soluzione completa adottata nella demo per un cliente spagnolo, che potete visualizzare qui

http://testdlzs.comevien.com/indexhome.php?link=productos

Questi i file inclusi nel pacchetto

  • productos.php: file principale
  • js/fly-to-basket.js: il codice javascript
  • js/ajax.js: Libreria ajax dal sito http://twilightuniverse.com/projects/sack
  • addProduct.php: Server side file which retreves productId from the script and adds it to the basket
  • css/carrello.css: esempio del foglio di stile utilizzato
  • images/*: alcune immagini utilizzate nella demo.

productos.php Per una piu' facile lettura, inserisco i commenti direttamente nel codice.

<?php
$anagprodgene = $mysql->query("SELECT PER L'ESTRAZIONE DEL
                                CodiceProdotto
                                Titolo-DescrizioneProdotto
                                PrezzoProdotto
                                CodiceProdotto (necessario per la rimozione dal carrello
                            ");
if ($anagprodgene <> ''){
while($var_anagprodgene = $anagprodgene->fetch_assoc())    {
    // Qui va inserito l'ouput dei vari elementi del carrello, presenti nella base dati
    // Una riga per ogni elemento.

    // il nome del div deve essere slidingProduct<product ID> dove ID e' l'id
    // del codice prodotto presente nel db

    // This is the div that will "fly" to the basket.
    // addToBasket, e' la chiamata alla funzione addToBasket(<product ID>) per aggiungere
    // i prodotti al carrello

    printf('<div id="slidingProduct%s" class="sliding_product">
            <div class="prodotti_dx_info_code">
                <font class="infoprodu">%s</font>
            </div>
            <div class="prodotti_dx_info_prezzo">
                <font class="infoprodubold">%s</font>
            </div>
            <div class="prodotti_dx_info_carro">
            <a href="#" onclick="addToBasket(%s);return false;">
                <img style="width:24px; height:24px; border:0px;" src="images/ico_carro.png">
            </a>
            </div>
        </div>', $var_anagprodgene['CodiceProdotto'],
                $var_anagprodgene['Titolo-DescrizioneProdotto'],
                $var_anagprodgene['PrezzoProdotto'],
                $var_anagprodgene['CodiceProdotto']);
    }
}
?>

<div id="rightColumn">
<div id="shopping_cart">
    <p>Carrello della Spesa</p>
    <table id="shopping_cart_items">
        <tr>
            <th>Cantidad</th>
            <th>Descripcion</th>
            <th>Precio</th>
            <th></th>
        </tr>
        <?
            $anagprodcodi = $mysql->query("SELECT PER L'ESTRAZIONE DEL
                                                  CodiceProdotto,
                                                  Titolo-DescrizioneProdotto,
                                                  PrezzoProdotto
                                             FROM anagprod
                                            WHERE CodiceProdotto='".$_POST['productId']."'");

            if ($anagprodcodi <> '') {
                while($var_anagprodcodi = $anagprodcodi->fetch_assoc())    {

                    printf('<tr id="shopping_cart_items_product%s">
                                <td>1</td>
                                <td>%s</td>
                                <td style="text-align:right">%s</td>
                                <td><a href="#" onclick="removeProductFromBasket(%s);return false">
                                <img src="images/remove.png"></a></td></tr>',
                                $var_anagprodcodi['CodiceProdotto'],
                                $var_anagprodcodi['Titolo-DescrizioneProdotto'],
                                $var_anagprodcodi['PrezzoProdotto'],
                                $var_anagprodcodi['CodiceProdotto']);
                }
            }
        ?>
        </table>
    <div id="shopping_cart_totalprice">
    </div>
</div>
<div id="inputbuy">
    <center>
    <a href="indexhome.php?link=envio"><img src="images/button_comprar.png" border="0"></a>
    </center>
</div>
</div>
<div class="clear">
</div>


addProduct.php

Questo e' il file PHP che viene chiamato da Ajax, quando un prodotto viene aggiunto al carrello.

Questo file riceve una variabile "productId" e mostra a video l'aggiornamento del contenuto del carrello della spesa nel seguent formato product ID|||Product description|||product price

E' in questo punto che, se preferite, potete eseguire anche l'update in tabella, utilizzando il Session_Id come identificativo univoco del cliente. Come gia' descritto in precedenza, io ho evitato questa soluzione, utilizzando esclusivamente il salvataggio in Session dei dati.

<?
session_start();

...connessione al db...

// Verifica esistenza della variabile

if(!isset($_POST['productId']))exit;

    $anagprodaddd = $mysql->query("SELECT CodiceProdotto,
                                  Titolo-DescrizioneProdotto,
                                  PrezzoProdotto
                             FROM TABELLA_PRODOTTI");
    if ($anagprodaddd <> ''){
        while($var_anagprodaddd = $anagprodaddd->fetch_assoc()) {
            $var_codiprod=$var_anagprodaddd['CodiceProdotto'];
            $var_descprod=$var_anagprodaddd['Titolo-DescrizioneProdotto'];
            $var_descprez=$var_anagprodaddd['PrezzoProdotto'];

            switch($_POST['productId']) {
                case $var_anagprodaddd['codi_prod'];
                    echo "$var_codiprod|||$var_descprod|||$var_descprez";

                // Utilizzo delle SESSION per salvare i dati
                $_SESSION['cart'][$var_codiprod]['Titolo-DescrizioneProdotto'] = $var_descprod;
                $_SESSION['cart'][$var_codiprod]['PrezzoProdotto'] = $var_descprez;

            break;
        }
    }
}
?>

removeProduct.php

Questo file e' necessario per rimuovere i prodotti dal carrello della spesa.

Javascript variables

All'inzio del file fly-to-basket.js file, trovi tre 3 variabili che sono modificabili e che indicano

var flyingSpeed = 25;
var url_addProductToBasket = 'addProduct.php';
var url_removeProductFromBasket = 'removeproduct.php';
var txt_totalPrice = 'Total: ';

  • flyingSpeed per controllare la velocita' del caricamento del carrello (il fly).
  • url_addProductToBasket la url del file addProduct.php
  • url_removeProductFromBasket la url del file removeproduct.php
  • txt_totalPrice Testo per la descrizione del totale

Questo il link alla risorsa originale (in inglese) http://www.dhtmlgoodies.com/index.html?whichScript=fly-to-basket

E qui

/download/carrello_spesa.zip

dove e' possibile scaricare i miei codici illustrati nell'esempio.