How to display Manufacturer Part Number and GTIN in the PRODUCTBOX?

hello
i am using nopcommerce 4 point 50
i want to display manufacturer part number and GTIN (barcode field) in the _productbox.cshtml and in _producttemplates.simples.cshtml

can you please give me piece of code to do this?

thank you so much

Hi Arthur,

You can simply create widget plugin for product box and fetch GTIN and MPART number and display it.

For widget plugin, you can take reference from NivoSlider plugin.

1. add ManufacturerpartNumber and Gtin field at ProductOverviewModel here src\Presentation\Nop.Web\Models\Catalog

 public partial record ProductOverviewModel : BaseNopEntityModel
    {
        public ProductOverviewModel()
        {
            ProductPrice = new ProductPriceModel();
            DefaultPictureModel = new PictureModel();
            ProductSpecificationModel = new ProductSpecificationModel();
            ReviewOverviewModel = new ProductReviewOverviewModel();
        }

        public string Name { get; set; }
        public string ShortDescription { get; set; }
        public string FullDescription { get; set; }
        public string SeName { get; set; }

        public string Sku { get; set; }

         public string ManufacturerPartNumber { get; set; }
        public string Gtin { get; set; }

1. add ManufacturerpartNumber and Gtin field at PrepareProductOverviewModelsAsync method  here src\Presentation\Nop.Web\Factories

  public virtual async Task<IEnumerable<ProductOverviewModel>> PrepareProductOverviewModelsAsync(IEnumerable<Product> products,
            bool preparePriceModel = true, bool preparePictureModel = true,
            int? productThumbPictureSize = null, bool prepareSpecificationAttributes = false,
            bool forceRedirectionAfterAddingToCart = false)
        {
            if (products == null)
                throw new ArgumentNullException(nameof(products));

            var models = new List<ProductOverviewModel>();
            foreach (var product in products)
            {
                var model = new ProductOverviewModel
                {
                    Id = product.Id,
                    Name = await _localizationService.GetLocalizedAsync(product, x => x.Name),
                    ShortDescription = await _localizationService.GetLocalizedAsync(product, x => x.ShortDescription),
                    FullDescription = await _localizationService.GetLocalizedAsync(product, x => x.FullDescription),
                    SeName = await _urlRecordService.GetSeNameAsync(product),
                    Sku = product.Sku,
                    ManufacturerPartNumber = product.ManufacturerPartNumber,
                    Gtin = product.Gtin,
                    ProductType = product.ProductType,
                    MarkAsNew = product.MarkAsNew &&
                        (!product.MarkAsNewStartDateTimeUtc.HasValue || product.MarkAsNewStartDateTimeUtc.Value < DateTime.UtcNow) &&
                        (!product.MarkAsNewEndDateTimeUtc.HasValue || product.MarkAsNewEndDateTimeUtc.Value > DateTime.UtcNow)
                };

3. add those at _ProductBox.cshtml file here src\Presentation\Nop.Web\Views\Shared

@model ProductOverviewModel
@using Nop.Core
@using Nop.Core.Domain.Catalog
@using Nop.Core.Domain.Orders
@using Nop.Core.Domain.Tax
@inject CatalogSettings catalogSettings
@inject IWorkContext workContext
@{
    //prepare "Add to cart" AJAX link
    var addtocartlink = "";
    var shoppingCartTypeId = (int)ShoppingCartType.ShoppingCart;
    var quantity = 1;
    if (Model.ProductPrice.ForceRedirectionAfterAddingToCart)
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity, forceredirection = Model.ProductPrice.ForceRedirectionAfterAddingToCart });
    }
    else
    {
        addtocartlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = shoppingCartTypeId, quantity = quantity });
    }

    var addtowishlistlink = Url.RouteUrl("AddProductToCart-Catalog", new { productId = Model.Id, shoppingCartTypeId = (int)ShoppingCartType.Wishlist, quantity = quantity });
    var addtocomparelink = Url.RouteUrl("AddProductToCompare", new { productId = Model.Id });
}
<div class="product-item" data-productid="@Model.Id">
    <div class="picture">
        <a href="@Url.RouteUrl("Product", new { SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
    </div>
    <div class="details">
        <h2 class="product-title">
            <a href="@Url.RouteUrl("Product", new {SeName = Model.SeName})">@Model.Name</a>
        </h2>
        @if (catalogSettings.ShowSkuOnCatalogPages && !string.IsNullOrEmpty(Model.Sku))
        {
            <div class="sku">
                @Model.Sku
            </div>
        }
        <div class="sku">
            @Model.ManufacturerPartNumber
        </div>
        <div class="sku">
            @Model.Gtin
        </div>

Rashed Khan wrote:

thank you

but can i somehow do it without touching the core code please? :D
give me code example please

rajupaladiya wrote:

can you give me code example please without touching the core code of nop? :D

Here is the code example of widget plugins.
We can follow the those project.
Most of widget plugins are same. just you need to change names, view components, setting ( if any) etc.
https://github.com/nopSolutions/nopCommerce/tree/develop/src/Plugins

I add some code to existing Nivo Slider plugin. you can make your own widget plugin.

1. add WidgetZone to the Widget Zone list

public Task<IList<string>> GetWidgetZonesAsync()
{
   return Task.FromResult<IList<string>>(new List<string> { PublicWidgetZones.HomepageTop, PublicWidgetZones.ProductBoxAddinfoBefore });
}

2. add new model for extra info

namespace Nop.Plugin.Widgets.NivoSlider.Models
{
    public class ExtraInfoModel 
    {
        public string ManufacturerPartNumber { get; set; }
        public string Gtin { get; set; }       
    }
}

3. add ExtraInfo.cshtml page

@model Nop.Plugin.Widgets.NivoSlider.Models.ExtraInfoModel
<div class="sku">
   @Model.ManufacturerPartNumber
 </div>
 <div class="sku">
   @Model.Gtin
 </div>
 

4. implement logic for my widgetzone

public async Task<IViewComponentResult> InvokeAsync(string widgetZone, object additionalData)
{
  if (widgetZone == PublicWidgetZones.ProductBoxAddinfoBefore)
  {
    var productOverviewModel = (ProductOverviewModel)additionalData;
    var product = await _productService.GetProductByIdAsync(productOverviewModel.Id);
    var extraInfoModel = new ExtraInfoModel()
    {
      ManufacturerPartNumber = product.ManufacturerPartNumber,
      Gtin = product.Gtin
    };
    return View("~/Plugins/Widgets.NivoSlider/Views/ExtraInfo.cshtml", extraInfoModel);
  }