I have created a custom module to display the custom product tabs on the product page in magento2. These tabs are managed by attribute set in magento2 back-end. I want 4 tabs to display on the product page, but there is a problem that magento2 will be showing only the first attribute tab on the product page while on front-end or back-end. I want them all. I have created reference blocks for XML route. Here is the catalog_product_view.xml file (\Product\Tabs\view\frontend\layout) code
<?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="Magento\Catalog\Block\Product\View" name="new.tab" template="Product_Tabs::new_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Benefits</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View" name="new1.tab" template="Product_Tabs::new_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">How To Use</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View" name="new2.tab" template="Product_Tabs::new_tab.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">How To Close</argument>
</arguments>
</block>
<block class="Magento\Catalog\Block\Product\View" name="new3.tab" template="Product_Tabs::new_tab.phtml" group="detailed_info" after="news.tab">
<arguments>
<argument translate="true" name="title" xsi:type="string">Options</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
This new_tab.phtml file in templates (\Product\Tabs\view\frontend\templates) where I have calling the attribute code see the code here
<?php
/** @var \Magento\Catalog\Block\Product\View $block */
$product = $block->getProduct();
?>
<div class="value"><?php echo $product->getData('benefits'); ?></div>
<div class="value"><?php echo $product->getData('how_to_use'); ?></div>
<div class="value"><?php echo $product->getData('how_to_close'); ?></div>
<div class="value"><?php echo $product->getData('options'); ?></div>
And here is the install data for database file InstallData.php
<?php
/* app/code/Product/Tabs/Setup/InstallData.php */
namespace Product\Tabs\Setup;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
/**
* @codeCoverageIgnore
*/
class InstallData implements InstallDataInterface
{
/**
* EAV setup factory
*
* @var EavSetupFactory
*/
private $eavSetupFactory;
/**
* Init
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory)
{
$this->eavSetupFactory = $eavSetupFactory;
}
/**
* {@inheritdoc}
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
/** @var EavSetup $eavSetup */
$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
/**
* Add attributes to the eav/attribute
*/
$eavSetup->addAttribute(
\Magento\Catalog\Model\Product::ENTITY,
'how_to_use',
[
'group' => 'Product Details',
'type' => 'text',
'input' => 'textarea',
'backend' => '',
'frontend' => '',
'label' => 'How To Use',
'class' => '',
'source' => '',
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_GLOBAL,
'visible' => true,
'required' => false,
'user_defined' => false,
'default' => 0,
'searchable' => false,
'filterable' => false,
'comparable' => false,
'visible_on_front' => false,
'used_in_product_listing' => true,
'unique' => false,
'apply_to' => ''
]
);
}
}
Everything is working fine but the problem is that there is only one tab showing in back-end and on front-end. Please suggest a solution on how to get all of these 4 tabs in both ends and working properly on product pages.
Thanks in advance.