Showing related.phtml any where on product page

Question

I've been trying to positioning 'related' products and placing it elsewhere on the product page in a specific div layer. I have tried changing the catalog.xml layout, it shows fine but always shows after or before product info.

I would like it up in a div layer right of the price etc

I have tried calling it;

<div id="recommended-right"><?php echo $this->getChildHtml('related') ?></div>
</div>

When placing it in the div layer it doesn't show, only shows below everything else on the page.

the changes I've tried in the catalog.xml

<reference name="product.info">
            <block type="catalog/product_list_related" name="catalog.product.related" after="product.info" template="catalog/product/list/related.phtml"/>
                </reference>

Still no joy,

which is the best way to display related, crossell, upsell blocks anywhere you like?

Thanks in advanced.

Answer 1

Decent recent project example, granted remember there are quite a few custom extensions referenced so this will not be drag and drop, but you should be able to learn a lot from it.

<?xml version="1.0"?>

<layout version="0.1.0">

    <!-- Default handle, loaded on most pages -->
    <default>
        <!-- Removal of Default Magento Call outs  -->
        <remove name="left.permanent.callout" />  <!--the dog-->
        <remove name="right.permanent.callout" />  <!--back to school-->
        <remove name="paypal.partner.right.logo" />  <!--paypal logo-->
        <remove name="left.reports.product.viewed" /> <!--recently viewed prod-->
        <remove name="right.reports.product.viewed" /> <!--recently viewed prod-->
        <remove name="right.poll" />   <!--Poll-->
        <remove name="product_tag_list" />   <!--Product Tags-->

        <!-- Head Global CSS and JS updates -->
        <reference name="head">
            <!-- Remove Magento's default assets -->
            <action method="removeItem"><type>skin_css</type><name>css/print.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/styles-ie.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action>
            <action method="removeItem"><type>skin_css</type><name>css/widgets.css</name></action>
            <action method="removeItem"><type>skin_js</type><name>js/ie6.js</name></action>
            <action method="removeItem"><type>js</type><name>lib/ds-sleight.js</name></action>
            <action method="removeItem"><type>js</type><name>varien/menu.js</name></action>

            <!-- Add our assets -->
            <action method="addCss"><stylesheet>css/style-base.css</stylesheet></action>
            <action method="addCss"><stylesheet>css/style-theme.css</stylesheet></action>
            <action method="addCss"><stylesheet>css/style-custom.css</stylesheet></action>
            <!-- <action method="addItem"><type>js</type><name>jquery/jquery-2.0.2.min.js</name></action> -->
            <!-- <action method="addItem"><type>js</type><name>jquery/jquery-noconflict.js</name></action> -->
            <action method="addItem"><type>skin_js</type><name>js/script.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/jquery.fitvids.js</name></action>

            <!-- Custom Theme Javascript -->
            <action method="addItem"><type>skin_js</type><name>js/custom.js</name></action>

            <!-- Add Custom Fonts -->
            <block type="core/template" name="custom.fonts" template="page/html/fonts.phtml"/>

            <!-- Add additioanl child blocks -->
            <block type="core/template" name="boilerplate.head.meta" template="boilerplate/page/html/head/meta.phtml"/>
            <block type="core/template" name="boilerplate.head.ie8" template="boilerplate/page/html/head/ie8.phtml"/>
        </reference>

        <!-- Right Column Global -->
        <!-- Remove Unwanted Magento Defaults from Right column. Use unsetChild to remove from one section-->
        <!-- unsetChild removes this block on from the referenced section.  It's not a permanent removal like "remove" -->
        <reference name="right">
            <action method="unsetChild"><name>cart_sidebar</name></action>
            <action method="unsetChild"><name>catalog.compare.sidebar</name></action>
            <action method="unsetChild"><name>right.reports.product.compared</name></action>
            <action method="unsetChild"><name>right.reports.product.viewed</name></action>
            <action method="unsetChild"><name>wishlist</name></action>
            <action method="unsetChild"><name>sale.reorder.sidebar</name></action>
            <action method="unsetChild"><name>right.poll</name></action>

            <remove name="sale.reorder.sidebar"></remove>
        </reference>

        <!-- Left Column Global -->
        <reference name="left">
            <action method="unsetChild"><name>left.newsletter</name></action>
            <action method="unsetChild"><name>sale.reorder.sidebar</name></action>
        </reference>

        <!-- Top Links -->
        <reference name="top.links">
            <remove name="wishlist_link"/>

            <!-- Remove and re-add My Account link -->
            <action method="removeLinkByUrl"><url helper="customer/getAccountUrl" /></action>
            <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>1</position></action>

            <!-- Remove Cart/Checkout links and re-add Cart link only -->
            <remove name="checkout_cart_link" />
            <!-- <block type="checkout/links" name="checkout_cart_link_custom">
                <action method="addCartLink"></action>
            </block> -->
        </reference>

        <!-- Footer -->
        <reference name="footer">
            <block type="cms/block" name="footer_bottom" before="footer_bottom">
                <action method="setBlockId"><block_id>footer_bottom</block_id></action>
            </block>
        </reference>

        <!-- Ajax Cart -->
        <reference name="header">
            <block type="checkout/cart_sidebar" name="ajaxcart" template="ajaxcart/ajaxcart.phtml" before="-">
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>ajaxcart/ajaxcart/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>ajaxcart/ajaxcart/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>ajaxcart/ajaxcart/default.phtml</template></action>
                <block type="checkout/cart_totals" name="checkout.cart.totals" as="totals" template="checkout/cart/totals.phtml"/>
            </block>
        </reference>

        <!-- Footer Bottom -->
        <reference name="footer_links">
            <remove name="return_link" />
            <action method="removeLinkByUrl"><url helper="catalogsearch/getSearchTermUrl" /></action>
            <action method="removeLinkByUrl"><url helper="catalogsearch/getAdvancedSearchUrl" /></action>
            <action method="removeLinkByUrl"><url helper="catalog/map/getCategoryUrl" /></action>

            <!-- Dependent on utltilties Extension  -->
            <action method="removeLinkByUrl"><url helper="utilities/getUrl"><url>contacts</url></url></action>

            <block type="cms/block" name="footer_bottom">
                <action method="setBlockId"><block_id>footer_bottom</block_id></action>
            </block>
        </reference>

        <reference name="catalog.topnav">
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
    </default>

    <print>
        <reference name="head">
            <!-- Add our assets -->
            <action method="addCss"><stylesheet>css/style.css</stylesheet></action>
            <action method="addItem"><type>skin_js</type><name>js/script-ck.js</name></action>
        </reference>
    </print>

    <!-- Homepage a way to target the home page wihtout using the admin -->
