Product Results Layout

[anitah355532]

On the products_Results page I would like the products to display 3 across and then continue to the next row, another 3 across, etc.

I've reduced the size of the WADAResultInfoArea so that the products will fit on the page, but I'm not sure where the code is that tells it what order to display the results.

Can anyone assist please?

[Ray Borduin]

The order is controlled by the ORDER BY statement in the Recordset itself.

[anitah355532]

I'm new to all this, and although your instruction sounds simple enough, I still have no idea what to do. Can you please give me a little more detail? Where do I find the ORDER BY statement, and what do you mean by "the Recordset itself"?

[anitah355532]

Having just done a bit of research via Google, and I think you mean I can order the products using SQL. Doesn't this just order alphabetically, numerically, etc. Can this tell Product_Results.php to display in columns and rows?

[Ray Borduin]

That is correct, you can only order alphabetically or numerically and as a result the data is organized into rows and not columns. Column display is not currently supported and would require loading the information into an array and building the table dynamically instead of simple looping as it currently uses.

[anitah355532]

As it's too late to re-create my site using someone else's software, and my client has specifically asked for columns of products ..... is there anyone out there who can help me? If you've found a way of getting Powerstore to display the products in columns and rows can you please respond to me via this forum.

I had no idea that Powerstore is not as customisable as I'd hoped, and I've now got myself in a bit of a fix. Any assistance would be gratefully received.

In the meantime I'll attempt to learn the process of "loading the information into an array and building the table dynamically" via other sites.

[anitah355532]

Jason Byrnes from Web Assist support has come to my rescue and sent me the required code to insert into the product_results page. Needs tidying up with css, but it works perfectly.

Thank you Jason !!!

[larsentim278054]

Could you post his instructions? I'm interested in something similar.

Jason Byrnes from Web Assist support has come to my rescue and sent me the required code to insert into the product_results page. Needs tidying up with css, but it works perfectly.

Thank you Jason !!!

[anitah355532]

Here are the instructions Jason sent me. It needed tidying up, but here's the code. If you want to see how it looks my URL is www.golden-bay.co.nz/test/

Posted By: jbyrnes@webassist.com (Jason Byrnes) Message 4 in Log
Date: 07/02/2009 03:35 pm No Attachments
Title: RE: Columns and Rows

Well you can get the horizontal looper on the results page by changing lines 431 - 464 of the stock results page:
<?php $cellCount = 0; ?>
<?php do { ?>
<?php if($cellCount == 0) { ?><tr><?php }?>
<td class="WADAResultsEntry"><div class="WADAResultThumbArea"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"><img class="WADAResultThumb" border="0" src="Images/Upload/<?php echo $row_WADAProducts["ProductThumb"]; ?>" alt="<?php echo $row_WADAProducts["ProductName"]; ?>" /></a></div>
<div class="WADAResultInfoArea">
<div class="WADAResultPrice">$<?php echo number_format($row_WADAProducts["ProductPrice"],2); ?></div>
<div class="WADARecordNavigationButtons">
<table width="100%" class="WADAEditButton_Table">
<tr>
<td align="right"><?php
if ($row_WADAProducts["NumLeft"] > 0 || $row_WADAProducts["ProductUnlimited"] != 0) {
?>
<form name="WA_Store_Cart_1_ATC_<?php echo $row_WADAProducts["ProductID"]; ?>" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>">
<input type="hidden" name="WA_Store_Cart_1_ID_Add" value="<?php echo $row_WADAProducts["ProductID"]; ?>" >
<input type="hidden" name="WA_Store_Cart_1_Quantity_Add" value="1" size="4" style="margin-bottom:2px"/>
<input type="image" src="WA_eCart/Images/Slate/Btn2_EN_addtocart.gif" border="0" value="Add to Cart" name="WA_Store_Cart_1_ATC" alt="Add to cart" style="vertical-align:bottom;">
</form>
<?php
} else {
?>
Sold out!
<?php
}
?></td>
<td valign="top"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="View"><img border="0" name="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" id="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" alt="View" src="WA_DataAssist/images/Slate/Traditional_zoom.gif" style="vertical-align:bottom" /></a></td>
</tr>
</table>
</div>
</div>
<div class="WADAResultInfoArea2">
<div class="WADAResultTitle"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>"><?php echo $row_WADAProducts["ProductName"]; ?></a></div>
<div class="WADAResultDescription"><?php echo $row_WADAProducts["ProductShortDesc"]; ?> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>">More...</a></div>
</div></td>
<?php $cellCount ++; ?>
<?php if($cellCount == 3) { ?></tr><?php $cellCount = 0; } ?>
<?php } while ($row_WADAProducts = mysql_fetch_assoc($WADAProducts)); ?>


