Customize NopCommerce: Show Manufacturers or Brands on Home page

We are at Satva Solutions, we provide nopCommerce customization services to the worldwide. In this article, I am going to show you how to display Manufacturers or Brand list in a grid with an image on nopCommerce store home page.

Desired output would look like following:

manufacturers on home page of nopcommerce

Below are the Steps for Display Manufacturers or brands list on home:

  • Steps 1:

Add following file _ManufacturerHomePage.cshtml in folder Themes<YourActiveThemeName>ViewsCatalog

  • Step 2:

paste following text in _ManufacturerHomePage.cshtml


@model IList<ManufacturerModel>;
@{
    Layout = null;
}
@using Nop.Web.Models.Catalog;


<section class="our_client">
    
<h4 class="title"><span class="text">Manufactures</span></h4>


<div class="row">
        @foreach (var manufacturer in Model)
        {
            
<div class="span2">
                <a href="@Url.RouteUrl("Manufacturer", new { SeName = manufacturer.SeName })" title="@manufacturer.PictureModel.Title">

                    <img src="@manufacturer.PictureModel.ImageUrl" title="@manufacturer.Name" />
                </a>
            </div>

        }
    </div>

</section>


  • Step 3:

Open Index view (i.e homepage view) from Home Folder of theme and call partial view which we created at the place where you want to show a list of manufacturers.


@Html.Action("ManufacturerHomePage", "Catalog")

  • Step 4:

Now it’s time to create action in CatalogController.cs


  public ActionResult ManufacturerHomePage()
        {
            var model = new List&lt;ManufacturerModel&gt;();
//Get top 6 manufacturers, modify below value to show less or more number of manufacturers
            var manufacturers = _manufacturerService.GetAllManufacturers("",0,6,false);
            foreach (var manufacturer in manufacturers)
            {
                var modelMan = manufacturer.ToModel();

                //prepare picture model
                int pictureSize = _mediaSettings.ManufacturerThumbPictureSize;
                var manufacturerPictureCacheKey = string.Format(ModelCacheEventConsumer.MANUFACTURER_PICTURE_MODEL_KEY, manufacturer.Id, pictureSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured(), _storeContext.CurrentStore.Id);
                modelMan.PictureModel = _cacheManager.Get(manufacturerPictureCacheKey, () =&gt;
                {
                    var pictureModel = new PictureModel()
                    {
                        FullSizeImageUrl = _pictureService.GetPictureUrl(manufacturer.PictureId),
                        ImageUrl = _pictureService.GetPictureUrl(manufacturer.PictureId, pictureSize),
                        Title = string.Format(_localizationService.GetResource("Media.Manufacturer.ImageLinkTitleFormat"), modelMan.Name),
                        AlternateText = string.Format(_localizationService.GetResource("Media.Manufacturer.ImageAlternateTextFormat"), modelMan.Name)
                    };
                    return pictureModel;
                });
                model.Add(modelMan);
            }

            return View("_ManufacturerHomePage",model);
        }

That’s it.
Ideally, Manufacturers or brand list in nopAdmin should have a field called show on home page. which would only show checked records on nopCommerce home page.

Hope it was simple enough and helpful to you!  if you enjoy reading it feel free to share it and like. know more nopCommerce development tips and tricks on our blog.

By | 2017-07-03T18:24:23+00:00 August 9th, 2014|E-Commerce, How To, nopCommerce, Theme Customization, Tips and Tricks, Web Designing|