Column Layout for New Products Page

I have installed the column layout add-on and its working great for my product listing pages, however, it does't apply itself to the New Products Page (Whats New Page). How can I change the New Products page to a column layout?

Your New Product page is controlled in the admin under configuration --> Index Listing. Scroll near the bottom of the list and you will see, New Products Columns per row. Set that to match the setting in your grid layout and you're all set.

Ruth

thank you for your advice Ruth, but I checked and I already have that setting set to 5 columns per row, so that doesn't solve the problem. I think the setting you were referring to only applies to how the new products display on the main index page, not the new products catalog page.

I have to agree as well I am having the same problem:

See here: http://www.moppetfrocks.com/shop/index.php?main_page=products_new

and I have mine set to 3 like all the other pages :)

Any help would be appreciated!
~Renee

The New Products Centerbox and the New Products Listing are two different animals ...

The New Products Listing does NOT offer a method to have multiple products in a row ...

The New Products Centerbox does allow for: how many and how many per row ...

Both allow for setting "what" a New Product is in the Maximum Values based on products_date_added ...

So in other words for my particular problem I am outa luck at this time right :)

~Renee

Thanks for the quick answer !

Yeps ... the New Product Listing is not designed to do what you want and you would need to rewrite it ...

lol That wont be happening anytime soon from my end :laugh:...is that something someone would do for a fee and I will pass the info to the client?
~Renee

You could post in the Commercial Help Wanted and see if someone will quote you on this ...

Hi Red,
I just wanted to let you know what I decided to do since I don't know how to rewrite the code. It takes a little more work, but I created a category called What's New and I am manually linking new products to from other categories to the New category. It's not difficult, I'll just have to remove or add items to the What's new category by hand. (using the copy feature by the item I want to recreate in the what's new category).

Thanks, I'm aware of that route but honestly they add so much on a daily basis this would not be something I would recommend for their volume of business I would spend days going and editing just this one category. I need something that works on its own like the one that is there now, but with the 3 column layout I'm looking for someone in the "contract help" to pay to re write the script :)
~Renee

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.

Hi there,

Do you know how I could do that box look for the new products center box on the main page?

Hi!! First let me say your a genius!!:smartalec: Thank you thank you thank you!!!!

Can you have a look here and tell me how I would get the pagination links to show below the images instead of to the right of it?

http://www.moppetfrocks.com/shop/index.php?main_page=products_new

Thank you again!!!!:clap:

~Renee

Your welcome. I have been trying to do this mod for a long time, and was never able to figure it out until now.

To solve you problem add

<br class="clearBoth" />

to the last line of your tpl_modules_products_new_listing.php file.

That should have been included in my original code.

Also, I would suggest going to Configuration -> Maximum Values and changing "New Products Listing- Number Per Page" to either 9 or 12. That will give you nice even rows of 3 and get rid of the last line with only one item listed.

:laugh:You are awesome!!!!!! Thank you so much you have no idea what this means to my customers and me !!

Thank you again!!

~Renee

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">

> ```
<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 } ?>

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


I saw your.
The lovely one.
I also need a template like yours.

file:///D:/DOCUME%7E1/raj/LOCALS%7E1/Temp/moz-screenshot.jpgfile:///D:/DOCUME%7E1/raj/LOCALS%7E1/Temp/moz-screenshot-1.jpg

[quote=neelam.gahlyan;363127]I saw your.
The lovely one.
I also need a template like yours.
The menu bar in the upper and in the lower.
How can i get this

I'm not really sure who this is referring to but if you mean the Moppet Frocks site it is a custom bar and footer using image mapping and the side bar is a custom side box using images for buttons and then a custom sidebox underneath using the image map again :) So not really a template just a lot of adding on :smile:
~Renee

great, thank you very much, it works very well!!