to:
<?php $cellCount = 0; ?>
<?php do { ?>
<?php if($cellCount == 0) { ?><tr><?php }?>
<td class="WADAResultsEntry"><div class="WADAResultThumbArea"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"><img class="WADAResultThumb" border="0" src="Images/Upload/<?php echo $row_WADAProducts["ProductThumb"]; ?>" alt="<?php echo $row_WADAProducts["ProductName"]; ?>" /></a></div>
<div class="WADAResultInfoArea">
<div class="WADAResultPrice">$<?php echo number_format($row_WADAProducts["ProductPrice"],2); ?></div>
<div class="WADARecordNavigationButtons">
<table width="100%" class="WADAEditButton_Table">
<tr>
<td align="right"><?php
if ($row_WADAProducts["NumLeft"] > 0 || $row_WADAProducts["ProductUnlimited"] != 0) {
?>
<form name="WA_Store_Cart_1_ATC_<?php echo $row_WADAProducts["ProductID"]; ?>" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>">
<input type="hidden" name="WA_Store_Cart_1_ID_Add" value="<?php echo $row_WADAProducts["ProductID"]; ?>" >
<input type="hidden" name="WA_Store_Cart_1_Quantity_Add" value="1" size="4" style="margin-bottom:2px"/>
<input type="image" src="WA_eCart/Images/Slate/Btn2_EN_addtocart.gif" border="0" value="Add to Cart" name="WA_Store_Cart_1_ATC" alt="Add to cart" style="vertical-align:bottom;">
</form>
<?php
} else {
?>
Sold out!
<?php
}
?></td>
<td valign="top"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="View"><img border="0" name="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" id="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" alt="View" src="WA_DataAssist/images/Slate/Traditional_zoom.gif" style="vertical-align:bottom" /></a></td>
</tr>
</table>
</div>
</div>
<div class="WADAResultInfoArea2">
<div class="WADAResultTitle"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>"><?php echo $row_WADAProducts["ProductName"]; ?></a></div>
<div class="WADAResultDescription"><?php echo $row_WADAProducts["ProductShortDesc"]; ?> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>">More...</a></div>
</div></td>
<?php $cellCount ++; ?>
<?php if($cellCount == 3) { ?></tr><?php $cellCount = 0; } ?>
<?php } while ($row_WADAProducts = mysql_fetch_assoc($WADAProducts)); ?>



You will run into display problems with the css however, this is the part we will not be able to assist with.

[larsentim278054]

Thank you so much! What did he mean by the CSS would be messed up? Did you have to fix the CSS code at all to get it to look how you have it on your site? By the way, I think you did a great job on that. Looks really nice.

Here are the instructions Jason sent me. It needed tidying up, but here's the code. If you want to see how it looks my URL is www.golden-bay.co.nz/test/

Posted By: jbyrnes@webassist.com (Jason Byrnes) Message 4 in Log
Date: 07/02/2009 03:35 pm No Attachments
Title: RE: Columns and Rows

Well you can get the horizontal looper on the results page by changing lines 431 - 464 of the stock results page:
<?php $cellCount = 0; ?>
<?php do { ?>
<?php if($cellCount == 0) { ?><tr><?php }?>
<td class="WADAResultsEntry"><div class="WADAResultThumbArea"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"><img class="WADAResultThumb" border="0" src="Images/Upload/<?php echo $row_WADAProducts["ProductThumb"]; ?>" alt="<?php echo $row_WADAProducts["ProductName"]; ?>" /></a></div>
<div class="WADAResultInfoArea">
<div class="WADAResultPrice">$<?php echo number_format($row_WADAProducts["ProductPrice"],2); ?></div>
<div class="WADARecordNavigationButtons">
<table width="100%" class="WADAEditButton_Table">
<tr>
<td align="right"><?php
if ($row_WADAProducts["NumLeft"] > 0 || $row_WADAProducts["ProductUnlimited"] != 0) {
?>
<form name="WA_Store_Cart_1_ATC_<?php echo $row_WADAProducts["ProductID"]; ?>" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>">
<input type="hidden" name="WA_Store_Cart_1_ID_Add" value="<?php echo $row_WADAProducts["ProductID"]; ?>" >
<input type="hidden" name="WA_Store_Cart_1_Quantity_Add" value="1" size="4" style="margin-bottom:2px"/>
<input type="image" src="WA_eCart/Images/Slate/Btn2_EN_addtocart.gif" border="0" value="Add to Cart" name="WA_Store_Cart_1_ATC" alt="Add to cart" style="vertical-align:bottom;">
</form>
<?php
} else {
?>
Sold out!
<?php
}
?></td>
<td valign="top"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="View"><img border="0" name="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" id="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" alt="View" src="WA_DataAssist/images/Slate/Traditional_zoom.gif" style="vertical-align:bottom" /></a></td>
</tr>
</table>
</div>
</div>
<div class="WADAResultInfoArea2">
<div class="WADAResultTitle"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>"><?php echo $row_WADAProducts["ProductName"]; ?></a></div>
<div class="WADAResultDescription"><?php echo $row_WADAProducts["ProductShortDesc"]; ?> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>">More...</a></div>
</div></td>
<?php $cellCount ++; ?>
<?php if($cellCount == 3) { ?></tr><?php $cellCount = 0; } ?>
<?php } while ($row_WADAProducts = mysql_fetch_assoc($WADAProducts)); ?>


