Related products in tab

How can I put related products in a tab?

I created a tab active in a category of products and vorreri than inside it shows the products are related ... how can I do??

hi

Hi cicciuzzo,

You need to modify the view of the Tabs and add a new tab with the related products.
Edit this file Plugins\SevenSpikes.Nop.Plugins.NopQuickTabs\Views\ProductTab\_ProductTabs.cshtml and add the code below on line 206.

@{
                    var relatedProducts = Html.Action("RelatedProducts", "Catalog", new {productId = Model.ProductId});
                    divs.Add(new KeyValuePair<string, string>("tabs-rp", relatedProducts.ToString()));
                    <li><a href="#tabs-rp">Related Products</a>
                    </li>
                }  

This code will add a new tab with the related products.
Please note that you should NOT have Ajax enabled in the tabs.

Hope this helps!

Thank you very much.

I tried it and it works...

you can use the same system to add additional tab with further information?

Hi cicciuzzo,

Yes, you can call any action in the views of our plugins. That is the benefit of having the plugin Razor views (.cshtml) open to modification. You have a lot of power to extend them to your needs.

Thanks

Hi

the height of the Tab in related product is 0px while in other tabs is ok

why?

hi

Hi cicciuzzo,

I am not sure what exactly the problem is. Could you send us a link to your web site, so that we can take a look?

Thanks

Hi

Is this possible to do in version 3.80?

The code stops at line 45 so I assume the page has been updated as you said to paste it at line 206.

Thanks

Peter

Hi Peter,

Yes, the code has changed since 3 years ago. Also it may vary from theme to theme so I would advise you to submit a ticket and specify the theme that you are using and we will advise what needs to be done exactly to have the related products into a tab.

Did you find out what the code is for the newer versions?

Hello,

In order to achieve that you will need to edit the ~/Plugins/SevenSpikes.Nop.Plugins.NopQuickTabs/Views/Components/ProductTabs/_ProductTabsWithoutAjax.cshtml file.

In the file, you will see 2 commented sections that show how to add a custom tab that displays a topic. You will need to uncomment that code and make some changes to it.

The changes are as follows:

In the first commented block change the

<li><a href="#quickTab-ShippingInfo">@T("ShippingReturns")</a> </li>

with this:

<li><a href="#quickTab-RelatedProducts">@T("products.relatedproducts") </a> </li>

In the second commented block change

<div id="quickTab-ShippingInfo">
        @await Component.InvokeAsync("TopicBlock", new { systemName = "ShippingInfo" })
        </div>

to

    <div id="quickTab-RelatedProducts">
        @await Component.InvokeAsync("RelatedProducts", new { productId = Model.ProductId })
    </div>

Note: You may need to write additional styling for the tab. Unfortunately, customizations are out of the scope of our support and we cannot help you with that.

Hope that helps!