styling product listing pages with column layout grid

Do you mean the flexible_product_listing_1_0_prelim.zip file in post #50?

Just wanted to say thanks!
I have installed this and it looks like if fit to my needs.
Thanks again for this mod!

1.3.8a with column grid layout, Flexible Product Listing mods, among others.

On my product listing page - is there a way to anchor the 'buy now' button to the bottom of the centerBox (which I have defined in stylesheet to fixed height)? so that the "buy now" buttons amongst the columns in a row are horizontally aligned with one another, the way the item names are at the top of centerBox.

https://www.soxophoneplayer.com

Thanks.

Hi Glenn

I am using your flexible product listing add on that I found in one of you posts (post #50 on http://www.zen-cart.com/forum/showth...=100003&page=5).

I'm trying to reorganize the way that the page displays the products. I want the Image on the left with the product name/manufacturer and description to the right of that.

Basically I'd like it to display similarly to this site http://www.overclockers.co.uk/

I've already put the products into two columns and I have used css to push the image to the left, but I'm getting no love on raising the Product title to the top right as well as the brief description. Unfortunately I dont have a live version of this page yet, I'm just editing on a local server (XAMPP).

Any help will be great!
Thanks
Kevin

Hard to be sure of the right advice when I can't see it, but try giving .itemName and .listingDescription float: right;
You may need to give .listingDescription clear: right; if it wants to fit next to the title.
Both of them may need a defined width.
I am assuming you have floated the image left.

Posting a bit of your HTML output (view source) may help to see exactly what you have - just one product's worth of it.

Hi again

I fiddled with some of the css you advised me to but I cant get the look I want.

I've attached a image to show you what I want- the top image being what is displaying as default, and the bottom an impression of what I want.

Here is some of the output html for one of my product.

<h3 class="itemTitle"><a href="http://localhost/zencart/index.php?main_page=product_info&cPath=66&products_id=182">HP Computer</a></h3><div class="listingDescription">Very cool PC</div></div></td>
        <td width="48%" align="center" valign="top"><div class="centerBoxContentsProducts centeredContent back" style="width:98%;"><div class="listingImage"><a href="http://localhost/zencart/index.php?main_page=product_info&cPath=66&products_id=187"><img src="images/chassis.jpg" alt="HP Computer" title=" HP Computer " width="100" height="76" class="listingProductImage" /></a></div>
<div class="listingPrice">R6,000<br /></div><div class="listingButtonGroup"><a href="http://localhost/zencart/index.php?main_page=product_info&cPath=66&products_id=187">... more info</a><br /><img src="includes/templates/cherry_zen/buttons/english/button_sold_out_sm.gif" alt="Sold Out" title=" Sold Out " width="77" height="21" /><br /><br /></div>

<h3 class="itemTitle"><a href="http://localhost/zencart/index.php?main_page=product_info&cPath=66&products_id=187">HP Computer</a></h3><div class="listingDescription">Nice!</div></div></td>
    

Thanks again

You have row mode active, so the styling method would be different than for columns mode. Which do you really want?

• Is that <td> from the dotline mod? I guess it is in columns mode...

I am going to be busy for most of the weekend and will probably not be able to spend time on this until Monday.

Hey Glenn

It is in column mode but I've only got 2 columns per row. Don't worry though I got it to do what I want by fiddling repeatedly with the CSS. It was hit and miss really but it is doing what I want. You help was invaluable!

Much appreciated.

Glad to know you got it to work :)

I'm not sure if this is spot for this question or not-

On my product info page I am trying to do a few layout things and can't seem to figure it out-

1. I want to change the size and color of font for the price-
2. I want place "Add to Cart" directly beneath the "Price"-
3. I would also like to put "Tell a Friend", "write a Review" "Next or Previous" under price With Buy Now at the Bottom and the Product info beneath that-
4. I want to change "Add to Cart" to "Buy Now"

I've been looking for hours to find the info to make these changes, please Help-

Thanks

This thread deals with the product listing page. The product info page which you are asking about is completely separate, and there are lots of threads and mods that cover styling that.

Hey,

I have installed column layout grid on my store, http://lapalace.com/index.php?main_page=index&cPath=25 , however it is only showing one row...

can anyone tell me how to have it display 3 columns and multiple rows, maybe an option to show all products...

how can I have the All Products page have multiple columns per row?

any help is appreciated..

thanks..

What is your setting for Configuration > Maximum Values > Products Listing- Number Per Page?

To get the all products page to look the same as the product listing, see yellow1912's thread on using one single listing template.

it is set to 5.. I want the page look like the featured products section on the homepage, https://www.lapalace.com.
for reference you can see my setting below: thanks for you help..

