Guy Labbé — blog about Web & graphic design

Magento : How to show new products in category list

In any normal e-commerce website, it is a good thing to obviously show which products are new. This way you attract attention of your regular visitors and maybe you sell more and you extend the lifetime customer value. Anyway, it is pretty normal to put these new products in front of others in the catalog, or at least to make them conspicuous.

Although Magento allows you to configure start and end dates for a product in order to show it as new, the default Magento template doesn't show it. This is the goal of this mini-tutorial : to show you how to show new products among old ones in a category list.

In fact, this is not complicated, you only have to know how to do it. This information I've found on this forum (french) doesn't seem to be well known over the internet, but giving such informations might help a lot improving the Magento Community. Anyway. I've summerized it, put it in a real example, and even provided it as a download for lazy developers.

First, in the product page of some product in Magento's backend, insert starting and ending dates for its newness state. To do a test, put (of course) a date before today's date, and a date which is later as today's date.

The code to add to access newness dates of a product is the following :

  1. <?php
  2.         // Limit dates for newness
  3.         $newFromDate = Mage::getModel('catalog/product')->load($_product->getID())->getNewsFromDate();
  4.         $newToDate = Mage::getModel('catalog/product')->load($_product->getID())->getNewsToDate();     
  5.  
  6.         // Date and time (now)
  7.         $now = date("Y-m-d H:m:s");
  8.                                                        
  9.         if($newFromDate < $now && $newToDate > $now) {
  10.                 echo "nv";     
  11.         }
  12. ?>

Variables $newFromDate and $newToDate get start and end dates of the active product during the loop. This data is only available if you did insert dates values in your product page. If you don't see any change when you'll reload the page, you may have not did this :)

The path of the file where to insert this code is named list.phtml is the following (just replace yourtheme by name of the theme you're using, default is default one) :

/app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

To add code for « list » mode, go to line 47, after this start of loop :

  1. <?php foreach ($_productCollection as $_product): ?>

For « grid » mode, go to line 93, after the same code as for « list » mode, or almost.

In both cases, you can place the code wherever you want, as soon it is within the loop. Here is what end of loops look like :

  1. <?php endforeach; ?>

If you followed this tutorial correctly, you should see at list a product with mention « This is new! ». If it doesn't work, you still can download the file (Magento v1.3.2.4) down this page or ask help in comments of this article!

AttachmentDateSize
[file] list.phtml22/11/09 12:21 pm7.06 KB
It's about

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <actionscript>, <apache>, <bash>, <dos>, <html>, <javascript>, <mysql>, <php>, <xml>.
  • Every instance heading tags will be modified to include an id attribute for anchor linking.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

  • Links to specified hosts will have a rel="nofollow" added to them.

  • Insert <!--tableofcontents [list: ol; title: Table of Contents; minlevel: 2; maxlevel: 3; attachments: yes;]--> to insert a mediawiki style collapsible table of contents. Arguments within [] are optional.

More information about formatting options