In Magento How to Show the Bundle Products Option in Front end Tab (Product View Page)

Question

In the front end product view page, I need to show the bundle product options in the custom Tab.

I have added the new custom tab in front end product view page.

I have pasted the below code in this file.

template/catalog/product/view/custom-tab.phtml

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
    <?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
    <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
    $_product = $this->getProduct();
    echo $_product->getName();

Here product name is showing, But bundle product option is not showing.

Please assist me. How to achieve this.

Answer 1

Not sure about your case, but let's imagine a common situation when you need to have a bundle product options selection in a custom tab. In the latest Magento versions product view tabs is handled by adding a block to the parent group named detailed_info. Here is an example of the product description tab:

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Description</value></action>
</block>

In the usual way you are able to insert child blocks to the tab's block (product.description in the example). So, in case of product options block you need to insert product options wrapper to the tab's block. If we extend the example below we will have the following code:

<block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml">
    <action method="addToParentGroup"><group>detailed_info</group></action>
    <action method="setTitle" translate="value"><value>Description</value></action>

    <!-- Here is the inserted product options wrapper block -->

    <block type="catalog/product_view" name="product.info.options.wrapper" as="product_options_wrapper_tab" template="catalog/product/view/options/wrapper.phtml" translate="label">
        <label>Info Column Options Wrapper</label>
        <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml"/>
        <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
            <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
            <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
            <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
            <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
        </block>
        <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
    </block>


</block>

After this you need to output the child inside of your template:

<?php echo this->getChildHtml('product_options_wrapper_tab'); ?>

And you should see the options list inside of the tab. In order to use the described snippet, you need to replace the tab's blocks name (product.description), template and alias to ones that correspond your custom tab. Also, make sure that you are not duplicate the product.info.options.wrapper in layout, otherwise it won't work.