本文章來給大家推薦一個不錯的購物車效果,這裡主要求包括了幾個東西,一個是購物車類用php寫的, 還有一個Ajax操作用到了jquery,還有一個jquery插件thickbox了,下面我們來看看。
購物車類:shop_cart.php
購物車的操作:cart_action.php
首頁:index.html
Ajax操作用到了jquery,還有一個jquery插件thickbox
不多說了你可以先看看效果示例
shop_cart.php當然是購物車的核心,但是這個類很簡單,因為他又引進了cart_action.php用於對外操作。所以這個類顯得相當精簡。
購物車類shop_cart.php
cart_name = $name;
$this->items = $_SESSION[$this->cart_name];
}
/**
* setItemQuantity() - Set the quantity of an item.
*
* @param string $order_code The order code of the item.
* @param int $quantity The quantity.
*/
function setItemQuantity($order_code, $quantity) {
$this->items[$order_code] = $quantity;
}
/**
* getItemPrice() - Get the price of an item.
*
* @param string $order_code The order code of the item.
* @return int The price.
*/
function getItemPrice($order_code) {
// This is where the code taht retrieves prices
// goes. We'll just say everything costs $9.99 for this tutorial.
return 9.99;
}
/**
* getItemName() - Get the name of an item.
*
* @param string $order_code The order code of the item.
*/
function getItemName($order_code) {
// This is where the code that retrieves product names
// goes. We'll just return something generic for this tutorial.
return 'My Product (' . $order_code . ')';
}
/**
* getItems() - Get all items.
*
* @return array The items.
*/
function getItems() {
return $this->items;
}
/**
* hasItems() - Checks to see if there are items in the cart.
*
* @return bool True if there are items.
*/
function hasItems() {
return (bool) $this->items;
}
/**
* getItemQuantity() - Get the quantity of an item in the cart.
*
* @param string $order_code The order code.
* @return int The quantity.
*/
function getItemQuantity($order_code) {
return (int) $this->items[$order_code];
}
/**
* clean() - Cleanup the cart contents. If any items have a
* quantity less than one, remove them.
*/
function clean() {
foreach ( $this->items as $order_code=>$quantity ) {
if ( $quantity < 1 ) unset($this->items[$order_code]);
}
}
/**
* save() - Saves the cart to a session variable.
*/
function save() {
$this->clean();
$_SESSION[$this->cart_name] = $this->items;
}
}
?>
對於cart_action,他實現了shop_cart類與index的中間作用,用於更新,刪除,增加商品的操作。
cart_action.php
getItemQuantity($_GET['order_code'])+$_GET['quantity'];
$Cart->setItemQuantity($_GET['order_code'], $quantity);
}else{
if ( !empty($_GET['quantity']) ) {
foreach ( $_GET['quantity'] as $order_code=>$quantity){
$Cart->setItemQuantity($order_code, $quantity);
}
}
if ( !empty($_GET['remove']) ) {
foreach ( $_GET['remove'] as $order_code ) {
$Cart->setItemQuantity($order_code, 0);
}
}
}
$Cart->save();
header('Location: cart.php');
?>
還有就是index.html實現對外的操作,也就是添加操作
代碼如下 復制代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<title>Shopping Cart</title>
<script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<script src="js/thickbox.js" type="text/javascript"></script>
<script src="js/cart.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/thickbox.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript">
$(function() {
$("form.cart_form").submit(function() {
var title = "Your Shopping Cart";
var orderCode = $("input[name=order_code]", this).val();
var quantity = $("input[name=quantity]", this).val();
var url = "cart_action.php?order_code=" + orderCode + "&amp;amp;amp;amp;amp;amp;quantity=" + quantity + "&amp;amp;amp;amp;amp;amp;TB_iframe=true&amp;amp;amp;amp;amp;amp;height=400&amp;amp;amp;amp;amp;amp;width=780";
tb_show(title, url, false);
return false;
});
});
</script>
</head>
<body>
<div id="container">
<h1>購物車</h1>
<a href="cart.php?KeepThis=true&amp;amp;amp;amp;amp;amp;TB_iframe=true&amp;amp;amp;amp;amp;amp;height=400&amp;amp;amp;amp;amp;amp;width=780" title="Your Shopping Cart" class="thickbox">打開購物車</a>
<hr />
<a href="cart_action.php?order_code=KWL-JFE&amp;amp;amp;amp;amp;amp;quantity=3&amp;amp;amp;amp;amp;amp;TB_iframe=true&amp;amp;amp;amp;amp;amp;height=400&amp;amp;amp;amp;amp;amp;width=780" title="Your Shopping Cart" class="thickbox">添加三個 KWL-JFE 到購物車</a>
<hr />
<form class="cart_form" action="cart_action.php" method="get">
<input type="hidden" name="order_code" value="KWL-JFE" />
<label>KWL-JFE: <input class="center" type="text" name="quantity" value="1" size="3" ?></label>
<input type="submit" name="submit" value="添加到購物車" />
</form>
</div>
</body>
</html>
還有就是cart.php這是我們的購物車
代碼如下 復制代碼 <?php1 2