Shop - View Product List

 

When you click one of the category from the left navigation the main content area will show all product contained in that category. For example if you click on Manga then all four products in this category will be shown. Actually "Manga" doesn't have any product. Those product are belong to it's children categories ( Naruto and HunterXHunter).

If you checkout the source code for productList.php you can see that it first call getChildCategories() function so if you browse "Manga" productList.php will show all products in "Manga" ( zero products ) and it's children "Naruto" and "HunterXHunter" ( four products ).

Source code : include/productList.php

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

$productsPerRow = 2;
$productsPerPage = 4;

$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");

// ... we got more codes here
?>

The rest of this page code should be pretty clear to you. There's a SELECT query and since we also want to use paging we feed the query to getPagingQuery(). If you don't know what getPagingQuery() does you should go back and read the page about product list in admin section.

Below is a snapshot of the product listing

Online Shop - View Product LIst

On productList.php the products are displayed so one row display three products like shown above. The number of product in one row can be changed. You just need to modify the value of $productsPerRow. For example modifying this value into 2 give this look :

Online Shop - View Product List ( 2 products in a row )

And here is the code that make this happen

Source code : include/productList.php

<?php

// ... previous code

$numProduct = dbNumRows($result);

$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\"><br>$pd_name</a><br>Price : $pd_price";

// 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)) . '">&nbsp;</td>';
}

} else {
?>
<tr><td width="100%" align="center" valign="center">No products in this category</td></tr>
<?php
}
?>

// .. more code down here
?>

 

 

 

Before printing the product we first check we actually have any product at all. If dbNumRows($result) returns zero that means we have no product in current category. So we show a message saying that there are no products in that category.

If we do have some products to show we display them in a table where each column's width depend on how many products to show in a row. Using the above example the column width is 100 / 3 = 33%. Next thing we do is loop through the product list and print each product.

If the value of ($i % 3) == 0 we start a new row by printing <tr> and if ($i % 3) == 2 end that row using </tr>.

When printing the product info we use displayAmount() function to format the look of the product price. This function is located in library/common.php. Here is what the function look like :

Source code : library/common.php

function displayAmount($amount)
{
   global $shopConfig;
   return $shopConfig['currency'] . number_format($amount);
}

What this function does is concat the currency symbol with the formattted amount. So if the amount is 123456 it will be displayed as $123,456. If the product price contains fraction ( like cents ) you need to change this function to this :

function displayAmount($amount)
{
   global $shopConfig;
   return $shopConfig['currency'] . number_format($amount, 2);
}

Notice that we add extra parameter to number_format(). This extra parameter will make the function display the amount with two decimal point such as $19.95

Back to productList.php. After printing the product price we check if we already run out of that product in inventory. If so we print additional message saying that the product is no longer in stock.

Since there is always a possibility that the last row we print does not contain three products we check the value of $i % 3 after the loop . If it's greater than zero that means the last row does not have three products in it so we need to print the empty column like shown on the first snapshot.

In case the picture isn't clear enough here is the same snapshot but the table border is set to 1. You can see that on the last row we have 2 empty ( merged ) columns

Online Shop - View Product List ( border = 1 )

 

 
 

 

Online Shop - Browse Category PHP MySQL Shopping Cart Tutorial : Online Shop - View Product List Online Shop - View Product Detail
Google
 
Web www.phpwebcommerce.com
 

At long last i'm finally able to update this site. Now the shopping cart can handle payment through paypal. As always you have any critiques, questions, comments or problems about this tutorial please tell me. Click here to send your feedback. And if you like this tutorial please link to this site. It will really help a lot :-)

 

Get custom programming done at ScriptLance.com!

 



PHP MySQL Shopping Cart Tutorial
Copyright © 2005 - 2008 www.phpwebcommerce.com