0

Is it possible to add custom tab in product page remains in custom module(with out changing template of theme). if it's not possible help me in extending template of theme to adding custom tab in product page.

0

Yes its possible through your module instead of write code in theme file.

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.

0

Yes its possible you can do the same like this :

app/code/Vendor/Modulename/view/adminhtml/ui_component

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="demotab">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Custom Tab</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">15</item>
        </item>
    </argument>
    <container name="fieldname_container" >
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">160</item>
            </item>
        </argument>
        <htmlContent name="html_content_demo">
            <argument name="block" xsi:type="object">Vendor\ModuleName\Block\Adminhtml\Catalog\Product\Edit\Tab\Form</argument>
        </htmlContent>
    </container>
</fieldset>

Vendor\ModuleName\Block\Adminhtml\Catalog\Product\Edit\Tab\Form

<?php

namespace Vendor\ModuleName\Block\Adminhtml\Catalog\Product\Edit\Tab;

class Form extends \Magento\Backend\Block\Template
{
    /**
     * Block template
     *
     * @var string
     */
    protected $_template = 'Vendor_ModuleName::product/edit/customTab.phtml';

/**
 * @var \Magento\Catalog\Block\Adminhtml\Category\Tab\Product
 */
protected $blockGrid;

/**
 * Grid constructor.
 * @param \Magento\Backend\Block\Template\Context $context
 * @param array $data
 */
public function __construct(
    \Magento\Backend\Block\Template\Context $context,
    array $data = []
) {
    parent::__construct($context, $data);
}

/**
 * Retrieve instance of grid block
 *
 * @return \Magento\Framework\View\Element\BlockInterface
 * @throws \Magento\Framework\Exception\LocalizedException
 */
public function getBlockGrid()
{
    if (null === $this->blockGrid) {
        $this->blockGrid = $this->getLayout()->createBlock(
            \Vendor\Modulename\Block\Adminhtml\Catalog\Product\Edit\Tab\Grid::class,
            'customproduct.tab.tab'
        );
    }
    return $this->blockGrid;
}

public function getGridHtml()
{
    return $this->getBlockGrid()->toHtml();
}
}

I have added the grid so I used the Grid class in the above block.You can modify it according to your need

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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