Display related products with working product count and pagination

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!

H&O is expert in het oplossen van complexe Magento vraagstukken, maatwerk grafisch ontwerp en het bouwen van custom Magento modules.

Als je op zoek bent naar een partner die je kan helpen met het beantwoorden van moeilijke Magento vragen, een maatwerk productimport voor je ontwikkeld of een custom Magento module voor je schrijft die jouw assortiment met een andere webshop koppelt, dan ben je aan het juiste adres. H&O heeft zich sinds 2007 verdiept in de techniek en ontwikkelingen van het e-commerce CMS, speelt een actieve rol in de community, heeft verschillende modules uitgebracht en heeft voor klanten uiteenlopende technische modules ontwikkeld. Ons kantoor is gevestigd in Roelofarendsveen, direct naast de A4 én slechts op 15 minuten afstand van Amsterdam. Neem contact met ons op en kom eens langs, dan bespreken we jouw vraagstuk!

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?

Reageren

Genoemd op twitter

Topics

Recent Comments

Thanks for your contribution, Cyril :)
View comment 23 mei by Erwin Otten
In magento 1.7 i got solution with this :
1. in the Model file. (/app/code/core/Mage/Catalog/Model/Observer.php)
Function Name: _addCategoriesToMenu $categoryData = array( 'name' => $category->getName(), 'id' => $nodeId, 'url' => Mage::helper('catalog/category')->getCategoryUrl($category), 'is_active' => $this->_isActiveMenuCategory($category), // Add thumbnail 'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getThumbnail() );

2. in the Html folder. (app/code/core/Mage/Page/Block/Html/Topmenu.php)
Function Name: _getHtml if (!$childLevel == 0){ $url = false; if ($image = $child->getData('thumbnail')) { $urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail'); $html .= '<img src="'.$urls.'" />'; } } just after : " $html .= '<a href="' . $child->getUrl() . '"><span>' . $this->escapeHtml($child->getName()) . '</span></a>'; " (near ligne 115)
View comment 23 mei by Cyril
Guys, if you are having issues with permissions, you have to access https://accounts.google.com/DisplayUnlockCaptcha first, with whatever account you are trying to login with.
Once you do this, the module should start working
View comment 09 apr by Blair
Hoi Bas,
Dit kan verschillende oorzaken hebben, maar meestal heeft het te maken met Facebook’s caching. Wat je kunt proberen is even de facebook-cache te vernieuwen door de url van je pagina hier in te voeren, facebook update dan de thumbnail die je ziet bij het liken: http://developers.facebook.com/tools/debug
View comment 08 apr by Erwin Otten
Its Great!! Thanks!!
View comment 06 apr by Surendra Vikram Singh
De code werkt perfect bij mij op een punt na, ik krijg na het liken het standaard magento plaatje te zien op mijn facebook pagina, ten plaats van het product.. wie kan mij helpen!? deze functie zou een grote toevoeging kunnen zijn aan mijn site. ik hoor het graag :-)
View comment 03 apr by Bas