Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
Related Products - Moving to Middle Column & Changing to Horizontal Layout
 
SpringMountain
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-04-19
Napa Valley, CA
 

[note: I’ve edited this post to show how I did this instead of asking]

There are some changes I’d like to make to the “related products” feature. Primarily, I’d like to use it to show similar products, not as a tool for selling accessories to the product the customer is purchasing, as shown in the Magento Screencast on related products.

Here’s what I want to do:

1. Move related products to below the product (long) description and tags entry form.
2. Remove and change the contents of the related products to match its new purpose.
3. Match style of surrounding elements.

I am referencing this page on my demo website throughout this thread:

 
Magento Community Magento Community
Magento Community
Magento Community
 
SpringMountain
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-04-19
Napa Valley, CA
 

Progress!

I did what I was supposed to do and read more of the Magento Designer’s Guide - Specifically the intro to layouts article.

The file layout>catalog.xml contains the line of code (around line 229)

<reference name="right">
            <
block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>
        </
reference>

I commented this out and copied this part:

<block type="catalog/product_list_related" name="catalog.product.related" before="-" template="catalog/product/list/related.phtml"/>

Then I pasted it (all over the place) until I found where it belongs, which is right above where it came from. Before the end of the </reference> and after the final end <block>

<block type="core/template_facade" name="product.info.container2" as="container2">
                    <
action method="setDataByKey"><key>alias_in_layout</key><value>container2</value></action>
                    <
action method="setDataByKeyFromRegistry"><key>options_container</key><key_in_registry>product</key_in_registry></action>
                    <
action method="append"><block>product.info.options.wrapper</block></action>
                    <
action method="append"><block>product.info.options.wrapper.bottom</block></action>
                </
block>
                <
action method="unsetCallChild"><child>container1</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
                <
action method="unsetCallChild"><child>container2</child><call>ifEquals</call><if>0</if><key>alias_in_layout</key><key>options_container</key></action>
            </
block>
        <
block type="catalog/product_list_related" name="catalog.product.related" after="-" template="catalog/product/list/related.phtml"/>
        </
reference>

But it is showing up at the top of the container, even thought the code is at the end. I then remembered from the designer’s guide that before="-” needed to be changed to after="-” to place it at the bottom. I think I’ll remember this one for future reference smile

Update: I have now moved Related Products to the main body container, and have positioned it as desired. Next up, change the links from “add to cart” to bringing the customer to the product page.  Also change the links from “add to wish list” to “compare products”. I’d also like to add the short description below the related product title.

 
Magento Community Magento Community
Magento Community
Magento Community
 
SpringMountain
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-04-19
Napa Valley, CA
 

More progress to report.

Most work is now here:
related.phtml (app>design>frontend>default>default>template>catalog>product>list>related.phtml)
view.phtml (app>design>frontend>default>default>template>catalog>product>view.phtml)

and boxes.css

- I removed the “add to wishlist”
- Images and product title now link to the respective product page, and no longer adds the product to the cart
- Styles have been matched using boxes.css, this gets a bit tricky later but for now all of what you need is located in the Product Detail Sidebar, 1111, mini-related-items

What I am trying right now (and could sure use some help with if you know the answer!), is inserting the product’s short description. I added 2 new css styles to separate the short description layout for related products from its primary display on each product page. I’m new to CSS and I’m not sure if this is how to do it, but it’s gotten me this far. I can’t get “quick overview” to be closer to the product name, but again I’m new to CSS and I’ll get it soon enough. The goal is to then have the description below it, and I hope to accomplish this today.

I’m getting there, and hope someone is benefiting from this info.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Michal_s
Sr. Member
 
Total Posts:  111
Joined:  2008-05-15
The Netherlands
 

and now youve got it, try using the xml file for all the modules and you will find the templates you need

 
Magento Community Magento Community
Magento Community
Magento Community
 
SpringMountain
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-04-19
Napa Valley, CA
 