to:
<?php $cellCount = 0; ?>
<?php do { ?>
<?php if($cellCount == 0) { ?><tr><?php }?>
<td class="WADAResultsEntry"><div class="WADAResultThumbArea"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"><img class="WADAResultThumb" border="0" src="Images/Upload/<?php echo $row_WADAProducts["ProductThumb"]; ?>" alt="<?php echo $row_WADAProducts["ProductName"]; ?>" /></a></div>
<div class="WADAResultInfoArea">
<div class="WADAResultPrice">$<?php echo number_format($row_WADAProducts["ProductPrice"],2); ?></div>
<div class="WADARecordNavigationButtons">
<table width="100%" class="WADAEditButton_Table">
<tr>
<td align="right"><?php
if ($row_WADAProducts["NumLeft"] > 0 || $row_WADAProducts["ProductUnlimited"] != 0) {
?>
<form name="WA_Store_Cart_1_ATC_<?php echo $row_WADAProducts["ProductID"]; ?>" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>">
<input type="hidden" name="WA_Store_Cart_1_ID_Add" value="<?php echo $row_WADAProducts["ProductID"]; ?>" >
<input type="hidden" name="WA_Store_Cart_1_Quantity_Add" value="1" size="4" style="margin-bottom:2px"/>
<input type="image" src="WA_eCart/Images/Slate/Btn2_EN_addtocart.gif" border="0" value="Add to Cart" name="WA_Store_Cart_1_ATC" alt="Add to cart" style="vertical-align:bottom;">
</form>
<?php
} else {
?>
Sold out!
<?php
}
?></td>
<td valign="top"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="View"><img border="0" name="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" id="View<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" alt="View" src="WA_DataAssist/images/Slate/Traditional_zoom.gif" style="vertical-align:bottom" /></a></td>
</tr>
</table>
</div>
</div>
<div class="WADAResultInfoArea2">
<div class="WADAResultTitle"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>"><?php echo $row_WADAProducts["ProductName"]; ?></a></div>
<div class="WADAResultDescription"><?php echo $row_WADAProducts["ProductShortDesc"]; ?> <a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>">More...</a></div>
</div></td>
<?php $cellCount ++; ?>
<?php if($cellCount == 3) { ?></tr><?php $cellCount = 0; } ?>
<?php } while ($row_WADAProducts = mysql_fetch_assoc($WADAProducts)); ?>



You will run into display problems with the css however, this is the part we will not be able to assist with.

[anitah355532]

Thanks :-)