<!--     <cms_index_index>
        <reference name="right">
            <block type="catalog/product/list" category_id="17" template="catalog/product/topselling.phtml" />
        </reference>
    </cms_index_index>
 -->
    <!-- Category Layered Navigation and Search Result Pages -->
        <!-- QUICK SEARCH -->

    <catalogsearch_result_index>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
            <!-- Available actions to add for different layouts -->
            <!-- <action method="setTemplate"><template>page/2columns-right.phtml</template></action> -->
            <!-- <action method="setTemplate"><template>page/3columns.phtml</template></action> -->
            <!-- <action method="setTemplate"><template>page/1column.phtml</template></action> -->
        </reference>
        <reference name="search_result_list">
                <action method="setColumnCount"><count>4</count></action>
        </reference>
        <reference name="product_list_toolbar">
            <action method="setTemplate">
                <template>catalog/blank.phtml</template>
            </action>
        </reference>
    </catalogsearch_result_index>

    <!-- ADVANCED SEARCH -->

    <catalogsearch_advanced_result>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="search_result_list">
                <action method="setColumnCount"><count>4</count></action>
        </reference>
        <reference name="product_list_toolbar">
            <action method="setTemplate">
                <template>catalog/blank.phtml</template>
            </action>
        </reference>
    </catalogsearch_advanced_result>


<!-- CATEGORY PAGE WITH LAYERED NAVIGATION  -->

    <catalog_category_layered translate="label">
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="product_list">
            <action method="setColumnCount"><count>4</count></action>
        </reference>
        <reference name="product_list_toolbar">
            <action method="setTemplate">
                <template>catalog/blank.phtml</template>
            </action>
        </reference>
    </catalog_category_layered>

<!-- CATEGORY PAGE WITHOUT LAYERED NAVIGATION  -->

    <catalog_category_default translate="label">
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="product_list">
            <action method="setColumnCount"><count>4</count></action>
        </reference>
        <!-- Set Template to a blank file to remove toolbar functionality. -->
        <reference name="product_list_toolbar">
            <action method="setTemplate">
                <template>catalog/blank.phtml</template>
            </action>
        </reference>
        <reference name="content">
            <block type="wordpress/sidebar_widget_posts" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/posts.phtml">
        <action method="setTitle"><title>Latest Posts</title></action>
        <action method="setPostCount"><post_count>5</post_count></action>
    </block>
        </reference>
    </catalog_category_default>

