1

I have added code for adding tab in app\code\Store\Nutrition\view\frontend\layout\catalog_product_view.xml. 

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
          <referenceBlock name="product.info.details">                            
            <block class="Magento\Catalog\Block\Product\View" name="nutrition" as="nutrition" template="Store_Nutrition::product/view/nutrition.phtml" group="detailed_info" after="additional">
             <arguments>
                <argument translate="true" name="title" xsi:type="string">Nutrition Facts</argument>                
             </arguments>
            </block>
        </referenceBlock>
        <move element="nutrition.tab" destination="product.info.details" after="additional"/>        
    </body>
</page>

On click of the tab an ajax request is sent which then fetches the data and displays in the tab. If the response is null the text is displayed as "No Data to display!"

Now if the response is null I do not want to display the tab.

I know I'll have to send the ajax request on some other event like page load or document ready so that I can get the response beforehand. However I don't know how to display or hide tab based on response.

| improve this question | |
1

When you create a tab in product detail, Magento itself create div with id like tab-label-tab-as-parameter-name. In your case Magento create a tab id like tab-label-nutrition and for tab content Magento create an div with id tab-as-parameter-name. In your case nutrition is id , so you can achieve it by,

jQuery.ajax({
    type: 'post',
    url: YOUR_URL,
    data: YOUR_DATA,
    success: function (data) {
        if(data.result==NULL){
            jQuery('#tab-label-nutrition').hide();
            jQuery('#nutrition').hide();
        }
    },
});

For that in your controller you need to send the response as JSON and you can also add some effect for hiding the tab.

| improve this answer | |
  • Somehow I am facing some issues. I am not sure if this code is the root cause. When I hit the product page and click on any of the tab(product description, more information or nutrition facts), the click does not trigger. I mean the hide/show does not work. Can you help? – Sejal Shah Sep 14 '17 at 14:08

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.