Column Layout for New Products Page

pjb923:

Ok guys, I have a quick solution for this.
You can see it in action here:
http://www.coquitodesigns.com/catalog/index.php?main_page=products_new

The solution was fairly simple and didn't involve rewriting very much code at all.
I was able to remove most of the <tr> and <td>'s from the code and replace them with <div>'s. Then define the <div>'s as float:left, and they will flow one after another until the end of the line is reached, then wrap to the next line. Adjust the width of the div depending on how many columns you want. Divide your center column width by the number of columns and set your div to that width.

Here are the changes.

Open up your tpl_modules_products_new_listing.php file.

Go to line 15 and remove the following code

<table border="0" width="100%" cellspacing="2" cellpadding="2"> <tr> <td colspan="3"><hr /></td> </tr> ``` > > If you want to remove the space under the image, go to line 29 and change it > From: > ``` $display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'], $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('<br clear="all" />', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1)); ``` > > To: > ``` $display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'] , $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1)); ``` > > Next, go to around line 115 and change > From: > ``` <tr> <td width="<?php echo IMAGE_PRODUCT_NEW_LISTING_WIDTH + 10; ?>" valign="top" class="main" align="center">

> 
> To:
> ```
<div class="new_products">

Then delete the following around line 151

</td> <td colspan="2" valign="top" class="main"> ``` > > Finally, go down to around line 187 replace all the way to the end of the file: > > Replace: > ``` </td> </tr> <?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?> <tr> <td colspan="3" valign="top" class="main"> <?php echo $display_products_description; ?> </td> </tr> <?php } ?>

      <tr>
        <td colspan="3"><hr /></td>
      </tr>

<?php $products_new->MoveNext(); } } else { ?>

      <tr>
        <td class="main" colspan="2"><?php echo TEXT_NO_NEW_PRODUCTS; ?></td>
      </tr>

<?php } ?> </table> ``` > > With: > ``` <?php if (PRODUCT_NEW_LIST_DESCRIPTION != 0) { ?>

          <?php
            echo $display_products_description;
          ?>

<?php } ?>

       </div>

<?php $products_new->MoveNext(); } } else { ?> <?php echo TEXT_NO_NEW_PRODUCTS; ?> <?php } ?>

> 
> Now you have to add the class definition to your stylesheet.
> The following code is what works for my layout.  You will have to adjust the height and width depending on how many columns you want to show, and if you are displaying the product description, buy now button, etc...
> You can remove the 2nd declaration if you don't want a border around the images.  
> 
> ```
.new_products {float: left;
width: 135px;
height: 200px;
text-align: center;
}

.new_products img {
border: 1px solid #000;
}

I think I covered everything. If anyone has any problems, post them here and I'll see what I can do to help.

Hello, I did the above override but my new listings page is looking funky, you can see it here:

http://dropyourdrawers.brinkster.net/shop/index.php?main_page=products_new

Please help!

GENIUS thread... just what I was looking for.... was also able to manipulate the code and apply it to ALL LISTINGS as well as NEW LISTINGS...

It's so much better for the customer to view columns as you can fit many more products on one page with minimal scrolling.

Just wanted to write and thank you for posting such a useful thread.

pjb923:

If anyone has any problems, post them here and I'll see what I can do to help.
Here is my modified tpl_products_new_listing.php file in includes/templates/CUSTOM/templates.
I think I have followed instructions verbatim and also modified my stylesheet.
Nevertheless, I still get the center column.
Looking at the div showing I don't see div new_products but div .centerBoxContentsNew centeredContentback
Please bear in mind that I don't show new products on main page, this is just something that pops up after emptying shopping cart, so I'm not sure that the same module applies.
Anyway, here is the file:
PS. It would be nice to just post a modified version of the file.

I am using v 1.3.8a. I followed all the instructions but am confused as to what I may have missed.

1. How do I remove the Add: box ?

