Add a Custom Tab to Product View Page using Custom Module - Magento

Question

I am working on creating a custom Module that adds a Custom Tab in Product View Page which has a form for users to enter certain information. I am using default/modern theme so I already do have tabs on Product view page and I want my custom Tab to show up next to them.

This information that users enter should be editable and viewable in the back end too in form of a Grid or something.

Now I have started creating my own module but I am confused in going ahead with a few things. Stack Overflow has been very helpful in increasing my Magento knowledge so I thought best to ask the experts before proceeding.

1) In order to get my tab show up on product view page, what should my layout file look like?

2) How do I pass the information of my tab in catalog.xml file?

3) If I want this section to show up under Catalog section of Admin, then which files I need to change? Do I need to extend any core files?

This is my file structure so far

Companyname
 Modulename
  etc >> config.xml
  Helper >> Data.php
  sql >> module_setup >> mysql4-install-0.1.0.php
  Model >> Module.php
   Mysql4 >> Module.php
    Module >> Collection.php
  Block

  design
   default
     modern
      layout >> module.xml
      template >> module >> module.phtml

I am following a tutorial and all my files have got content similar to this link upto the part where the Frontend template is added. I haven't yet started writing the code for Admin section and thought of clearing my concepts prior to that.

Any suggestions/input is more than appreciated. Thanks.

EDIT: This is my module's design layout file. app/design/frontend/default/modern/layout/cm_askquestion.xml

  <?xml version="1.0"?>
  <layout version="0.1.0">
    <catalog_product_view>
      <reference name="product.info.tabs">          
            <block type="cm_askquestion/list" name="catalog.ask.question" template="cm_askquestion/list.phtml" >
    <block type="core/template" name="question.form" as="questionForm" template="cm_askquestion/form.phtml" />
      </reference>
     </catalog_product_view>    
   </layout>

This is my app/design/frontend/default/modern/layout/catalog.xml file

    <catalog_product_view translate="label">
    <label>Catalog Product View (Any)</label>
      <reference name="content">
        <block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
               <action method="addTab" translate="title" module="catalog">
                  <alias>description</alias>
                  <title>Product Description</title>
                  <block>catalog/product_view_description</block>
                  <template>catalog/product/view/description.phtml</template>
               </action>        
       <action method="addTab" translate="title" module="catalog">
          <alias>askaquestion</alias>
          <title>Ask a Question</title>
          <block>cm_askquestion/list</block>
          <template>cm_askquestion/list.phtml</template>
           </action>
         </block>

My list.phtml contains a link called 'Ask a Question' which is used to open up the form

       <p><strong><a href="#question-form" id="add-question"><?php echo $this->__('Ask a question'); ?></strong></a></p>
       <!-- code to display answered questions-->
       <?php echo $this->getChildHtml('questionForm'); ?>

And my form.phtml starts like this,

       <a name="question-form"></a>
       <form action="<?php echo Mage::getUrl('askquestion/index/addQuestion'); ?>" id="questionForm" method="post" style="display: none;">
       <!-- code to display product question form -->
       <script type="text/javascript">
        //<![CDATA[
        $('add-question').observe('click', function(event){
        $('questionForm').toggle(); 
       });
       var contactForm = new VarienForm('questionForm', true);
       //]]>
       </script>

Please point out what am I doing wrong and how can I get to open the form in the same tab on the click of the link.

Answer 1

try this links :

• Adding Tabs in Product View Page Through Layout
• Magento Admin Module

-- EDIT --

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

// should be ( not child element, block alias as described in tutorial )

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

Answer 2

My solution:

<catalog_product_view>
   <reference name="product.info">
         <!-- Add tabs -->
         <block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml">
             <action method="addTab" translate="title"><alias>comparative</alias><title>Comparative</title><block>core/template</block><template>catalog/product/view/comparative.phtml</template></action>
          </block>
     </reference>
</catalog_product_view>

The template file (example.phtml) must exist.