I didn't end up having to do anything in css or on any other pages, but I did have to make some modifications to the code that Jason sent me. I don't have "add to cart buttons" or long descriptions on my product_results page. This is the code I ended up with after making the changes to my page and getting the products to line up properly in rows (if there's more than 3 items on a page):

<?php $cellCount = 0; ?>

<?php do { ?>
<?php if($cellCount == 0) { ?><tr><?php }?>
<td class="WADAResultsEntry"><div class="WADAResultThumbArea"><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>" title="<?php echo $row_WADAProducts["ProductName"]; ?>"><img class="WADAResultThumb" border="0" src="Images/Upload/<?php echo $row_WADAProducts["ProductThumb"]; ?>" alt="<?php echo $row_WADAProducts["ProductName"]; ?>" /></a></div>
<div class="WADAResultInfoArea2">
<div class="WADAResultTitle">
<table width="98%" height="73" class="WADAEditButton_Table">
<tr>
<td align="left"><p><a href="Products_Detail.php?ProductID=<?php echo(rawurlencode($row_WADAProducts['ProductID'])); ?>"><?php echo $row_WADAProducts["ProductName"]; ?></a><span class="WADAResultPrice"><br />
</span></p>
<div class="WADADetailsPrice">$<?php echo number_format($row_WADAProducts["ProductPrice"],2); ?></div>
<p>
<?php
if ($row_WADAProducts["NumLeft"] > 0 || $row_WADAProducts["ProductUnlimited"] != 0) {
?>
</p>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>" method="post" id="WA_Store_Cart_1_ATC_<?php echo $row_WADAProducts["ProductID"]; ?>7">
<input type="hidden" name="WA_Store_Cart_1_ID_Add6" value="<?php echo $row_WADAProducts["ProductID"]; ?>" />
<input type="hidden" name="WA_Store_Cart_1_Quantity_Add6" value="1" size="4" style="margin-bottom:2px"/>
</form>
<?php
} else {
?>
Sold out!
<?php
}
?></td>
</tr>
</table>
<table width="92%" class="WADAEditButton_Table">
<tr>
<td align="right">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>
</div>
<div class="WADAResultDescription"></div>
</div></td>
<?php $cellCount ++; ?>
<?php if($cellCount == 3) { ?></tr><?php $cellCount = 0; } ?>
<?php } while ($row_WADAProducts = mysql_fetch_assoc($WADAProducts)); ?>

[pete]

Hi,

This thread is directly related to what my client wants - three smaller boxes of product per row. I'm using PowerStore2 and have eCart, DataAssist, CSS Sculptor and CSS Menu Writer.

I'm confused about where to find the code that is referred to by Jason. Are we talking about the products_results.php file? If so, my last line # is 403, and there is no line 431 as discussed...

Also, Anitah, could you expand on how you adjusted the containers to fit three across the productResultsWrapper? (I'm assuming I'm in the right area so far...)

Thanks so much!
Pete

[mick106153]

Jason

I need this information too.
Where is the code you described earlier in this thread?

Mick

[pete]

I ended up creating a contentBoxSmall div in the content.css file with a short width (220px) and a float:left declaration. (There are other style declarations, but they are specific to my use - and yours will probably be different...)

Inside of that, I placed the productResultsWrapper and its child elements.

The next issue that came up was that only five products show up on each page. With the new, smaller divs, I want many more to show up. So, somewhere around line 147 of the Products_Results.php file, I changed:

$maxRows_WADAProducts = 5;
to
$maxRows_WADAProducts = 50;

It seems to be working well for me - I hope it provides a push in the right direction for those wanting to do a similar layout.

[mick106153]

Thanks Pete

Good information and probably similar to the path I will take - After I find line 431.
Any idea where that might be?

Mick

[pete]

I never did find line 431... I just worked with Product_Results.php and content.css If anyone finds a problem with my method, please let me know.

[mick106153]

Pete

I followed your lead and added a few others including a max-height and the divs are displaying stair-step on the first line (with or without the max-height).
Take a look and tell me if had to surmount the same problem and, if so, how?

[see attached]

Mick

[pete]

Move down in the content.css file and adjust it to

.productResultsWrapper .left h2, .productResultsWrapper .left img {
display:inline;
margin-bottom:10px;
margin-left:20px;


???

[mick106153]

Pete

As there is no
".productResultsWrapper .left h2, .productResultsWrapper .left img "
in my content.css
I tried alternately adjusting other divs I thought you had intended and also creating the divs you described.


Same result.
Any thoughts?
Or a link to a working example?

Mick

[pete]

Mick, can you email me directly, please? I'm not in a position to put this URL on a public forum yet...
pete@resco.ca

[mick106153]

Will do…


Done.

Mick

PS ALL.
When and if I solve this to my satisfaction - I'll post back.

[wing183873]

Will do…


Done.

Mick

PS ALL.
When and if I solve this to my satisfaction - I'll post back.

Hi Mick were you able to figure this issue out? Can you post how did you got it to work?

Regards

[Markj000]

Hi Guys,

Can anyone tell me please which lines of code this replaces on the Product_Results.php page? It looks like we are all missing line 431. Did it display properly or did you also have to create the contentBoxSmall thats been referred to?

Thanks heaps.

Mark.

[mick106153]

Hi Mick were you able to figure this issue out? Can you post how did you got it to work?

Regards
I did, but I really can't define how I got there. A lot of mucking about in the css as I recall. Been sick for the last month + and am just getting back into it.
Feel free to examine the work in progress though.

http://014da19.netsolhost.com/intuHorsesPowerStore/Products_Results.php?Search=0

Mick