2. The Displaying 1 -4 is not correct

3. I removed <?php echo $display_products_description; ?>

because the description was showing; not sure if this was the right thing to do??

please see attached pic.

How do I fix these problems?

Thanks

This is my first attempt at anything like a contribution for zen cart, and while it is working great for me (three columns of items with fairly big thumbnails and no display of description) it may not work for you at all, but ought to give you a jumping off point for making some additional quick tweaks on your own. Furthermore, it has mostly been hacked from the post by pjb923 on 19th April 2007 but the forum also shows many people still struggling with it (as I have) and likewise probably searching contributions in vain too.

I attach a zipped README and the two altered template files to make this quick and easy for others, and with much humble thanks to those who made it so easy for me.

HI dweb, do you have a working link to show it working? Also, do you have a change log on what you did you make it work?

Thanks!

just got it up and operational, http://faerie-dreams.com had been an OSC shop for years and is now ZENNED :)

I did all the various posted stuff from this thread and added a few more tweaks. Just compare the files, or try them out while keeping your old ones backed up. It probably ought to work right out of the box for you, with just the very few other changes mentioned in the readme (adding the manufacturer's id to the query to enable the link from each mfg name to that page.)

@dweb
I find this part of the readme confusing

...in the admin pages Configuration -> New Listing and Configuration -> All Listing. I left a single space after all but the last item, and have disabled the space after the item name since this is now tagged as an h3 header.
In fact, the Zen Cart explanation for these entries is confusing, so please do me a favor, post the Configuration you used.
Thanks.

Hi and thanks :) I repeat the beginning of the sentence you quote the last bit of, I was referring to trying to find a hardcoded location for the sequence and spacing of items: there isn't one. The four-digit config value determines what column, sequence and spacing to use. The last digit has, I think, for the image at least, been disabled. The other items I left 'single spaced', i.e. only one break tag generated, by ending the four-digit sequencer number with a '1'

I also found after many hours of trying to read code that the sequence of the items shown and spaces after each are managed the zen way, in the admin pages Configuration -> New Listing and Configuration -> All Listing.

zen way:
0= off
1st digit Left or Right
2nd and 3rd digit Sort Order
4th digit number of breaks after

New Listing
Display Product Image 1104
Display Product Quantity 0
Display Product Buy Now Button 0
Display Product Name 2101
Display Product Model 0
Display Product Manufacturer Name 2301
Display Product Price 2400
Display Product Weight 0
Display Product Date Added 0
Display Product Description 0
Display Product Display - Default Sort Order 6
Default Products New Group ID 21
Display Multiple Products Qty Box Status and Set Button Location 3
Mask Upcoming Products from being include as New Products 0

All Listing
Display Product Image 1101
Display Product Quantity 0
Display Product Buy Now Button 0
Display Product Name 2101
Display Product Model 0
Display Product Manufacturer Name 2301
Display Product Price 2400
Display Product Weight 0
Display Product Date Added 0
Display Product Description 150
Display Product Display - Default Sort Order 6
Default Products All Group ID 23
Display Multiple Products Qty Box Status and Set Button Location 0

-m

dweb:

I repeat the beginning of the sentence you quote the last bit of...
Thanks for lightning-fast answer.
I trim quotes in order not to clutter the pages.
You are doing a great job, and I think that this mod will have to be posted to the contributions area, after some more testing.
I will test it out thoroughly and give you my feedback.
One more question:
} else {
echo TEXT_NO_NEW_PRODUCTS;
}
at the end of your mod for new products you wrote the above.
You are printing (echoing) a variable from the database.
Where did you get that variable from?
It is not in the original file.

@dweb,
While I am at it.
I don't understand this:

1st digit Left or RightYou say that it is the column number (what column).
However, you are coding for displaying images in 3 columns, some settings are for column 1 and some for column 2 in your Config settings.
Display Product Image 1104...
Display Product Name 2101
Display Product Model 0
Display Product Manufacturer Name 2301
Display Product Price 2400Please clarify.
Also, what does Left or Right mean?

