hi all,
i have designed one shoppimg cart with 4 items.but it is unable to take the items i have selected i.e., not displaying the selected items.
kindly tell me what went wrong......
below is my code for index.html
Code:
<!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>
<title> JavaScript jQuery</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// call the cart function
$("#sc_cart").smartCart();
});
</script>
<link rel="stylesheet" type="text/css" href="css/cart.css" />
</head>
<body>
<center><h2>Select Your products</h2></center>
<form method="post" action="results.php">
<div id="smartcart" class="Container">
<div id="sc_productlist" class="scProductList">
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="images/product0.jpg" /></td>
<td><strong><span id="prod_name100">Apple IPhone 3G</span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price100">1450.75</span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="Text" id="prod_qty100" value="1" size="3" type="text">
<input type="button" rel="100" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
<hr/>
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="images/product1.jpg" /></td>
<td><strong><span id="prod_name101">Ice Pot</span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price101">10.25</span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="Text" id="prod_qty101" value="1" size="3" type="text">
<input type="button" rel="101" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
<hr/>
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="images/product2.jpg" /></td>
<td><strong><span id="prod_name102">Style Stand</span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price102">6.15</span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="Text" id="prod_qty102" value="1" size="3" type="text">
<input type="button" rel="102" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
<hr/>
<div class="ProductListItem">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td rowspan="3"><img width="100px" src="images/product3.jpg" /></td>
<td><strong><span id="prod_name103">Coffe Maker</span></strong></td>
</tr>
<tr>
<td><label>Price:</label> $<span id="prod_price103">120.35</span></td>
</tr>
<tr>
<td><label>Quantity:</label>
<input name="prod_qty" class="Text" id="prod_qty103" value="1" size="3" type="text">
<input type="button" rel="103" class="ItemButton Btn" value="Add Product"></td>
</tr>
</table>
</div>
</div>
</div>
<div id="sc_cart" class="scCart">
<select id="product_list" name="product_list[]" style="display:none;" multiple="multiple">
</select>
<div class="CartListHead">
<table width='50%'>
<tr>
<td width='100px'>Product</td>
<td width='100px'>Quantity</td>
<td width='150px'>Amount($)</td>
</tr>
</table>
</div>
<div id="sc_cartlist" class="scCartList">
</div>
<div class="CartListHead">
<table width='100%'>
<tr>
<td>
<span id="message"></span>
</td>
<td width='100px'>Subtotal ($):</td>
<td width='120px'><span id="subtotal"></span></td>
</tr>
</table>
</div>
<br>
<input style="width:200px;height:35px;float:right;" type="submit" class="Btn" value="Checkout">
</div>
</form>
</body>
</html>
below is my cart.css.....
Code:
body {
font : normal 12px Verdana, Helvetica, sans-serif;
color:#0464BB;
margin:0;
padding:0;
}
.Container {
padding: 5px;
border: 1px solid #E0E0E0;
width: auto;
height:auto;
margin: 5px;
float:left;
font-family : Verdana, Helvetica, sans-serif;
font-size: 12px;
position:relative;
left:5%;
right:5%;
}
/*.scTitle {
padding: 2px;
float:left;
font-weight: bold;
margin-bottom: 3px;
float:left;
} */
.Btn {
background : #5A5655;
color : #FFFFFF;
margin : 0;
padding : 1px 5px 1px 5px;
text-align : center;
border : 1px solid #5A5655;
text-decoration : none;
}
.Btn:hover{
background : orange;
color : #FFFFFF;
border : 1px solid orange;
text-decoration : none;
}
.Text{
border: 1px solid #E0E0E0;
width:25px;
padding : 1px 5px 1px 5px;
}
.Text:focus{
border: 1px solid orange;
}
.scCart {
padding: 10px 5px 5px 5px;
border: 1px solid #E0E0E0;
width: 450px;
margin: 5px;
float:left;
}
.scProductList {
padding: 10px 5px 5px 5px;
border: 1px solid #E0E0E0;
width: 400px;
height:360px;
overflow:auto;
margin: 5px;
float:left;
}
.scCartList {
position: relative;
margin: 0;
padding: 1px;
background: #F8F8F8;
border: 1px solid #E0E0E0;
height: 250px;
overflow:auto;
}
.CartListHead {
padding: 0;
background: #F8F8F8;
border: 1px solid #E0E0E0;
margin: 1px 0 1px 0;
height: 25px;
font-weight: bold;
}
.scCartListItem {
position: relative;
margin-left: 0;
padding-left: 0;
list-style: none;
background: #F8F8F8;
border: 1px solid #E0E0E0;
margin: 1px 0 0 0;
line-height: 1em;
}
.scCartListItem:hover {
background-color: #e5e5e5;
}
.scProductListItem {
width:auto;
margin:1px;
background:#F8F8F8;
overflow:show;
padding:0; /*12px 0px 2px 5px;*/
color:#0464BB;
text-align:left;
border:#E0E0E0 solid 1px;
}
.scProductSelect {
display: none;
visibility:hidden;
}
.scULList {
margin: 0.25em 0 1em 0;
position: relative;
display: block;
padding-left: 0;
list-style: none;
}
.scListItemLabel {
padding: 5px;
display: block;
}
.scListItemRemove {
position: absolute;
right: 0;
top: 6px;
background: #5A5655;
color: #FFFFFF;
margin : 0;
padding : 1px 5px 2px 5px;
text-align : center;
border: 1px solid #5A5655;
text-decoration: none;
}
.scListItemRemove:hover{
background : orange;
color : #FFFFFF;
border : 1px solid orange;
text-decoration : none;
}
below is my results.php......
Code:
<!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>
<title> JavaScript jQuery plugin</title>
<link rel="stylesheet" type="text/css" href="css/style_smartcart.css" />
</head>
<body>
<center>
<h2>Selected Products</h2>
</center>
<div id="sc_cart" style="width:950px;" class="scContainer">
<?php
// creating product array
$product_array = array("100" =>array('product_id'=>'100', 'product_name'=>'Apple IPhone 3G', 'product_price'=>'1450.75', 'product_img'=>'images/product0.jpg'),
"101" =>array('product_id'=>'101', 'product_name'=>'Ice Pot', 'product_price'=>'10.25', 'product_img'=>'images/product1.jpg'),
"102" =>array('product_id'=>'102', 'product_name'=>'Style Stand', 'product_price'=>'6.15', 'product_img'=>'images/product2.jpg'),
"103" =>array('product_id'=>'103', 'product_name'=>'Coffee Maker', 'product_price'=>'120.35', 'product_img'=>'images/product3.jpg'));
// get the selected product array
// here we get the selected product_id/quantity combination asa an array
$product_list = $_REQUEST['product_list'];
if(!empty($product_list))
{
?>
<div class="scCartListHead">
<table width='100%'><tr>
<td> Product</td>
<td width='80px'>Quantity</td>
<td width='130px'>Amount($)</td>
</tr></table>
</div>
<?php
$sub_total = 0;
foreach($product_list as $product){
$chunks = explode('|',$product);
$product_id = $chunks[0];
$product_qty = $chunks[1];
$product_name = $product_array[$product_id]['product_name'];
$product_amount = $product_array[$product_id]['product_price']*$product_qty;
// calculate the subtotal
$sub_total = $sub_total + $product_amount;
// echo "Product Id: ".$product_id." Quantity: ".$product_qty."<br>";
?>
<div class="scCartListHead">
<table width='100%'><tr>
<td> <?php echo $product_name; ?></td>
<td width='80px'><?php echo $product_qty; ?></td>
<td width='130px'><?php echo $product_amount; ?></td>
</tr></table>
</div>
<?php
}
?>
<div class="scCartListHead">
<table width='100%'><tr>
<td>
<!-- Message Label -->
<span id="sc_message"></span></td>
<td width='100px'>Subtotal ($):</td>
<td width='120px'>
<!-- Sub Total Label -->
<span id="sc_subtotal"><?php echo $sub_total; ?></span>
</td>
</tr></table>
</div>
<br>
<form action="index.php" method="post">
<?php
// set the request for continue shopping
if(isset($product_list)){
foreach($product_list as $p_list){
$prod_options .='<input type="hidden" name="product_list[]" value="'.$p_list.'">';
}
echo $prod_options;
}
?>
<input style="width:200px;height:35px;float:left;" type="submit" class="scBtn" value="Continue Shopping">
</form>
<?php
}
else
{
echo "<strong>Your Cart is Empty</strong>";
}
?>
</div>
</body>
</html>
tell me what went worng......
not displaying items which selected
