My Cart

You have no items in your shopping cart. Buy products from our webshop

Display related products with working product count and pagination

We recently completed a webshop where a considerable number of products had over 20 related products. Normally related products in Magento are displayed in a small box on the right side of the page, but in our case it was important that the related products were presented in the same look and feel as products on a 'normal catalog page'. Moving the related products from the right column to the bottom of the 'product-view-page' was not big of a deal, but creating pagination and display the right product count was quite a challenge. You can see a working example here, here or here and this is how we did it:

Step 1:Make a copy of your original /app/code/core/Mage/Catalog/Block/Product/List/Related.php to  /app/code/local/Mage/Catalog/Block/Product/List/Related.php. Change the complete contents to:

As you can see, we again use a big part of list.php to duplicate the toolbar functionality. The way we use $_GET to retrieve the current page number ain't pretty, but its quick and effective and I didn't want to create a complete module. Change the number in ->setPage($page,20) to adjust the amount of products displayed per page.

Step 2: Take a look at your /app/design/frontend/default/yourtheme/template/catalog/product/list/related.phtml. Since we use big parts of lists.php for creating the 'custom product collection', we have to do some small adjustments. Replace <?php foreach($this->getItems() as $_item): ?> with <?php foreach ($_productCollection as $_product): ?> and $_item with $_product. .Also, don't forget to put <?php echo $this->getToolbarHtml() ?> in the block-content div. You'll end up with something like this:

Step 3: Last but not least, update your catalog.xml (/app/design/frontend/default/yourtheme/layout/catalog.xml). In our case, I wanted to reposition the related products block to the center of the product view page, so between the <catalog_product_view> (and the reference name="content") tags I put the following:

Now you can style your related products template file (step 2) the way you want it and have some pagination awesomeness. You'll also see that the product count in the toolbar is displayed correctly too. This same method will probably also work if you want build pagination / a working toolbar for crossell's or upsell's in Magento. For questions you can always comment to this blog entry, have fun!

Erwin Otten

Erwin Otten is a Web Designer / Graphic Designer from Oude Wetering (The Netherlands) and co-founder of Hachmang & Otten. With an education in communication & multimedia design, he is passionate about web design at all levels including (information) architecture, interaction, code, and graphic design. Contact Erwin Otten

Comments
  • Ruud

    (okt 26)
    Reply to this comment

    The script doesnt work (at least not for magento 1.5). The toolbar shows up, but the products wont. Any idea?

Comment and contribute