how to customize ADD TO CART button in Product-list.php Page

[desmond_ckl]

I would like to customize my product-list page to display all my products in a grid with an ADD TO CART option for each product. That means i have two ADD TO CART button on the site, in productDetail.php there is a ADD TO CART button original from the tutorial, i need customize another ADD TO CART button on productList.php. Does anyone know how to accomplish this customization? . Please help because I am stuck with the coding for 3weeks  :'( :'(

Tutorial site: http://www.phpwebcommerce.com/plaincart/index.php

 

productDetail.php:

<?php
if (!defined('WEB_ROOT')) {
exit;
}

$product = getProductDetail($pdId, $catId);

// we have $pd_name, $pd_price, $pd_description, $pd_image, $cart_url
extract($product);
?> 
<table width="100%" border="0" cellspacing="0" cellpadding="10">
<tr> 
  <td align="center"><img src="<?php echo $pd_image; ?>" border="0" alt="<?php echo $pd_name; ?>" width="230" height="170"></td>
  <td valign="middle">
<strong><?php echo $pd_name; ?></strong><br>
Price : <?php echo displayAmount($pd_price); ?><br>
<?php
// if we still have this product in stock
// show the 'Add to cart' button
if ($pd_qty > 0) {
?>
<input type="button" name="btnAddToCart" value="Add To Cart >" onClick="window.location.href='<?php echo $cart_url; ?>';" class="addToCartButton">
<?php
} else {
echo 'Out Of Stock';
}
?>
  </td>
</tr>
<tr align="left"> 
  <td colspan="2"><?php echo $pd_description; ?></td>
</tr>
</table>

 

productList.php:

<?php
if (!defined('WEB_ROOT')) {
exit;
}

$productsPerRow = 2;
$productsPerPage = 8;

//$productList    = getProductList($catId);
$children = array_merge(array($catId), getChildCategories(NULL, $catId));
$children = ' (' . implode(', ', $children) . ')';

$sql = "SELECT pd_id, pd_name, pd_price, pd_thumbnail, pd_qty, c.cat_id
	FROM tbl_product pd, tbl_category c
	WHERE pd.cat_id = c.cat_id AND pd.cat_id IN $children 
	ORDER BY pd_name";
$result     = dbQuery(getPagingQuery($sql, $productsPerPage));
$pagingLink = getPagingLink($sql, $productsPerPage, "c=$catId");
$numProduct = dbNumRows($result);



// the product images are arranged in a table. to make sure
// each image gets equal space set the cell width here
$columnWidth = (int)(100 / $productsPerRow);
?>
<table width="100%" border="0" cellspacing="0" cellpadding="20">

<?php 
if ($numProduct > 0 ) {

$i = 0;
while ($row = dbFetchAssoc($result)) {

	extract($row);
	if ($pd_thumbnail) {
		$pd_thumbnail = WEB_ROOT . 'images/product/' . $pd_thumbnail;
	} else {
		$pd_thumbnail = WEB_ROOT . 'images/no-image-small.png';
	}

	if ($i % $productsPerRow == 0) {
		echo '<tr>';
	}

	// format how we display the price
	$pd_price = displayAmount($pd_price);

	echo "<td width=\"$columnWidth%\" align=\"center\"><a href=\"" . $_SERVER['PHP_SELF'] . "?c=$catId&p=$pd_id" . "\"><img src=\"$pd_thumbnail\" border=\"0\" width=\"230\" height=\"170\"><br>$pd_name</a><br>Price : $pd_price<br>";



	// format display add to cart 
		echo	"<input type=\"button\" name=\"btnAddToCart\" value=\"Add To Cart >\" onClick=\"window.location.href='<?php echo $cart_url;?>';\" >";


	// if the product is no longer in stock, tell the customer
	if ($pd_qty <= 0) {
		echo "<br>Out Of Stock";
	}

	echo "</td>\r\n";

	if ($i % $productsPerRow == $productsPerRow - 1) {
		echo '</tr>';
	}

	$i += 1;
}

if ($i % $productsPerRow > 0) {
	echo '<td colspan="' . ($productsPerRow - ($i % $productsPerRow)) . '"> </td>';
}

} else {
?>
<tr><td width="100%" align="center" valign="center">No products in this category</td></tr>
<?php	
}	
?>
</table>
<p align="center"><?php echo $pagingLink; ?></p>

 

Product-functions.php:

<?php
require_once 'config.php';

/*********************************************************
*                 PRODUCT FUNCTIONS 
**********************************************************/


/*
Get detail information of a product
*/
function getProductDetail($pdId, $catId)
{

$_SESSION['shoppingReturnUrl'] = $_SERVER['REQUEST_URI'];

// get the product information from database
$sql = "SELECT pd_name, pd_description, pd_price, pd_image, pd_qty
		FROM tbl_product
		WHERE pd_id = $pdId";

$result = dbQuery($sql);
$row    = dbFetchAssoc($result);
extract($row);

$row['pd_description'] = nl2br($row['pd_description']);

if ($row['pd_image']) {
	$row['pd_image'] = WEB_ROOT . 'images/product/' . $row['pd_image'];
} else {
	$row['pd_image'] = WEB_ROOT . 'images/no-image-large.png';
}

$row['cart_url'] = "cart.php?action=add&p=$pdId";

return $row;			
}


?>

 

any help will be greatly appreciated