itle Value Action
Address Book Entries 5 Info
Search Results Per Page 20 Info
Prev/Next Navigation Page Links 5 Info
Products on Special 3 Info
New Products Module 3 Info
Upcoming Products 3 Info
Manufacturers List - Scroll Box Size/Style 1 Info
Manufacturers List - Verify Product Exist 1 Info
Music Genre List - Scroll Box Size/Style 1 Info
Record Company List - Scroll Box Size/Style 1 Info
Length of Record Company Name 15 Info
Length of Music Genre Name 15 Info
Length of Manufacturers Name 15 Info
New Product Reviews Per Page 6 Info
Random Product Reviews for SideBox 1 Info
Random New Products for SideBox 1 Info
Random Products On Special for SideBox 1 Info
Categories To List Per Row 3 Info
New Products Listing- Number Per Page 3 Info
Best Sellers For Box 10 Info
Also Purchased Products 3 Info
Recent Purchases Box- NOTE: box is disabled 6 Info
Customer Order History List Per Page 10 Info
Maximum Display of Customers on Customers Page 20 Info
Maximum Display of Orders on Orders Page 20 Info
Maximum Display of Products on Reports 20 Info
Maximum Categories Products Display List 3 Info
Products Attributes - Option Names and Values Display 10 Info
Products Attributes - Attributes Controller Display 30 Info
Products Attributes - Downloads Manager Display 30 Info
Featured Products - Number to Display Admin 10 Info
Maximum Display of Featured Products - Main Page 6 Info
Maximum Display of Featured Products Page 6 Info
Products Listing- Number Per Page 5
Random Featured Products for SideBox 1 Info
Maximum Display of Specials Products - Main Page 3 Info
New Product Listing - Limited to ... 0 Info
Maximum Display of Products All Page 10 Info
Maximum Display of Language Flags in Language Side Box 3 Info
Maximum File Upload Size 2048000 Info
Allowed Filename Extensions for uploading jpg,jpeg,gif,png,eps,cdr,ai,pdf,tif,tiff,bmp,zip Info
Maximum Orders Detail Display on Admin Orders Listing 0 Info
Maximum PayPal IPN Display on Admin Listing 20 Info
Maximum Display Columns Products to Multiple Categories Manager 3 Info
Maximum Display EZ-Pages 20 Info

Products Listing- Number Per Page
Edit

Maximum Number of Products to list per page on main page

Date Added: 08/20/2009
Last Modified: 09/04/2009

All I can think of is that Template Monster has hard-coded the product listing to show three per page. I know they have done similar things in other templates.

Ask TM why your template won't show more than three products in the listing, and how to adjust it. It's their responsibility to fix what they broke.

Thanks Glenn. I have already submitted a ticket, lets see what they do. thanks for your help.

Mahdi

Hi,

Just wondering if there is anyway of creating a layout like this:

column mode on - 1 column per row.

Title
Image - Description - More Info
Price - Add to cart

Hope that makes sense, in a nut-shell what I'm after is
a title with the product image underneath it and the Description/More info link flowing out to the right from the image.

I'm using 1.3.8 with flex and column grid.

I see from product_listing that prouduct_list_name, itemTitle and listingDescription are all interlinked (which could mean some difficulty), and would explain why my css isn't working!

case 'PRODUCT_LIST_NAME':
        $lc_text .= '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>';

The link is https://www.cammellshoney.co.nz/store/index.php?main_page=index&cPath=3

Any idea's would be thankfully received,

Mike.

Ps...I'm still playing around with this so it may look a little on the ugly side.

Hi,

I've managed to get my product listing looking like I'd plan - no change to the PHP, just a bit of CSS tweaking. So far I've tested in Firefox and IE8 and it looks fine...

Thanks for the great mods! Couldn't of done it with out them.

http://www.cammellshoney.co.nz/store/index.php?main_page=index&cPath=3

Regards,

Mike.

Hello, gjh42

I installed your column layout grid mod long time ago and it works super fine. I want to say thank you so much for the great mod first.

Before I ask, please refer to thread #24 for visual aid.

Over the course of time, I added attributes to all items and “add” next to price became “… more info” link. At this point, I would like to just get rid of “… more info” and center the item price.

I think it’s a quite simple fix, however It’s been quite awhile since I touched css code and I’m afraid to do it myself.

Thanks.

Ps: the siggy will take you to my store.

You're right, it's simple:)
Find in your stylesheet_flexible_product_listing.css.listingPrice {float: left; margin: 0.4em 0 0 4.5em;} /*demo setup*/ .listingButtonGroup {float: right; width:50%; border-left: 1px solid #999999;} /*demo setup*/Remove the styling for .listingPrice and change .listingButtonGroup to display: none;```
.listingPrice {}
.listingButtonGroup {display: none;}