Displaying Products in Colums

3cool4school · May 3, 2012

Hello I have a custom php cart working great, with product pages and shopping cart and checkout using points rather than money. My problem is that I cannot get the actual product pages to display in colums (I want 5 items per colum and 8 rows per page). Instead the whole thing is displayed as a row.

Here is the page that the products are shown on: http://www.theskinnyminnie.com/user/rent/ (I have removed the need to be signed on)

Here is the code I am using:

<?php 
// Run a select query to get myproducts

$dynamic List ="";
$sql = mysql_query("SELECT * FROM Products ORDERY BY date_added DESC");
$productCount = mysql_num_rows($sql)){
if(productCount > 0){
while($row = mysql_fetch_array($sql)){
        $id = $row["product_id"];
$product_name = $row["product_name"];
$price = $row["credits"];
$date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
$dynamicList .= '<tr>
<td><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="77" height="102" border="1" /></a></td></tr>
<tr>
<td><a href="product.php?id=' . $id . '">' . $product_name . '</a></td>
</tr>
<tr>
<td>' . $price . 'pts</td>
</tr>
<tr>
<td> </td>
</tr>';
}
} else {
$dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

and then i echo dynamicList

MMDE · May 3, 2012

How do you want them sorted? I mean, I see you have sorted them date_added DESC, so I of course don't mean that, but rather how the data will be placed on the page. Will the flow be column by column, or row by row?

column by column:

1, 4, 7

2, 5, 8

3, 6, 9

row by row:

1, 2, 3

4, 5, 6

7, 8, 9

3cool4school · May 3, 2012

How do you want them sorted? I mean, I see you have sorted them date_added DESC, so I of course don't mean that, but rather how the data will be placed on the page. Will the flow be column by column, or row by row?

column by column:

1, 4, 7

2, 5, 8

3, 6, 9

row by row:

1, 2, 3

4, 5, 6

7, 8, 9

Oh wow! Thanks so much for your quick reply!. I want it sorted Row by Row.. Also if you could point me in the right direction to acheive pagination that would be great. I want to code it myself just need to know where to start. Would it be a while for the pages and then a counter as to where I stopped then display products after that counter on the next page? Nevermind! I just use LIMIT for pagination.. got it lol .. but still need help with the Row by Row!

MMDE · May 3, 2012

How do you want them sorted? I mean, I see you have sorted them date_added DESC, so I of course don't mean that, but rather how the data will be placed on the page. Will the flow be column by column, or row by row?

column by column:

1, 4, 7

2, 5, 8

3, 6, 9

row by row:

1, 2, 3

4, 5, 6

7, 8, 9

Oh wow! Thanks so much for your quick reply!. I want it sorted Row by Row.. Also if you could point me in the right direction to acheive pagination that would be great. I want to code it myself just need to know where to start. Would it be a while for the pages and then a counter as to where I stopped then display products after that counter on the next page?

Row by row is actually easier to do.

In your query, you need to add a limit, the limit will be like what page you are on.

$min = 8*5*($page-1)
$max = (8*5*$page)-1

LIMIT $min $max

now onto building the table, you need to know how many products that will show up on the page.

$number_of_products = mysql_num_rows($mysql_result);

to create products array from mysql result:

while($product = mysql_fetch_assoc($mysql_result)){
$products[] = $product;
}

How many rows?

$number_of_rows = $number_of_products/5;

how do I create each row?

$products_index = 0;
$the_table = '<table>';
for($row=0; $row<$number_of_rows; $row++){
$the_table .= '<tr>';
for($column=0; $column<5; $column++){
	$products_index++;
	if($products_index<count($products)){
		$the_table .= '<td>'.$products[$products_index].'</td>';
	}else{
		$the_table .= '<td> </td>';
	}
}
$the_table .= '</tr>';
}
$the_table .= '</table>'

EDIT:

Do note that this is all just raw draft, and you will need to edit to fit your own needs!

Mahngiel · May 3, 2012

ninja'd

MMDE · May 3, 2012

Actually, when I think about it for a second, since I never tested the code, $products_index++ is placed at wrong place.

This would be correct:

$products_index = 0;
$the_table = '<table>';
for($row=0; $row<$number_of_rows; $row++){
$the_table .= '<tr>';
for($column=0; $column<5; $column++){
	if($products_index<count($products)){
		$the_table .= '<td>'.$products[$products_index].'</td>';
		$products_index++;
	}else{
		$the_table .= '<td> </td>';
	}
}
$the_table .= '</tr>';
}
$the_table .= '</table>'

Psycho · May 3, 2012

@MMDE;

You calculation for the limit parameters is incorrect.

$min = 8*5*($page-1)
$max = (8*5*$page)-1

LIMIT $min $max

You are apparently calculating the start index and the end index. However, the two parameters for LIMIT are the start index and the row count.

With two arguments, the first argument specifies the offset of the first row to return, and the second specifies the maximum number of rows to return

So it should be coded more like this:

//Define the rows/cols instead of hard coding
$rows = 8;
$cols = 5;

//Calculate records per page and the limit start for the selected page
$records_per_page = $rows * $cols;
$limitIndex = ($page - 1) * $records_per_page;

$query = "SELECT * FROM table LIMIT $limitIndex, $records_per_page";

3cool4school · May 3, 2012

Thank you everyone! .. I'm going to try to implement it now. Should all of it go inside the while array?

xyph · May 3, 2012

Here's an alternate way to do this. I prefer it over the table method.

<html>
<head>
<style type="text/css">
	#list_container {
		width: 500px;
	}
	#list_container div {
		/* (width+margin*2)*columns = #list_container's width */
		/* (80+10*2)*5 = 500 */
		float: left; width: 80px; height: 50px; margin: 10px; background-color: red;
	}
