Custom tab with product properties

I added a new column to our products table called "FeaturesDescription" (similar to the full/short description fields already there)

How can i get this field to display in it's own tab?

Hello,

You can add custom quick tabs but that will require some code customization. You will have to edit the ~/Plugins/SevenSpikes.Nop.Plugins.NopQuickTabs/Views/Components/ProductTabs/_ProductTabsWithoutAjax.cshtml (~/Plugins/SevenSpikes.Nop.Plugins.NopQuickTabs/YourThemeName/Views/Components/ProductTabs/_ProductTabsWithoutAjax.cshtml, where YourThemeName is your active theme name if you are using one of our themes).
You will have to uncomment lines 12:

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

and line 23-25:

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

That will display the Shipping Info topic as a tab. If you want to display your own information in your tab you will need to change a couple of things.

Firstly, from line 12 you will need to change the resource that is displayed as the tab name. Change @T("ShippingReturns") to show any other return by changing the string inside the @T() or just write your title in plain text.
After that, you will need to change line 24.
Now the code calls the TopicBlock view component. You will need create your own view component that will return the information from your new products table. The Invoke method of your component can have an int productId parameter so it knows for which product it is invoked.
After that you can change the code on line 24 like this:

 @await Component.InvokeAsync("YourComponentName", new { productId = Model.ProductId })

where the YourComponentName is your newly created view components name.

Note: If you want your custom tab to show on your public store you will need to uncheck the Enable Ajax setting in Administration -> Nop-Templates -> Plugins -> Quick Tabs -> Settings.

Note: This guide is written for nopCommerce versions 4.00 and above.

Hope that helps!

Anton, this is awesome.  Works great.

Couple small follow up questions:

1.)  Is it possible to hide the tab if my field doesn't have any content?
2.)  How would I adjust the display order?  Right now it's showing up last; preferably I would like it to be the 2nd tab

Hi,

You can display the tab on only the products that do have a content for that by changing the code order a bit.

At the top of the _ProductsTabsWithoutAjax.cshtml right under the @model TabUIModel you will need to invoke your component and save the returned data in a variable like this:

@{
    var tabDescription = @await Component.InvokeAsync("YourComponentName", new { productId = Model.ProductId });
    var isTabDescriptionEmpty = String.IsNullOrEmpty(tabDescription.ToHtmlString());
}

After that, you should wrap the tab name into an if statement:

 @if (!isTabDescriptionEmpty)
 {
      <li><a href="#quickTab-ShippingInfo">@T("ShippingReturns")</a> </li>
 }

and then down where the invocation of the component originally was you should write something like:

@if(!isTabDescriptionEmpty)
{
    <div id="quickTab-ShippingInfo">
        @tabDescription
    </div>
}

As for the ordering of the tab, you could either put it after all of the other tabs (like it is now) or before all of the other tabs. That is because all of the other tabs are displayed in a foreach iteration.
If you want your custom tab to be first you should just move the tab name before the foreach iteration that is right above it.

Hope that helps!

Awesome; thanks again.

We really need the tab to be 2nd in the list; first or last isn't going to work for us.  I have been able to do this by making a product specific tab out of the box and everything looks good.

Is there a way to make a shared tab that pulls from this field?  Or should I just implement the product-specific option?

Hi,

Well, you can actually make the tab be 2nd in the list but the code for it will not be pretty at all.
You can have the

@if (!isTabDescriptionEmpty)
{
      <li><a href="#quickTab-ShippingInfo">@T("ShippingReturns")</a> </li>
}

inside the foreach statement and only add it after the first iteration of the foreach.
That can happen by changing the foreach to a regular for iteration or adding an int variable "count" that will be incremented on each iteration.

Something like

int count = 0;

@foreach(var tabInfo in Model.Tabs) 
{
    @if (!isTabDescriptionEmpty && count == 1)
    {
      <li><a href="#quickTab-ShippingInfo">@T("ShippingReturns")</a> </li>
    }

    <li>
        <a href="#[email protected]">@tabInfo.Title</a>
    </li>

    count++; 
}

I wouldn't usually recommend such an approach but if you really have to make the tab to be on 2nd place in the list of tabs that is a way to do it.

Hope that helps!