Product results column layout?

How would I change the product results layout to have four products acroos the page in a column layout instead of the single column list layout?

The menu on the right side is generated dynamically using recordsets and ULs. In order to modify this so that it is not creating an up and down list you would need to edit the code in the CSSMenuWriter > intermediate.php file. You might need to supress the <li></li> so that it only occurs for every fourth item.

This would be a very custom edit of this menu and will require some knowledge of php to get it worked out.

Is it possible for you to walk me through exactly what I would need to modify; or is there a sample file I could download?

Is there documentation on how to acheive the multi-column layout? Can this be done by using eCart to edit the files?

This is not a straight forward edit and would be completely custom. In a test that I did I was able to add a counter variable, then check for this value being divisible by four to allow for the <li> and </li> tags to be written. Here is the code from my test if you want to check that out to get an idea of how this can be done:

intermediate.php lines 38-42 original

<?php do { ?>

      <?php if ($totalRows_ProductMenu > 0) { // Show if recordset not empty ?>

  <li><span><a href="<?php echo($assumedRoot); ?>Products_Detail.php?ProductID=<?php echo $row_ProductMenu['ProductID']; ?>"><?php print $row_ProductMenu['ProductName']; ?></a></span></li>

  <?php } // Show if recordset not empty ?>

<?php } while ($row_ProductMenu = mysql_fetch_assoc($ProductMenu)); ?></ul>

update these lines to this

<?php $i = 0; ?>

  <?php do { ?>

      <?php if ($totalRows_ProductMenu > 0) { // Show if recordset not empty ?>

  <?php if($i % 4 == 0 || $i == 0) {?><li><?php } ?><span><a href="<?php echo($assumedRoot); ?>Products_Detail.php?ProductID=<?php echo $row_ProductMenu['ProductID']; ?>"><?php print $row_ProductMenu['ProductName']; ?></a></span><?php if($i % 4 == 0 && $i != 0) {?></li><?php } ?>

  <?php } // Show if recordset not empty ?>

  <?php $i += 1; ?>

<?php } while ($row_ProductMenu = mysql_fetch_assoc($ProductMenu)); ?></ul>

What exactly does the intermediate.php page do? I made the code changes and nothing changed!

I deleted the intermediate.php page from the server and went back to my page and still nothing changed, so the brings me to my question, what does this page actual do and why isn't anything changing for me?

I was able to achieve the multi column layout without using any php code changes. I strictly used CSS by making edits to the common.css and content.css files.

Thank you for your help in trying to help me achieve this.

That is great to hear, were the changes that you made something that you can share on the forums? If so I'm sure that others could benefit from it. I'm glad you were able to get it worked out.

I made one css change and one css addition.

1. Open the common.css file and add this style anywhere in the page

.WADAResultThumb {
width:100px;
height:100px;
}

You can chage the demensions of these to the size that will look best on the Products_Results.php page.

2. Open the content.css file and change:

.productResultsWrapper {
overflow: hidden;
height: 1%;
min-height:100px;
float: left;
width:190px;
margin:10px 25px 10px 0px;
display:inline;

}
.productResultsWrapper .left {
float: left;
}

.productResultsWrapper .left .imageWrapper img {
border: solid 1px #CFCFCF;
margin:0px 0px 10px 0px;
width:170px;
}

Then just edit these styles to fit what you want your Products_Results.php page to look like.

Enjoy!

Thank you very much for posting back with that, I'm sure than others will find this very helpful. Sorry about the misunderstanding, the edits I was telling you to make would not affect the listing that you see on this results page, just the menu for the products one the left side of the page.