Page 1 of 1

[RESOLVED] Change script variable based on width/resolution?

Posted: Thu May 21, 2009 4:01 pm
by tjonnyc
Hello all. This looks like a theoretically easy problem, but I'm a total n00b at PHP.

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">&nbsp;</td>
        <?php endfor ?>
        [b]<?php if ($i%3==0): ?>[/b]
        <!-- ?php if ($i%3==0): ? -->
        </tr>
        <?php endif ?>
    </table>
 
Thanks in advance!

Re: Change script variable based on width/resolution?

Posted: Thu May 21, 2009 4:46 pm
by Turv
You may find it much easier to re-write it so it does not display the products in a table, but instead use an Un-ordered list, that way you can print all of the products in seperate lists (<li>//</li>) - Float them to the left and it will fit in as many as it can depending on the resolution.

Re: Change script variable based on width/resolution?

Posted: Fri May 22, 2009 5:23 am
by mattpointblank
Yep. Using CSS to float your <div>s or <li>s means the page will automatically put as many of them as it can fit into a row - should sort your problem, with simpler code than all those <td> and <tr>s too!

Re: [RESOLVED] Change script variable based on width/resolution?

Posted: Fri May 22, 2009 3:17 pm
by tjonnyc
Turv and mattpointblank - it worked 100% - changed from table/tr/td to div/ul/li. Thanks!