switch product listings to a grid layout

[copels]

Desopolis' suggestion, while useful information, is not what you need specifically.

What you're after is the "column/grid layout" mod ... which will be accessible for download shortly once our contributions area comes back online.

Meanwhile, I've attached it here.

DrByte, any chance of attaching this mod for version 1.2.6?

Many thanks, Steve

[CheekyCockney]

Hi copels, I think the version that vera posted will help you. It's labelled 1.2.5 and it works for me on 1.2.7. Obviously I could be very wrong.

[Figster]

You don't need to build a table you need a float: left in your stylesheet for the appropriate class.

Yep same prob here.. anyone know what class or what css I need a float: left to???

Thanks
Jim

[liquidlead]

Hi Figster,

I gave up on using a tableless layout for my products. It seems like unless all your products are the same size you'll have alignment problems. But if you'd like to attempt it... the css I used to make the float work is

#productlisting { float: left }
.centerBoxContentsProducts { float: left }

Using those classes did work, kinda. My alignment was all off and I was getting sporadic rows. I hope you have better luck with it :)

Instead I built a table just for the products, I can post the code I used if you'd like.


Also, in reply to an earlier post, I figured out how to show a 4x4 grid instead of a 2x4 grid...heh, all I had to do was change the settings in admin under configuration/Maximum Values, down at the bottom of the page.

[Figster]

Thanks Liquidlead,
I have searched the two css sheets I have and neither one has that class listed. My Template (purpleshades) Has odd and even product listings, and adding a float left had no effect there.
Yes please give me the table you mentioned, I'll give that a try...

Thanks,
Jim

[liquidlead]

hmm...do you have the web developer plugin for firefox? that's what I've been using to figure out the different classes. You could also try looking at the source code, it should list it there too. I'm not familiar with the purpleshades template, but I've only seen odd and even product listings in the 'row' display. Do you have a site I can look at?

I hope this is of some help to you...

I added the following code to the file: '/includes/templates/mysite/common/tpl_columnar_display.php'

<?php
  if ($title) {
    echo $title;
  }
  if (is_array($list_box_contents) > 0 ) {
    for($row=0;$row<sizeof($list_box_contents);$row++) {
      echo "<tr>\n";
      for($col=0;$col<sizeof($list_box_contents[$row]);$col++) {
        echo '<td>';
        $r_params = "";
        if (isset($list_box_contents[$row][$col]['params'])) 
            $r_params .= ' ' . (string)$list_box_contents[$row][$col]['params'];
        if (isset($list_box_contents[$row][$col]['text'])) {
          echo '<div' . $r_params . '>' . $list_box_contents[$row][$col]['text'] .  '</div>' . "\n";
        }
        echo '</td>';
      }
      echo "</tr>\n";
    }
  }
?>

I put the actual table part in the tpl_modules_product_listings.php file:

<table id="productlistings" width="98%">

   <?php
/**
 * load the list_box_content template to display the products
 */


if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {
  require($template->get_template_dir('tpl_columnar_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_columnar_display.php');
} else {// (PRODUCT_LISTING_LAYOUT_STYLE == 'rows')
  require($template->get_template_dir('tpl_tabular_display.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_tabular_display.php');
}
?>

</table>

[Figster]

Awsome, I'll give that a try. As for my site the working site url is http://www.hotstuffleatherandlace.ne...ther/index.php that was the Zen 1.2.7

The upgrade I am still working on is at this url http://www.hotstuffleatherandlace.net/newzen/index.php

Really appreciate your help!

Thanks,
Jim

[liquidlead]

Try adding this to your css:

.centerBoxContentsProducts, .centeredContent back {
float: left;
}

it kinda works, the alignment is a little off on the bottom, but the top looks good

[Figster]

Your right that does work, and now I just noticed I have a duplicate box. The top and the bottom are the same products. I seam to be getting two product listings at the same time, fix one for columns and it messes up the other one..

I think I need to start from scratch. There has to be two calls for the info.

Thank you for your help, You have been awsome!

Jim

[Figster]

Hey I just wanted to thank Jolly Jim on a superb job of designing and updating the purpleshades template.
I got one of my sites updated to zen 1.3.01 If you want to see what I did with your template this is my leather site with the upgrade http://www.hotstuffleatherandlace.ne...ther/index.php

I also have another site with the same template without all the changes I made in the above site, also not upgraded yet... maybe next week.

http://www.hotstuffleatherandlace.com/index.php

Thank again Jim... Thumbs up man!