OK - Nearly there.

I got everything aligned, fudged some CSS and as Thom says, everything is in its right place.

However, I still can’t seem to get short description to insert properly into my new version of the related products template (related.phtml). I can get the full description to work, however.

By clicking on this page you can see how the following code works just great:

<p><?php echo nl2br($this->getProduct()->getDescription()) ?><p>

Hover this code does not work in its place:

<p><?php echo nl2br($_product->getShortDescription()) ?><p>

and in a blind attempt at altering the code to match what is working, still no love:

<p><?php echo nl2br($this->getProduct()->getShortDescription()) ?><p>

nor does this:

<?php if ($_product->getShortDescription()):?>
                
                <?php 
echo nl2br($_product->getShortDescription()) ?>

Can anyone suggest what I’m doing wrong here? there is a description.phtml but not a shortdescription.phtml - is this why they need to be referenced differently? Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
SpringMountain
Jr. Member
 
Avatar
Total Posts:  20
Joined:  2008-04-19
Napa Valley, CA
 

Post weekend bump.

If I get some quick love here I can finish this post and call it RESOLVED.

I can’t seem to get short description to show up. I can get long description (as is now), but not the short. Examples of my failures can be seen in the above post.

95% complete. The story of my life!

link to the example page

 
Magento Community Magento Community
Magento Community
Magento Community
 
magelover
Member
 
Total Posts:  36
Joined:  2008-09-19
 

Hi...I’m stuck like you.

Did you ever manage to solve this? I’m trying to display also short description in the crossell block but I ended up getting the description for the main current product - and the same description gets repeated among all the products in the crossell block.

I’ve managed to show description in category view and everywhere else I needed it, but this one is a toughie.

Please help!

Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
cgfc
Sr. Member
 
Avatar
Total Posts:  92
Joined:  2008-08-29
Montevideo, Uruguay
 
biskitwheels - 16 September 2008 08:04 AM

Post weekend bump.


I can’t seem to get short description to show up. I can get long description (as is now), but not the short. Examples of my failures can be seen in the above post.

link to the example page

Did you try this:

<?php echo nl2br($this->getProduct()->getDescription()) ?>

works for me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ratupaul
Jr. Member
 
Total Posts:  1
Joined:  2008-11-06
 

I’ve used the method above to edit the catalog.xml and successfully moved them under the product info but, although the box is horizontally the same width, the related products appear as a vertical list.

Did anyone manage to get related products to actually display horizontally?

 
Magento Community Magento Community
Magento Community
Magento Community
 
impi_busy
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2009-02-18
 

hey guys,

i have done this successfully and i have related products in my middle column showing up exactly underneath upsell products.
here is how i have done this

i started out and based my development on the upsell products method.
firstly, i added the following code to my catalog.xml file (i have used a different theme so my changes won’t be lost when i upgrade and i can suggest you do the same)

catalog.xml

I added the following code under the product view section:
<!--
Product view
-->
<catalog_product_view>
<reference name="content">

<block type="catalog/product_list_related" name="catalog.product.related" as="product_additional_data" after="product.info.upsell" template="catalog/product/list/related.phtml"/>
            <
action method="setColumnCount"><columns>4</columns></action>
                    <
action method="setItemLimit"><type>related</type><limit>8</limit></action>

Explanation of above code:

I bring in the product_related data right after the product_upsell data. I then usedthe same method in the layout file to limit the columns and items to display. as you can see I set the columns to limit at 4 and the items to limit at 8

Then I went in to app/design/frontend/default/YOURTHEME/template/catalog/product/list/related.phtml and added the following code taken almost exactly from upsell.phtml - here is my complete file, and I am sure you can copy and paste the entire contents and it should work

<?php if(count($this->getItemCollection()->getItems())): ?>
<div class="collateral-box up-sell">
    <
