Forums / Templates, Stylesheets, Page Layout / switch product listings to a grid layout

switch product listings to a grid layout

Locked

Views: 13,746

Results 21 to 32 of 32
This thread is locked. New replies are disabled.
18 May 2006, 10:43 AM
#21
copels avatar

copels

New Zenner

Join Date:
Feb 2006
Posts:
51
Plugin Contributions:
0

switch product listings to a grid layout

DrByte:

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

My Zencarts:

Giftsfromwales

18 May 2006, 1:59 PM
#22
cheekycockney avatar

cheekycockney

Zen Follower

Join Date:
Apr 2006
Posts:
172
Plugin Contributions:
0

Re: switch product listings to a grid layout

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.

19 May 2006, 3:51 PM
#23
figster avatar

figster

New Zenner

Join Date:
Feb 2006
Posts:
85
Plugin Contributions:
0

Re: switch product listings to a grid layout

Kim:

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

19 May 2006, 4:35 PM
#24
liquidlead avatar

liquidlead

New Zenner

Join Date:
May 2006
Posts:
17
Plugin Contributions:
0

Re: switch product listings to a grid layout

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. :cool:

~ Liquid Lead Artist ~
https://www.liquidlead-art.com

19 May 2006, 5:02 PM
#25
figster avatar

figster

New Zenner

Join Date:
Feb 2006
Posts:
85
Plugin Contributions:
0

Re: switch product listings to a grid layout

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

19 May 2006, 5:44 PM
#26
liquidlead avatar

liquidlead

New Zenner

Join Date:
May 2006
Posts:
17
Plugin Contributions:
0

Re: switch product listings to a grid layout

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>

~ Liquid Lead Artist ~
https://www.liquidlead-art.com

19 May 2006, 6:16 PM
#28
liquidlead avatar

liquidlead

New Zenner

Join Date:
May 2006
Posts:
17
Plugin Contributions:
0

Re: switch product listings to a grid layout

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 :smartass:

~ Liquid Lead Artist ~
https://www.liquidlead-art.com

19 May 2006, 6:50 PM
#29
figster avatar

figster

New Zenner

Join Date:
Feb 2006
Posts:
85
Plugin Contributions:
0

Re: switch product listings to a grid layout

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

21 May 2006, 10:27 PM
#30
figster avatar

figster

New Zenner

Join Date:
Feb 2006
Posts:
85
Plugin Contributions:
0

Re: switch product listings to a grid layout

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.net/sexy-leather/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!

23 May 2006, 7:03 PM
#31
cheekycockney avatar

cheekycockney

Zen Follower

Join Date:
Apr 2006
Posts:
172
Plugin Contributions:
0

Re: switch product listings to a grid layout

OK after installing the 1.2.5 version on my 1.2.7 cart I have a couple of issues.

  1. As mentioned before, things look quite unaligned, what file creates the tables so I can sort this?

  2. When my products listing was in rows it displayed the product desription. Now its in a grid, the description has gone. As far as i can tell, it's still set to be on in the admin so should it not still work?

Thanks in advance.

10 Mar 2010, 6:41 PM
#32
kinvart avatar

kinvart

New Zenner

Join Date:
Feb 2010
Posts:
27
Plugin Contributions:
0

Re: switch product listings to a grid layout

How do i make more rows as opposed to one row?

i now have one row with three collums, although there are more than 3 products to display?

Please help, it's urgent:clap:

Thank you