Display Product Specifications in Product Box?

v 4.60.6
I have searched in forums, but the topics did not help.

How can I display product specifications on catalog pages in _ProductBox.cshtml?

I don't want to use any plugins, because plugin will make my site slower...

Can you please give me a code for that?

Thanks in advance.

danielaguero wrote:

Anyone, please, help me with this?

Thanks.

danielaguero wrote:
A plugin is essential for enhancing maintainability for future version upgrades.
A well-crafted plugin should have minimal impact on site performance.
Alternatively, check how the product details page prepares specification attributes if you opt for source code customization. Adjust your product box model to include specification attribute information accordingly.
//Rashed

You can change the  prepareSpecificationAttributes 's default value to True from false for the PrepareProductOverviewModelsAsync method at IProductModelFactory interface and ProductModelFactory class, something like this

Task<IEnumerable<ProductOverviewModel>> PrepareProductOverviewModelsAsync(IEnumerable<Product> products,
    bool preparePriceModel = true, bool preparePictureModel = true,
    int? productThumbPictureSize = null, bool prepareSpecificationAttributes = true,
    bool forceRedirectionAfterAddingToCart = false)

And call the partial view _ProductSpecifications from _ProductBox.cshtml
Something like this

@await Html.PartialAsync("~/Themes/{YourThemeName}/Views/Product/_ProductSpecifications.cshtml", Model.ProductSpecificationModel)

Note that, once the prepareSpecificationAttributes 's default value is set to true then all the product's specification attributes are prepared which may have some performance impact. Also, the _ProductSpecifications.cshtml view is also used from the product's detail page so need to be careful while making any changes on the file (CSS,HTML)

sanju.dahal741 wrote:

So it requires changing source code?

sanju.dahal741 wrote:

Thank you so much.

Are there any ways to do that without touching the source code? :)

You can override an existing implementation either via a plugin (overriding existing implementation) or by modifying the existing code base. I don't think you could achieve what you are looking for without using a plugin or by without modifying the source code

A plugin is best.  It could be done in Razor .cshtml file alone, but that is still "touching the source code" ;)   And, it's going to require using the ProductModelFactory again to populate the Product Specifications, so it will impact performance.

For example, in the home page View, you could do this

@inject Nop.Web.Factories.IProductModelFactory _productModelFactory

@{
    var newModel = (await _productModelFactory.PrepareProductOverviewModelsAsync(Model.products, false, false)).ToList();
}

Then change this
@foreach (var item in Model)
to this
@foreach (var item in newModel)

Then in _ProductBox.cshtml you can call the partial view where desired - e.g.,
<div class="add-info">
   @await Html.PartialAsync("_ProductSpecifications", Model.ProductSpecificationModel)
    ...

Note that above just works for home page.  There are other areas that use the _ProductBox too.
Alternatively, one could modify _ProductBox itself to do the PrepareProductOverviewModelsAsync, but note that that method expects a list of products, and returns a list of ProductOverviewModel, so additional coding is needed.  And, it would probably perform a little worse, because of multiple awaits, etc.