<!-- Product Detail Page -->
    <catalog_product_view translate="label">
        <!-- Set to single column layout -->
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
        <reference name="head">
            <action method="addItem"><type>skin_js</type><name>js/expander.min.js</name></action>
        </reference>
        <reference name="product.info.additional">
            <action method="unsetChild"><name>wordpress_posts_associated</name></action>
        </reference>
        <reference name="product.info">
            <block type="review/product_view_list" name="product.info.review_list" as="reviews" template="review/product/view/list.phtml" />
            <block type="review/form" name="product.info.review_form" as="review_form" template="review/form.phtml"/>
            <!-- <block type="wordpress/post_associated" name="wordpress.widget.recent_posts" as="recent_posts" template="wordpress/sidebar/widget/testimonial-custom.phtml">
                <action method="setTitle"><title>Customer Testimonials</title></action>
                <action method="setPostCount"><post_count>5</post_count></action>
                <action method="setExcerpt"><display>on</display></action>
                <action method="setFeaturedImage"><display>on</display></action>
                <action method="setPostType"><type>testimonial</type></action>
                <action method="setDate"><date>on</date></action>
            </block> -->
            <block type="wordpress/post_associated" name="wordpress_posts_associated" as="associated_posts" template="wordpress/sidebar/widget/testimonial-custom.phtml">
                <action method="setTitle" translate="title" module="wordpress"><title><![CDATA[Testimonials]]></title></action>
                <action method="setEntity"><type><![CDATA[product]]></type></action>
                <!-- <action method="setCount"><count>5</count></action> -->
            </block>
        </reference>

        <!-- remove product info options wrapper bottom -->
        <!-- <reference name="product.info.container1">
            <action method="unsetChild"><name>product.info.options.wrapper.bottom</name></action>
        </reference> -->
    </catalog_product_view>

<!-- Email a Friend page -->
    <sendfriend_product_send translate="label">
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
    </sendfriend_product_send>

<!-- Customer Account Dashboard  -->
    <customer_account>
        <remove name="sale.reorder.sidebar"></remove>
        <reference name="root">
            <action method="addBodyClass"><classname>my-account-wrapper</classname></action>
        </reference>
        <reference name="left">
            <!-- Remove cart from the left column -->
            <action method="unsetChild"><name>cart_sidebar</name></action>

            <!-- Remove Compare block, it is already inserted in DEFAULT section -->
            <action method="unsetChild"><name>catalog.compare.sidebar</name></action>
        </reference>
        <!-- Remove Unnecessary links using Swarming Custom Module -->
        <reference name="customer_account_navigation" >
            <action method="removeLinkByName"><name>downloadable_products</name></action>
            <action method="removeLinkByName"><name>OAuth Customer Tokens</name></action>
            <action method="removeLinkByName"><name>billing_agreements</name></action>
            <action method="removeLinkByName"><name>recurring_profiles</name></action>
            <action method="removeLinkByName"><name>tags</name></action>
            <!-- <action method="removeLinkByName"><name>wishlist</name></action> -->
            <action method="removeLinkByName"><name>newsletter</name></action>
            <action method="removeLinkByName"><name>reviews</name></action>

            <!-- Available links to remove

            <action method="removeLinkByName"><name>account</name></action>
            <action method="removeLinkByName"><name>address_book</name></action>
            <action method="removeLinkByName"><name>orders</name></action>
            <action method="removeLinkByName"><name>account_edit</name></action> -->
        </reference>
    </customer_account>

<!--
Load this update on every page when customer is logged in
-->

    <customer_logged_in>
        <reference name="top.links">
            <action method="removeLinkByUrl"><url helper="customer/getLogoutUrl" /></action>
            <action method="addLink" translate="label title" module="customer"><label>Log Out</label><url helper="customer/getLogoutUrl"/><title>Log Out</title><prepare/><urlParams/><position>2</position></action>
        </reference>
    </customer_logged_in>

<!--
Load this update on every page when customer is logged out
-->

    <customer_logged_out>
        <reference name="top.links">
            <action method="removeLinkByUrl"><url helper="customer/getLoginUrl" /></action>
            <action method="addLink" translate="label title" module="customer"><label>Log In</label><url helper="customer/getLoginUrl"/><title>Log In</title><prepare/><urlParams/><position>2</position></action>
        </reference>
        <remove name="reorder"></remove>
    </customer_logged_out>


<!-- Dealer Locator Page -->
<!-- Custom Extension Should replace  -->

    <ustorelocator_location_map>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
    </ustorelocator_location_map>

<checkout_onepage_success>
        <reference name="root">
            <action method="setTemplate"><template>page/1column.phtml</template></action>
        </reference>
    </checkout_onepage_success>
</layout>

Answer 2

Now while there maybe more issues. One clear one without looking at more of your code is you're calling the name of the block incorrectly. the section "name="catalog.product.related" defines the name that you call it. That being said, below is what your call should look like.

<div id="recommended-right"><?php echo $this->getChildHtml('catalog.product.related') ?></div>

Your reference name used in your .xml file maybe incorrect as well, but try this first

Sure there are really four parts helpful to know about the Magento xml structure.

1.) "name" this is how you reference a specific block within any of the xml files. You can call a block in a phtml file by this name. Only if an "as" name isn't specified.

2.) "as" you can define this if you choose, this name is used strictly for calling a block in .phtml files.

3.) getChildHtml('') the main way to call a block in a phtml file. The reason ('related') didn't work is because Magento couldn't find a block with a "as" or name" reference of related.

4.) the slugs

<default>, <catalog_product_view> etc. 

These define which pages these blocks can be utilized.

<default> = all pages   <catalog_product_view> = product detail pages.  

And many more.