We Do Tech, stuff.

Small business web and system solutions.

Free programs, software reviews, and tech, stuff.

nopCommerce - Display Recent Blog Posts

by: Dan Orlovsky
Posted On: 8/17/2017 4:23:51 AM

Here I show one method for displaying recent blogs on your nopCommerce homepage.


Problem: I wanted to display recent blogs on my homepage in nopCommerce.  


What will not be covered: I ignored the WorkingLanguage altogether.  There are still many things I need to learn about in nopCommerce, and will take multi-language support into consideration when I extend nopCommerce's blogging functionality in a plugin.  For now, we are strictly just grabbing blogs.


Tools used: 

  • Visual Studio 2013 Express for Web
  • nopCommerce 3.60 

Implementation:

I started out very unfamiliar with the MVC architecture in general, which made nopCommerce even harder to understand.  After weeks of research, I felt I was ready to take on the task.  Here's how I made it happen:

I did a lot of digging into the News functionality to build this solution into the source.  I noticed there was a HomePageNewsModel, so first I wanted to create a new class to represent the HomePageBlogPosts model.  Find the "models" folder in the nop.Web project, and collapse it.  Right click the Blog folder and click Add -> Class, like so:

Name it HomePageBlogModel.cs.  Here is the code for this class:

using System;
using System.Collections.Generic;

namespace Nop.Web.Models.Blogs
{
    public partial class HomePageBlogModel
    {

        public HomePageBlogModel()
        {
            BlogPosts = new List<BlogPostModel>();
        }
        public IList<BlogPostModel> BlogPosts { get; set; }
        public int WorkingLagnuageId { get; set; }
    }
}

 

 The WorkingLanguageId is only a placeholder.  Now we have a model to use on our view, it's time to go to the "Controllers" folder and update the BlogController.cs, where we will fill the model with data and pass it on to our view.  Scroll to the bottom of the BlogController and add the following code:

#region NOPCUSTOM

public ActionResult HomePageBlogPosts()
{
    //Make sure the blog is enabled
    if (!_blogSettings.Enabled)
        return Content("");
    //Use blogService to grab the latest 3 blogs.  blogService automatically grabs them in descending order
    var blogPosts = _blogService.GetAllBlogPosts().Take(3);
    
    //Initialize a new model
    HomePageBlogModel model = new HomePageBlogModel();
    // With each blogPost, we pass the relative information to our new model
    foreach(var item in blogPosts)
    {

        model.BlogPosts.Add(new BlogPostModel { Id = item.Id, Title = item.Title,
                       SeName = item.GetSeName(item.LanguageId, ensureTwoPublishedLanguages: false),
                       BodyOverview = item.BodyOverview, CreatedOn = item.CreatedOnUtc });

    }
    //Return the model to our view.
    return PartialView(model);

}

#endregion

 

Side note: Creating the NOPCUSTOM region is not necessary.  I do this to organize my custom nopCommerce code.

Now, find the default view folder, right click the Blog folder, and add a new MVC5 View.  Name it HomePageBlogPosts.cshtml, and replace it with the following code:

@model HomePageBlogModel
@using Nop.Web.Models.Blogs

@if(Model.BlogPosts.Count > 0)
{
    <div class="news-list-homepage">
        <div class="title">
            <strong>Recent Blogs</strong>
        </div>
        <div class="news-items">
            @foreach(var item in Model.BlogPosts)
            {
                <div class="news-item">
                    <div class="news-head">
                        <a class="news-title" href="@Url.RouteUrl("BlogPost", new { SeName = item.SeName })">
                             @item.Title
                        </a>
                        <span class="news-date">@item.CreatedOn.ToString("D")</span>
                    </div>
                    <div class="news-body">
                        @item.BodyOverview
                    </div>
                    <div class="buttons">
                        <a href="@Url.RouteUrl("BlogPost", new {SeName = item.SeName })" 
                                        class="read-more">Details</a>
                    </div>
                </div>
            }
        </div>
        <div class="view-all">
            <a href="@Url.RouteUrl("Blog")">[ Go To Blog ]</a>
        </div>
    </div>
}

I'm using the style tags that come with the default theme, so styling may be different.

Finally, from the Home folder, open up Index.cshtml, and add the following line where you want your recent blogs to appear:

@Html.Action("HomePageBlogPosts", "Blog")

And we're done.  Run your project and see the recent blogs appear on the homepage!

 

Update:

You may want to wrap the code from the controller in a try/catch block, and at least return Content(""); if you run into an error.


Dan Orlovsky

Self-taught full-stack developer and Visual Studio junkie specializing in C#, ASP.NET (WebForms and MVC), HTML5, and CSS3.  I design custom content management solutions for small-businesses looking to take control of their website.  Each project is built with the technical aptitude of the user in mind.

I am currently studying full-stack development from Node.JS using Express, React.Js, and MongoDb, so I can expand my offerings to the tech and business communities.

 


Comments

Ad Space