14

I want to add an extra tab on product detail page just like review tab, It will look like a product question tab. How can I do this?

My block file:

namespace Example\ProductQuestion\Block;

use Example\Framework\View\Element\Template;

class Question extends Template
{
    private $_productCollectionFactory;

    public  function __construct (
        Template\Context $context,
        \Magento\Catalog\Model\ResourceModel\Product\CollectionFactory $productCollectionFactory,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_productCollectionFactory = $productCollectionFactory;
    }

    public function getProduct()
    {
        $collection = $this->_productCollectionFactory->create();
        $collection->addAttributeToSelect('*')
            ->setOrder('created_at')
            ->setPageSize(5);
        return $collection;
    }
}
Improve this question
2

4 Answers 4

Reset to default
38

In Magento 2 to apply the new tab in product detail page is very easy task. Use below steps and check it out. It will display the tab in your theme.

  1. Create file catalog_product_view.xml in the app/design/frontend/{vender name}/{theme name}/Magento_Catalog/layout

In the file write the below code:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>      
        <referenceBlock name="product.info.details">
          <block class="Magento\Catalog\Block\Product\View" name="deliveryinfo.tab" as="deliveryinfo" template="product/view/delivery_info.phtml" group="detailed_info" >
             <arguments>
                <argument translate="true" name="title" xsi:type="string">Product Question</argument>
             </arguments>
          </block>
        </referenceBlock>
    </body>
</page>
  1. create the file delivery_info.phtml in the path app/design/frontend/{vender name}/{theme name}/Magento_Catalog/templates/product/view.

In the file you can write any content or you can call the static block like this

<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('delivery_info')->toHtml(); ?>
  1. delivery_info block we have to create in admin side Content/Block.

Now check in the Detail page.

Improve this answer
12
  • thank you for help me but after all your step, it seem nothing changes in my product page, would you check it again please, thank you very much
    – Trần Đăng Phong
    Commented Mar 15, 2016 at 13:14
  • It's working fine, Please clear your cache, and try again
    – Arunendra
    Commented Mar 15, 2016 at 13:52
  • i am using default theme of magento and dont'n have my own theme, is it a problem
    – Trần Đăng Phong
    Commented Mar 15, 2016 at 14:34
  • Yes it's the problem you need to create your own theme here is the link devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/…
    – Arunendra
    Commented Mar 16, 2016 at 4:59
  • however i want to compile code in app/code/Myname/..., it just like an extension and really add new theme is unecessary, can you help me
    – Trần Đăng Phong
    Commented Mar 16, 2016 at 18:31
7

Finally i got it:
In catalog_product_view:

    <body>
        <referenceBlock name="product.info.details">
          <block class="Vendor\ModuleName\Block\Product\View\Attributes" name="product.question" template="product/view/attributes.phtml" group="detailed_info">
              <arguments>
                <argument translate="true" name="title" xsi:type="string">Product Question</argument>
              </arguments>
          </block>
        </referenceBlock>
    </body>

And all I need is attributes.php file as the same as core folder in Mymodule/Block/Product/View/Attributes.php, copy all or replace some line of code if you want, change the namspace and you get it

Improve this answer
6

Try this code

app\code\[NameSpace]\[ModuleName]\view\frontend\layout\catalog_product_view.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
      <referenceBlock name="product.info.details">
          <block class="Example\Examples\Block\[Blockname]" name="example.tab" template="Example_Examples::success.phtml" group="detailed_info">
              <arguments>
                  <argument translate="true" name="title" xsi:type="string">Your Title</argument>
              </arguments>
          </block>
      </referenceBlock>
   </body>
</page>

Using this you can create tab in product detail page like review tab

In your block file 

public function getProduct(){
    $collection = $this->_productCollectionFactory->create();
    $collection->getCollection()
                ->addAttributeToSelect('*')
                ->setOrder('created_at')
                ->setPageSize(5);
    return  $collection;
}

You forget getCollection()

Improve this answer
7
  • i follow your help and create a block, but nothing seem to work, i disable cache and it still nothing change, can you tell me more detail please
    – Trần Đăng Phong
    Commented Mar 15, 2016 at 13:16
  • can you check var/log/system.xml file?
    – ND17
    Commented Mar 15, 2016 at 13:31
  • i checked it and nothing went wrong
    – Trần Đăng Phong
    Commented Mar 15, 2016 at 14:37
  • can you show your block file?
    – ND17
    Commented Mar 16, 2016 at 10:18
  • my block file under Block/Question.php
    – Trần Đăng Phong
    Commented Mar 16, 2016 at 18:23
1

You can add new tab on product detail page. I have already answer of this question, You can check my answer on "My Custom product tab not displaying in Magento 2".

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.