Displaying Log In Box at the Home Page (or Any Other Pages)

There's a post in nopCommerce forums that asks about how can one have a log in box at the home page. Through a series of replies, I've successfully helped the poster solve her problem with some easy customizations. But it seems like some other forumers are still not clear about how to achieve this, so I am writing this blog post to detail the exact steps in achieving this. After this, you'll be able to place the login box in just about any pages while still keeping the same box in the login page. Here's a screenshot of the box added to the home page.

Ready to go? Fire up your Visual Studio and start following! (Note: I am using nopCommerce 2.80 as an example, but it should be generally applicable to other 2.XX versions of nopCommerce)

Create a Partial View

The first step we would like to do is to create a Partial View to host the UI elements of the login box. Create a partial view, name it _LoginBox.cshtml and set its model to LoginModel. Make sure you create the file under the path ~/Themes/THEME_NAME/Views/Shared/_LoginBox.cshtml. If you don't understand why we should put it at our theme instead of the default ~/Views/Shared/ folder, I have created a blog posts that talks about the best practices of creating or customizing an nopCommerce theme. Here's a screenshot of _LoginBox.cshtml at this point of time.

Copy Login Box UI from Login.cshtml

The next step is to copy the relavent HTML code from ~/Views/Customers/Login.cshtml. The lines to copy is really up to you, especially if you have customized your theme beforehand. For this example, I copied line 64 to 112 of Login.cshtml of nopCommerce 2.80. In any case, make sure you copy the part wrapped by Html.BeginForm() because we'll need that later on.

Now, your _LoginBox.cshtml should look similar to the following.

Customizing _LoginBox.cshtml for Proper Login Behavior

Now, if you try to reference _LoginBox.cshtml in any View, the login function won't behave properly. Why? Because the Html.BeginForm() part generates different code depends on the Controller and Action of the parent View. Basically the code generated will point to the same Action that's used to display the parent view. So if you include the partial view in ~/Themes/THEME_NAME/Views/Home/Index.cshtml, the generated FORM element will look similar to:

Look at the highlighted part, the action attribute of FORM element is pointing to the home page, but the home page don't really have any login feature. The result? If you click the "Log in" button, nothing happens because we don't really have code to handle that.

Thus, we need to tell _LoginBox.cshtml that we need to post the FORM to the appropriate Action, in this case the Login Action of Customer Controller.

After customizing, here's how the _LoginBox.cshtml looks like (look at the highligted part):

And the HTML that gets generated is now correctly pointing to the Login Action.

Referencing _LoginBox.cshtml in Other Pages

Now that we have done customizing the _LoginBox.cshtml, we need to reference it from other Views. Let's take the home page ~/Themes/THEME_NAME/Views/Home/Index.cshtml as an example, we'll need the following line:

You also need to replace the original code in Login.cshtml with the same line, sort of a reuse of Partial View to reduce duplication.

Conclusion

This tutorial shows that we don't really need to customize the Controller to move the login box around. We can do this directly from our Themes. Quick, clean and easy isn't it?

Now make sure you tell me what you want to know about, and I'll blog about it! Use the UserVoice widget at the right to tell me your ideas!