ckosloff:

One more question:
} else {
echo TEXT_NO_NEW_PRODUCTS;
}
at the end of your mod for new products you wrote the above.
You are printing (echoing) a variable from the database.
Where did you get that variable from?
It is not in the original file.

Sorry, no clue, but a construct like 'TEXT_NO_NEW_PRODUCTS" isn't from the database but a defined text string from a language file defining the statement you'd like to say there. If my page shows "TEXT_NO_NEW_PRODUCTS" then I'd dig into /includes/languages/english/page-name and add a define for it.

HTH?
-m

dweb:

If my page shows "TEXT_NO_NEW_PRODUCTS" then I'd dig into /includes/languages/english/page-name and add a define for it.
Thanks for explanation.
I see that this line was added by previous contributor.
Now the remaining doubt about the "zen way"
How does the first digit work?

Ah, these are parts of the stock zen admin where in a bunch of places there are these gizmos to fiddle with the layout template system as simply as possible while accommodating the usual three column layout inherited from OSCommerce, where you had to edit the core files in the store to move things from left to right or to a single column or whatever. If you're into text edits on critical system files (I am, BTW) that was easier -- but only until you get beyond the first layer and don't need to upgrade or add anything else (which I ALWAYS do.)

So... zen way, first digit Left or Right means the number is not a number per se, but a string of digits. If the first digit is zero, the item is not displayed at all. 1, it goes in the Left column IF the object you're placing it in HAS a left and right, which this contrib does not. I haven't fiddled with the numbers that much but I bet from recalling the code that all the left items are drawn, then the right ones, so if they were numbers in fact they'd all be drawn in numerical order. If you have two items marked as, say, 1201, I'm not sure which one would come first but it would be whichever is first in the code I suppose. There are two big loops running around all possible items and incrementing the display code numbers, saying "draw it now" when the first three numbers match the current increment, and drawing enough break tags after that to match the last digit.

The columns are NOT controlled in admin and are kinda not true tabular columns at all (though they appear as such) but are boxes set to flow into place and float to the left against the previous one. The sizes are set by your thumbnail dimensions mostly and the purpose of the counter you would need to change to get a different number of columns is simply drawing a break clear=all tag to keep boxes from running into each other if they're different heights. Admin does, however, provide another place to say how many boxes to put on the page; it ought to be set to a multiple of you # of columns.

-m

hmm, seven minute limit huh? I'm adding another line again: for a different # of columns you'll need to change the style also. ```
width: 32.5%;

dweb:

I'm adding another line again...
Yo dweb,
Am I seeing double?
That line was already included in your readme.
Apart from that, great explanation on those digits and how they were ported from OSC, you may be a new zenner, but your long experience with OSC shows.
Anyway, I will need to play around with those numbers to really understand how they work and what they do.

Yeah, that line was in the addition to the styles, but the point is, it goes along with three columns. If you have smaller thumbs and/or wider pages you'd need to change it. Maybe for 4 columns I'd go with 24.5%, five -> 19.5% or so, and check in IE to be sure it doesn't blow up. Gotta love style sheets!

I also changed the tpl_modules_products_all_listing.php in the same manner and now have a 3 column list for my view all products page. Thanks for sharing .. I knew it could be done, just needed some pointing in the right direction :clap:

You guys are great!

:smartalec:

@dweb,
So I loaded all your modifications to a test site.
I don't have New Products there so couldn't test for them yet.
All products work but there is a glitch: while they display in three columns, the last row shows only 1, and this for all pages.
Also, my empty cart still shows a 1-column centered layout for "new products for $month".
Please help.
Thanks.

Why not using a module that is coded for this very specific purpose?

http://blog.rubikintegration.com/2009/08/08/speed-up-your-zencart-development-by-using-single-listing-template/