Products pages - "list" page results setup horizontally

27 posts by 4 authors in: Forums > CMS Builder
Last Post: October 21, 2008   (RSS)

By miked - May 23, 2008

Hello, this is for Products and how the "list page" shows each product on the page. Currently, the products stack on top of each other while going down the page. My question is:

Can the "list page" results show up on the page 3 or 4 thumbnail images wide (horizontally) with rows going down the page depending upon how many products for that group? Basically I will strip all the records on the list page I don't want to show up, except for the Image and Link (to the details page).

Is this possible? Thanks, Mike

Re: [miked] Products pages - "list" page results setup horizontally

By Dave - May 23, 2008

Hi Mike,

Yes, there's a few ways to do that. If you have a vertical column for each product group, though, is there more than 3-4 groups? And if so how will those be displayed?

The first step is to create an HTML mockup of how you want it to look.

If you want a list of products per column you might want to use multiple viewers. If you just want the products to show an image and wrap after every 3 I can give you a bit of PHP code to output a <br/> or </tr><tr> to do that. Figuring out the design first without worrying about the CMS is the best first step though. The CMS can almost always mimic the design.

Hope that helps. Let me know some more details and post an url to your mockup if you can.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Products pages - "list" page results setup horizontally

By miked - May 23, 2008

Hello again Dave,

Yes I would like the list page to list 3 products (and then wrap to the second row, etc.) and when you click on the product it will go to the details page for that product.

All total I will duplicate this (with different record names) for a total of 6 different pages (product menu choices on the website).

One of your Featured Clients has something VERY similar.. but I only want 3 across then wrap down to the second row, then third (if needed) etc. and if possible be able to display the name of the product as well. The page I'm referring to on your client's website is: http://www.berryfit.com/Jackets.php

Thanks again for your support... Mike

Re: [miked] Products pages - "list" page results setup horizontally

By Dave - May 24, 2008

Hi Mike,

There's several ways to do this. If you put each product in a fixed width DIV and float it left they'll wrap when they reach the right-side of the screen. If you put them inside a container div with a fixed width they'll wrap when they reach the edge of the container div. That is a HTML only way to do it.

A way to do it with tables and PHP would be like this:

<table border="1">
<tr>

<?php foreach ($records as $record): ?>
<td>
<?php echo $record['title'] ?><br/>
</td>
<?php $maxCols=3; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach; ?>

</tr>
</table>

Basically what that does is output each record in a <td>table cell</td> and then end and start a new row ("</tr><tr>") every 3 table cells.

Hope that helps. Let me know if that works for you.
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Products pages - "list" page results setup horizontally

By miked - May 25, 2008

That certainly helped. I had to include the image records in the table as well; and added a bit to the cellpadding so it appeared to "column" the images so they didn't have to be the same width (which is a good idea since most clients who need to use a CMS will take some photos portrait and some landscape).

Thanks!

Re: [miked] Products pages - "list" page results setup horizontally

By Dave - May 26, 2008

Glad to hear it's working! :)

The trickiest part is figuring out the design and HTML. Once you have the HTML part figured out it's usually much easier to look at it and try and figure out what parts need to be repeated when.

If you need help with anything else just let us know! :)
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Products pages - "list" page results setup horizontally

By miked - May 26, 2008

Dave, why does my client get an "A" type of symbol when typing directly in the wysiwyg editor? It happens when they space, and hit return. Then I have to go in an select the html button and clear the "A" symbols for them.

Any ideas?

Re: [miked] Products pages - "list" page results setup horizontally

By Dave - May 26, 2008

It could be something to do with the character set their browser or the server is using.

Does it happen for you as well? Do you know what browser the client is using?
Dave Edis - Senior Developer
interactivetools.com

Re: [Dave] Products pages - "list" page results setup horizontally

By miked - May 26, 2008

Dave, she is using IE, I am using firefox. Yes it happens for me as well, whenever I hit the space button twice. Like at the end of a period, and the space, space, start a new sentence.