Here's the situation:
E-commerce store (based on Magento platform).
Fluid layout - left & right columns have fixed width, center (content) column stretches to fill browser window.
Problem: Magento's "product lister" PHP code has a fixed variable that determines the number of products per row (i.e. TD's in each TR, code below).
With the typical 1024x768 / 1280x1024 resolution, it looks OK. But with anything wider, it's just a waste of space = I can fit up to 2x the products into the same space.
So, I would like to increase the number of products per row based on the user's browser width, i.e. at 800x600 = show 4/row, 1024x768 = 5/row, 1680x1050 = 8/row.
I.e. "get screen width" -> "look at array to match width to preferred # of products/row" -> "change variable to adjust # of generated table cells per row".
I don't know enough PHP to make it work... Aware of the concepts, but not enough to write my own script.
Here's the code snippet (relevant variable in bold), full file attached (.phtml renamed to .txt):
Code: Select all
<?php $_collectionSize = $_productCollection->count() ?>
<table class="products-grid" id="products-grid-table">
<?php $i=0; foreach ($_productCollection as $_product): ?>
[b]<?php if ($i++%5==0): ?>[/b]
<!-- ?php if ($i++%3==0): ? --><!-- was 3 by default, changed to 5 -->
<tr>
<?php endif ?>
<td>
{snip 34 lines - image / caption / generation & placement - irrelevant}
</td>
[b]<?php if ($i%5==0 && $i!=$_collectionSize): ?>[/b]
<!-- ?php if ($i%3==0 && $i!=$_collectionSize): ? -->
</tr>
<?php endif ?>
<?php endforeach ?>
[b]<?php for($i;$i%5!=0;$i++): ?>[/b]
<!-- ?php for($i;$i%3!=0;$i++): ? -->
<td class="empty"> </td>
<?php endfor ?>
[b]<?php if ($i%3==0): ?>[/b]
<!-- ?php if ($i%3==0): ? -->
</tr>
<?php endif ?>
</table>