</style>
</head>
<body>
<div id="list_container">
<?php
	for( $i = 0; $i < 40; $i++ )
		echo '<div>Item'.($i+1).'</div>';
?>
</div>
</body>
</html>

You can adjust columns per row easily by changing widths/margins in CSS. Wrapping is handled automatically, and trailing cell issues are non-existent.

3cool4school · May 3, 2012

Ok i got the code to work with the tables : http://www.theskinnyminnie.com/user/rent/

the only issue now is tha after ther first product it doesn't recognize the rest..

This is the code I implemented with mine.

<?php 
// Run a select query to get my letest 6 items
// Connect to the MySQL database


$min = 1;
$max = 4;
$sql = mysql_query("SELECT * FROM Products ORDER BY date_added DESC LIMIT $min,$max");
$number_of_products = mysql_num_rows($sql); // count the output amount
if ($number_of_products > 0) {
while($product = mysql_fetch_array($sql)){ 
             $products_name[] = $product["product_name"];
$products_id[] = $product["product_id"];
$products_price[] = $product["credits"];
$products_added[] = strftime("%b %d, %Y", strtotime($product["date_added"]));
$number_of_rows = $number_of_products/5;
$product_index = 0;
$the_table = '<table>';
for($row=0; $row < $number_of_rows; $row++){
$the_table .='<tr>';
for($col = 0; $col < 5; $col++){
if($products_index < count($products_name)){
$the_table .= '<td><a href="product.php?id=' .$products_id[$products_index]. '"><img src="inventory_images/' .$products_id[$products_index]. '.jpg" alt="' .$products_name[$products_index]. '" width="77" height="102" border="1" /></a><br /><a href="product.php?id=' .$products_id[$products_index]. '">' .$products_name[$products_index]. '</a><br />' .$products_price[$products_index]. 'pts</td>';
$products_index++;
}else{
$the_table .='<td><img src="../../images/noprofile.jpg" width="77" height="102" border="1"> <br />NO PRODUCT  <br />NO PRICE</td>';
}
}
$the_table .='</tr>';
}
$the_table .='</table>';
     
    }
}else {
$the_table = "We have no products listed in our store yet";
}
mysql_close();


?>

But I'm pretty sure the problem lies within here

for($row=0; $row < $number_of_rows; $row++){
$the_table .='<tr>';
for($col = 0; $col < 5; $col++){
if($products_index < count($products_name)){
$the_table .= '<td><a href="product.php?id=' .$products_id[$products_index]. '"><img src="inventory_images/' .$products_id[$products_index]. '.jpg" alt="' .$products_name[$products_index]. '" width="77" height="102" border="1" /></a><br /><a href="product.php?id=' .$products_id[$products_index]. '">' .$products_name[$products_index]. '</a><br />' .$products_price[$products_index]. 'pts</td>';
$products_index++;
}else{
$the_table .='<td><img src="../../images/noprofile.jpg" width="77" height="102" border="1"> <br />NO PRODUCT  <br />NO PRICE</td>';
}

Any suggestions?

samshel · May 3, 2012

I think the closing of while loop as incorrect. You are doing all your for loops for row column inside your while loop for fetching records. No surprise you see only one record.

Try this:

<?php 
// Run a select query to get my letest 6 items
// Connect to the MySQL database


$min = 1;
$max = 4;
$sql = mysql_query("SELECT * FROM Products ORDER BY date_added DESC LIMIT $min,$max");
$number_of_products = mysql_num_rows($sql); // count the output amount
if ($number_of_products > 0) {
while($product = mysql_fetch_array($sql)){ 
$products_name[] = $product["product_name"];
$products_id[] = $product["product_id"];
$products_price[] = $product["credits"];
$products_added[] = strftime("%b %d, %Y", strtotime($product["date_added"]));
}	
$number_of_rows = $number_of_products/5;
$product_index = 0;
$the_table = '<table>';
for($row=0; $row < $number_of_rows; $row++){
	$the_table .='<tr>';
	for($col = 0; $col < 5; $col++){
		if($products_index < count($products_name)){
			$the_table .= '<td><a href="product.php?id=' .$products_id[$products_index]. '"><img src="inventory_images/' .$products_id[$products_index]. '.jpg" alt="' .$products_name[$products_index]. '" width="77" height="102" border="1" /></a><br /><a href="product.php?id=' .$products_id[$products_index]. '">' .$products_name[$products_index]. '</a><br />' .$products_price[$products_index]. 'pts</td>';
			$products_index++;
		}else{
			$the_table .='<td><img src="../../images/noprofile.jpg" width="77" height="102" border="1"> <br />NO PRODUCT  <br />NO PRICE</td>';
		}
	}
	$the_table .='</tr>';
}
$the_table .='</table>';
     
    
}else {
$the_table = "We have no products listed in our store yet";
}
mysql_close();


?>

3cool4school · May 3, 2012

I think the closing of while loop as incorrect. You are doing all your for loops for row column inside your while loop for fetching records. No surprise you see only one record.

Try this:

You were right!!.. Also i had product_index and products_index used interchangably.. thanks so much everyone!

Sign In

Displaying Products in Colums

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information