Magento 2 : How to show/Hide custom tab on product detail page based on product attribute?
-
27-03-2021 - |
Question
I have created a product attribute like, display_custom_tab, if it is yes then show custom tab on product detail page, otherwise do not show tab.
can anyone please tell me how to write condition in xml or any other way to check condition.
Note : ifconfig will not work here, because product attributes are not stored in 'core_config_data'.
but tab is always showing on page. I want that if attribute is set to off, tab should hide.
This is my xml to show custom tab.
<referenceBlock name="product.info.details">
<block class="Magento\Catalog\Block\Product\View"
name="warrantyInfo.tab"
template="Product_CustomTab::custom_tab.phtml"
group="detailed_info">
<!--ifconfig="product/is_warranty_display"-->
<arguments>
<argument name="sort_order" xsi:type="string">40</argument>
<argument translate="true" name="title" xsi:type="string">Warranty Info</argument>
</arguments>
</block>
</referenceBlock>
Solution 5
Finally found the solution for this question.
https://mage2.pro/t/topic/121 worked for me.
So In my block file, wriiten a function that overrides toHtml to blank if my flag is off.
public function toHtml()
{
return $this->canViewWarrantyTab() ? parent::toHtml() : '';
}
function canViewWarrantyTab() {
/** @var Product $product */
$product = $this->attributes->getProduct();
// Find your attribute from $product variable and return true or false
if($product->getIsWarrantyDisplay()){
$this->warranty_info = $product->getWarrentyInfo();
return true;
} else {
return false;
}
}
Thank you so much all for help me out.
OTHER TIPS
Please make your code same as below code
In this example i have warranty_display attribute code for Warranty Display and warranty_info attribute code for Warranty Info.
Your catalog_product_view.xml
code should be
<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="warrantyInfo.tab"
template="Product_CustomTab::custom_tab.phtml"
group="detailed_info">
<!--ifconfig="product/is_warranty_display"-->
<arguments>
<argument name="sort_order" xsi:type="string">40</argument>
<argument translate="true" name="title" xsi:type="string">Warranty Info</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
your custom_tab.phtml
file code should be
<?php if($this->getProduct()->getWarrantyDisplay()): ?>
<?php echo $this->getProduct()->getWarrantyInfo(); ?>
<?php endif; ?>
When attribute enabled:
When attribute disabled:
Make sure you can get your attribute code in custom_tab.phtml
file.
Hope this will help you!
Please follow below step to display or remove tab into product detail page.
Create custom tab via module using below reference link
https://www.cloudways.com/blog/add-custom-tab-product-page-magento-2/
Then Create app/code/Cloudways/Mymodule/view/frontend/layout/catalog_product_view.xml file and past below 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="test.tab" template="Cloudways_Mymodule::custom_tab.phtml" group="detailed_info" >
<arguments>
<argument name="sort_order" xsi:type="string">40</argument>
<argument translate="true" name="title" xsi:type="string">Warranty Info</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Then update app/code/Cloudways/Mymodule/view/frontend/templates/custom_tab.phtml file and past below code.
<?php
$product = $block->getProduct();
$data = $this->getProduct()->getAttributeText('warranty_display');
?>
<?php if($data == 'Yes'): ?>
<h1 style="color: #1979c3">
<?php echo $product->getData('sku'); ?>
</h1>
<?php endif; ?>
- Then run setup upgrade command and clear cache.
- Then check product detail page and verify with your "warranty_display" attribute value
I am tested with magento 2.3 please check and let me known if you have any query.
Create these files in your module
Vendor/Module/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="Vendor\Module\Block\MyBlock" template="Vendor_Module::index.phtml" group="detailed_info">
<arguments>
<argument translate="true" name="title" xsi:type="string">Custom Tab</argument>
<argument name="sort_order" xsi:type="string">25</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
\Vendor\Module\Block\MyBlock.php
<?php
namespace Vendor\Module\Block;
class MyBlock extends \Magento\Catalog\Block\Product\View\Attributes
{
public function isCustomAttrAvailable()
{
/** @var \Magento\Catalog\Model\Product $product */
$product = $this->getProduct();
// Find your attribute from $product variable and return true or false
}
}
Vendor/Module/view/frontend/templates/index.phtml
<?php if($block->isCustomAttrAvailable()): ?>
<div class="additional-attributes-wrapper table-wrapper">
<table class="data table additional-attributes" id="custom-tab">
<caption class="table-caption"><?= $block->escapeHtml(__('Custom Tab')) ?></caption>
<tbody>
<tr>
<th>Hello</th>
<td>Custom Tab</td>
</tr>
</tbody>
</table>
</div>
<?php endif; ?>
Just override vendor\magento\module-catalog\view\frontend\templates\product\view\details.phtml
to
app\design\frontend\vendor\yourtheme\Magento_Catalog\templates\product\view\details.phtml
with below code
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @var \Magento\Catalog\Block\Product\View\Details $block */
?>
<?php
//Custom code
$_product = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\View')->getProduct(); ?>
<?php if ($detailedInfoGroup = $block->getGroupSortedChildNames('detailed_info', 'getChildHtml')):?>
<div class="product info detailed">
<?php $layout = $block->getLayout(); ?>
<div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
<?php foreach ($detailedInfoGroup as $name):?>
<?php
//Custom code start
if($name == 'warrantyInfo.tab'){// Your block name
if(!$_product->getDisplayCustomTab()){
continue;
}
}
//Custom code end
$html = $layout->renderElement($name);
if (!trim($html)) {
continue;
}
$alias = $layout->getElementAlias($name);
$label = $block->getChildData($alias, 'title');
?>
<div class="data item title"
data-role="collapsible" id="tab-label-<?= /* @escapeNotVerified */ $alias ?>">
<a class="data switch"
tabindex="-1"
data-toggle="trigger"
href="#<?= /* @escapeNotVerified */ $alias ?>"
id="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title">
<?= /* @escapeNotVerified */ $label ?>
</a>
</div>
<div class="data item content"
aria-labelledby="tab-label-<?= /* @escapeNotVerified */ $alias ?>-title" id="<?= /* @escapeNotVerified */ $alias ?>" data-role="content">
<?= /* @escapeNotVerified */ $html ?>
</div>
<?php endforeach;?>
</div>
</div>
<?php endif; ?>