ㄚ銘老師的部落格

　　php

　　define("INCLUDE_CHECK",1);

　　require "connect.php";

　　{

　　header("Location : ".$_SERVER["HTTP_REFERER"]);

　　exit;

　　}

　　>

　　php

　　$cnt = array();

　　$products = array();

　　foreach($_POST as $key=>$value)

　　{

　　$key=(int)str_replace("_cnt","",$key);

　　$products[]=$key; // 將產品的ID編號放到數組products中去

　　$cnt[$key]=$value;

　　$result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,",").")"); // selecting all the products with the IN() function

　　{

　　echo "There was an error with your order!";

　　}

　　else

　　{

　　echo "You ordered:";

　　while($row=mysql_fetch_assoc($result))

　　{

　　echo "".$cnt[$row["id"]]." x ".$row["name"]."";

　　//計算總價格

　　$total+=$cnt[$row["id"]]*$row["price"];

　　}

　　echo "Total: $".$total."";

　　}

　　script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">script>

　　script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js">script>

　　script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js">script>

　　var purchased=new Array(); //該數組包含了用戶購買的商品

　　var totalprice=0; //商品總價

　　$(document).ready(function()...{

　　$(".product").simpletip(...{ //使用simpletip控件

　　offset:[40,0],

　　",

　　onShow: function()...{

　　var param = this.getParent().find("img").attr("src");

　　// 修復IE6的問題

　　...{

　　param = this.getParent().find("img").attr("style").match(/src=\"([^\"]+)\"/);

　　param = param[1];

　　}

　　// 通過ajax方式加載tips.php文件

　　this.load("ajax/tips.php",...{img:param});

　　}

　　});

　　$(".product img").draggable(...{ // 允許所有商品圖片能拖拽

　　containment: "document",

　　opacity: 0.6,

　　revert: "invalid",

　　helper: "clone",

　　zIndex: 100

　　});

　　$("div.content.drop-here").droppable(...{ // 當商品被拖拉到購物車區域時觸發

　　drop:

　　function(e, ui)

　　...{

　　var param = $(ui.draggable).attr("src");

　　// 修復IE 6下的問題

　　...{

　　param = $(ui.draggable).attr("style").match(/src=\"([^\"]+)\"/);

　　param = param[1];

　　}

　　addlist(param); //調用addlist方法

　　}

　　});

　　});

　　接下來看addlist方法的編寫，其中都提供了詳細的註釋：

　　function addlist(param)

　　...{

　　$.ajax(...{ // ajax方法調用 addtocart.php

　　type: "POST",

　　url: "ajax/addtocart.php",

　　data: "img="+encodeURIComponent(param), // the product image as a parameter

　　dataType: "json", // JSON形式調用

　　//在調用前，顯示加載的小圖標

　　beforeSend: function(x)...{$("#ajax-loader").css("visibility","visible");},

　　//調用成功時的回調方法

　　success: function(msg)...{

　　//調用成功後，隱藏等待加載的小圖標

　　$("#ajax-loader").css("visibility","hidden"); // hiding the loading gif animation

　　//如果有出錯

　　...{

　　return false; }

　　else

　　...{

　　var check=false;

　　var cnt = false;

　　//檢查某個商品是否已經在購物車中存在了

　　for(var i=0; ipurchased.length;i++)

　　...{

　　check=true;

　　cnt=purchased[i].cnt;

　　break;

　　}

　　}

　　$("#item-list").append(msg.txt);

　　...{

　　purchased.push(...{id:msg.id,cnt:1,price:msg.price});

　　}

　　else // 如果購物車中已經有該商品，則數量增加

　　...{

　　// 這裏設置每樣商品只能買3件，當然大家可以修改

　　//增加購物車中顯示的數量

　　purchased[i].cnt++;

　　//設置數量下拉框中的數量

　　$("#"+msg.id+"_cnt").val(purchased[i].cnt);

　　}

　　totalprice+=msg.price; // 重新計算總價格

　　update_total(); // 修改總價格

　　}

　　$(".tooltip").hide(); // 隱藏商品的介紹

　　}

　　});

　　}

　　//幫助工具類，找出當前產品在purchased數組中的位置

　　function findpos(id)

　　...{

　　for(var i=0; ipurchased.length;i++)

　　...{

　　return i;

　　}

　　return false;

　　}

　　//將商品從購物車中移除

　　function remove(id)

　　...{

　　//找出其在數組中的位置

　　var i=findpos(id);

　　totalprice-=purchased[i].price*purchased[i].cnt; //更新總價格

　　purchased[i].cnt = 0; // reset the counter設置purchased數組中，該商品的數量為0

　　$("#table_"+id).remove(); //在購物車列表中刪除該項目

　　update_total();

　　}

　　//當用戶點每個商品的下拉框，改變數量時觸發該方法

　　function change(id)

　　...{

　　var i=findpos(id);

　　//更新總價格

　　totalprice+=(parseInt($("#"+id+"_cnt").val())-purchased[i].cnt)*purchased[i].price;

　　purchased[i].cnt=parseInt($("#"+id+"_cnt").val());

　　update_total();

　　}

　　//計算當前購物車中的貨品總價格

　　function update_total()

　　...{

　　...{

　　//如果買了商品，顯示總價格標簽文本

　　$("#total").html("total: $"+totalprice); $("a.button").css("display","block");

　　}

　　else // 如果沒購買商品，不顯示總價格標簽文本

　　...{

　　$("#total").html("");

　　$("a.button").hide();

　　}