div class="head"><h4><?php echo $this->__('Related Products'?></h4></div>
    <
table cellspacing="0" class="generic-product-grid catalog-listing" id="upsell-product-table">
    
<?php //$this->setColumnCount(4); // uncomment this line if you want to have another number of columns. also can be changed in layout ?>
    
<?php //if($_item->isComposite() || !$_item->isSaleable()): ?><?php //endif; ?>
    
<?php $this->resetItemsIterator() ?>
    <?php 
for($_i=0;$_i<$this->getRowCount();$_i++): ?>
            
<tr>
    
<?php //foreach($this->getItems() as $_item): ?>
    
<?php //var_dump($_item); exit;?>
            
<?php for($_j=0;$_j<$this->getColumnCount();$_j++): ?>
            <?php 
if($_item=$this->getIterableItem()): ?>
        
            
<td>
                <
class="product-image"><a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(125) ?>" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" width="125" height="125" /></a></p>
                <
h5><a href="<?php echo $_item->getProductUrl() ?>"><?php echo $this->htmlEscape($_item->getName()) ?></a></h5>
                
<?php echo $this->getPriceHtml($_itemtrue?>
                <?php 
echo $this->getReviewsSummaryHtml($_item?>
            
</td>
            
<?php else: ?>
            
<td class="empty-product">&nbsp;</td>
            
<?php endif ?>
            <?php 
endfor; ?>
        
</tr>
        
<?php endfor; ?>
          
</table>
        
        
<?php //endforeach ?>
        
    
<script type="text/javascript">decorateTable('upsell-product-table')</script>
</div>
<?php endif; ?>

I then had to start going into the core code to mimic the functions of Upsell.php
The file I am now going to edit is: app/code/local/Mage/Catalog/Block/Product/List/Related.php <---note the local part, so my changes won’t be lost when i upgrade magento

Edit: I see I am running out of caracters to use here so I’m saving this post and will continue on the next one…

 
Magento Community Magento Community
Magento Community
Magento Community
 
impi_busy
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2009-02-18
 

Post continued…

As I was saying now it’s time to create this file: app/code/local/Mage/Catalog/Block/Product/List/Related.php
Here is my code, you can copy and paste and it should work:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category   Mage
 * @package    Mage_Catalog
 * @copyright  Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license    http://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 */


/**
 * Catalog product related items block
 *
 * @category   Mage
 * @package    Mage_Catalog
 * @author      Magento Core Team <core@magentocommerce.com>
 */
class Mage_Catalog_Block_Product_List_Related extends Mage_Catalog_Block_Product_Abstract
{    
    
protected $_columnCount 4;

    protected 
$_items;

    protected 
$_itemLimits = array();
    
    protected 
$_itemCollection;

    protected function 
_prepareData()
    
{
        $product 
Mage::registry('product');
        
/* @var $product Mage_Catalog_Model_Product */

        
$this->_itemCollection $product->getRelatedProductCollection()
            ->
addAttributeToSelect('required_options')
            ->
addAttributeToSort('position''asc')
            ->
addStoreFilter()
        ;
        
Mage::getResourceSingleton('checkout/cart')->addExcludeProductFilter($this->_itemCollection,
            
Mage::getSingleton('checkout/session')->getQuoteId()
        );
        
$this->_addProductAttributesAndPrices($this->_itemCollection);

//        Mage::getSingleton('catalog/product_status')->addSaleableFilterToCollection($this->_itemCollection);
        
Mage::getSingleton('catalog/product_visibility')->addVisibleInCatalogFilterToCollection($this->_itemCollection);
        
     if (
$this->getItemLimit('related') > 0{
            $this
->_itemCollection->setPageSize($this->getItemLimit('related'));
        
}
        
        $this
->_itemCollection->load();
        
        
/**
         * Updating collection with desired items
         */
        
Mage::dispatchEvent('catalog_product_related', array(
            
'product'       => $product,
            
'collection'    => $this->_itemCollection,
            
'limit'         => $this->getItemLimit()
        ));

        foreach (
$this->_itemCollection as $product{
            $product
->setDoNotUseCategoryId(true);
        
}

        
return $this;
    
}

    
protected function _beforeToHtml()
    
{
        $this
->_prepareData();
        return 
parent::_beforeToHtml();
    
}
    
    
public function getItemCollection()
    
{
        
return $this->_itemCollection;
    
}

     
public function getItems()
    
{
        
if (is_null($this->_items)) {
            $this
->_items $this->getItemCollection()->getItems();
        
}
        
return $this->_items;
    
}
    
    
public function getRowCount()
    
{
        
return ceil(count($this->getItemCollection())/$this->getColumnCount());
    
}

    
public function setColumnCount($columns)
    
{
        
if (intval($columns) > 0{
            $this
->_columnCount intval($columns);
        
}
        
return $this;
    
}

    
public function getColumnCount()
    
{
        
return $this->_columnCount;
    
}

    
public function resetItemsIterator()
    
{
        $this
->getItems();
        
reset($this->_items);
    
}

    
public function getIterableItem()
    
{
        $item 
current($this->_items);
        
next($this->_items);
        return 
$item;
    
}

    
/**
     * Set how many items we need to show in upsell block
     * Notice: this parametr will be also applied
     *
     * @param string $type
     * @param int $limit
     * @return Mage_Catalog_Block_Product_List_Upsell
     */
    
public function setItemLimit($type$limit)
    
{
        
if (intval($limit) > 0{
            $this
->_itemLimits[$type] intval($limit);
        
}
        
return $this;
    
}

    
public function getItemLimit($type '')
    
{
        
if ($type == ''{
            
return $this->_itemLimits;
        
}
        
if (isset($this->_itemLimits[$type])) {
            
return $this->_itemLimits[$type];
        
}
        
else {
            
return 0;
        
}
    }
    
}

Now, after that you should have a nice related products block underneath your upsell products smile
See the screen grab of how it looks on my side:

If this post can make your life easier and make your day a little better, then I have accomplished the task of open source and the spirit of ubuntu.

Impi

Image Attachments
screen.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
MagentoMaggie
Jr. Member
 
Total Posts:  18
Joined:  2009-02-23
 

I love you, impi_busy!!! You are a lifesaver!!!

 
Magento Community Magento Community
Magento Community
Magento Community
 
furnitureforyoultd
Enthusiast
 
Total Posts:  833
Joined:  2009-03-09
 

I can’t seem to get this working correctly...I’ve followed all the instructions, but adding the code to catalog.xml makes no difference to the page. Any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pixxa
Sr. Member
 
Total Posts:  275
Joined:  2008-10-23
 

@impi_busy

Worked on 1.3.2 but broke on the new 1.3.2.1

[Mon Jun 01 23:22:25 2009] [error] [client x.x.x.x] PHP Fatal error:  Call to a member function getItems() on a non-object in /var/www/vhosts/domain.com/httpdocs/app/design/frontend/default/domain/template/catalog/product/list/related.phtml on line 1, referer: http://www.domain.com/collections/dutch.html

please advise.

 
Magento Community Magento Community
Magento Community
Magento Community
 
impi_busy
Jr. Member
 
Avatar
Total Posts:  24
Joined:  2009-02-18
 

hey bro!

i have looked around for you in the new code vs the old code i used. could not see any significant changes :(
can you confirm if the error still apears?

what i would suggest is a) make sure related products are assigned b) you display the products on a catalog page c) check code in upsell.php and compare it to your related.php file,

sorry i cannot be of more help at this stage,

impi

 
Magento Community Magento Community
Magento Community
Magento Community
 
Pixxa
Sr. Member
 
Total Posts:  275
Joined:  2008-10-23
 

Thanks for answering, It might had something todo with the new Magento Compiler extension. Had it enabled when it gave me the errors. Disabled it now and everything seems to work just fine.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2