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
http://paolobindi.bimodesign.com/download/carrello_spesa.zip
dove e' possibile scaricare i miei codici illustrati nell'esempio.
Linkedin
Flickr
Anobii
Youtube
Lastfm
