Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

3 Ways to Create a Personalized Shopping Experience With nopCommerce

DZone's Guide to

3 Ways to Create a Personalized Shopping Experience With nopCommerce

In this article, we explore the open-source eCommerce platform, and look at how web devs can customize their nopCommerce sites with C#.

· Web Dev Zone
Free Resource

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

Greeting your customers with a personalized shopping experience is high-priority for most of the retail/online business owners these days. When personalization is done correctly on your business website and your revenue is going up, this is a sign that you as a retailer/business owner understand your customer's needs.

In this article, we will discuss 3 ways to create a personalized shopping experience on a nopCommerce site.

If you are new to nopCommerce — nopCommerce is the leading ASP.NET-based open-source e-Commerce platform. It is a solution with comprehensive features that are applicable for all types of users from new online businesses, who are going to grow faster, to the most demanding e-commerce experts.

1) Displaying Customer Name on the Header

In this section, we will learn how to display the customer's name on the header of your nopCommerce site using custom code. 

Go to: Nop.Web/Views/Shared

Open the view file "Header.cshtml"

Image title

Add this at the top: 

@using Nop.Core.Infrastructure;
@using Nop.Core;
@using Nop.Core.Domain.Customers;
@using Nop.Services.Common;

Next, find this DIV:

<div class="header-links-wrapper">
           @Html.Action("HeaderLinks", "Common")
           @Html.Action("FlyoutShoppingCart", "ShoppingCart")
       </div>

Now, we will add customer name like this:

@ {
 var currentCustomer = EngineContext.Current.Resolve < IWorkContext > ().CurrentCustomer;

 if (!currentCustomer.IsGuest()) {
  var name = currentCustomer.GetAttribute < string > (SystemCustomerAttributeNames.FirstName);

  if (!string.IsNullOrEmpty(name)) { < br / >
    < div > Hello @name, how are you doing today ? < /div> < br / >
  }
 }

}

In the above code, we are checking if the customer is not a guest (i.e. for logged in customers only) and then their first name will be displayed with the hardcoded text. Your final <div> should look something like this after adding the above code:

< div class = "header-links-wrapper" >

 @ {
  var currentCustomer = EngineContext.Current.Resolve < IWorkContext > ().CurrentCustomer;

  if (!currentCustomer.IsGuest()) {
   var name = currentCustomer.GetAttribute < string > (SystemCustomerAttributeNames.FirstName);

   if (!string.IsNullOrEmpty(name)) { < br / >
     < div > Hello @name, how are you doing today ? < /div> < br / >
   }
  }

 }

@Html.Action("HeaderLinks", "Common")
@Html.Action("FlyoutShoppingCart", "ShoppingCart") < /div>

Save changes!

Run your website/project and your customer should be able to see their first name at the top of your website (in the header section) once they log in:

Image title

2) Displaying Customer Name in a Popup Window

When you install nopCommerce, you get an option to display (or showcase) new products in a separate page. In order to display products on that web page, you have to enable the "Mark as new" setting for your products.

Now, we will add a new personalized option to this feature so that new products get more exposure. We will be adding a personalized popup window that will give your customers a link to the new products page. 

Go to: Nop.Web/Views/Common

Open the view file "Footer.cshtml"


Image title

Add this at the top:

@using Nop.Core.Domain.Customers;
@using Nop.Services.Common;

Add this code at the bottom of your view file:

@if(Model.NewProductsEnabled) {

 < div >



  @ {
   var currentCustomer = EngineContext.Current.Resolve < IWorkContext > ().CurrentCustomer;

   if (!currentCustomer.IsGuest()) {
    var name = currentCustomer.GetAttribute < string > (SystemCustomerAttributeNames.FirstName);

    if (!string.IsNullOrEmpty(name)) { < div class = "sp-newproducts" >
      < div id = "customnameValue"
     style = "font-weight:bold;display: inline-block;" > Hi @name, < br / > Check out these < a href = "@Url.RouteUrl("
     NewProducts ")" > new products < /a></div >

      < /div>
    }
   }

  } < /div>


}

In the above code, we are first checking if New Product functionality is enabled or not. If enabled, then we are checking if the customer is not a guest (i.e. for logged in customers only) and then their first name will be displayed along with the new products page link.

Let's add some styling that will manage the position of this popup window.

Add the below CSS to your theme's stylesheet:

.sp-newproducts {
    border-radius: 5px 5px 0 0;
    background: #4ab2f1;
    padding: 5px;
    width: 235px;
    position: fixed;
    bottom: 0;
    right: 50px;
    color: #ffffff;
}

    .sp-newproducts a {
        color: black;
    }

Save changes!

Run your website/project and your customer should be able to see their first name at the top of your website (in the header section) once they log in:

Image title

NOTE: One benefit of creating this custom functionality is that, if you decide to NOT use the "new product" page or functionality, you just have to turn off/disable that feature in nopCommerce's administration section, and this add-on feature will automatically be disabled as well. 

To turn this off, all you have to is (uncheck this):

Image title

3) Message Templates 

In nopCommerce, message templates define the layout, content, and formatting of automated messages sent from your store site. They are called transactional emails because each one is associated with a specific type of transaction. There are several message templates available in nopCommerce by default to notify the users/customers about order statuses and so on.

These message templates give you a great opportunity to create a personalized experience for your customers and online shoppers by making sure you have dynamic tokens set in the content like customer name, location, etc.

You can access message templates by going to Content Management > Message Templates.

Image title

Let's add a customer name in the welcome email that customers get after registering on the store site.

Click on "Edit" for the message template "Customer.WelcomeMessage"

Image title


As soon as you click on the "Show" link, you will see all the allowed tokens that you can add to the email content for your store.

NOTE: You can add conditions as well in order to display different information for different cases.

Image title


In the example (below), we have added a customer's first name token in the welcome email like this:

Hi %Customer.FirstName%,
<br />
<br />
We welcome you to <a href="%Store.URL%"> %Store.Name%</a>.
<br />
<br />
You can now take part in the various services we have to offer you. Some of these services include:
<br />
<br />
Permanent Cart - Any products added to your online cart remain there until you remove them, or check them out.
<br />
Address Book - We can now deliver your products to another address other than yours! This is perfect to send birthday gifts direct to the birthday-person themselves.
<br />
Order History - View your history of purchases that you have made with us.
<br />
Products Reviews - Share your opinions on products with our other customers.
<br />
<br />
For help with any of our online services, please email the store-owner: <a href="mailto:%Store.Email%">%Store.Email%</a>.
<br />
<br />
Note: This email address was provided on our registration page. If you own the email and did not register on our site, please send an email to <a href="mailto:%Store.Email%">%Store.Email%</a>.


  • nopCommerce can be downloaded from here.
  • The nopCommerce version used in this article is Version 3.90.
  • nopCommerce Support.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
web dev ,asp.net ,ecommerce platform

Published at DZone with permission of Lavish Kumar. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}