One of the most frustrating thing for online shoppers is to place an order on an e-commerce store site and receiving an email that the order has been cancelled because product is out of stock. This can certainly affect the sales / revenue because an angry customer (or online shopper) is never coming back to the store site. In order to avoid this kind of confusion (or frustration) and eventually losing a customer, it is always a good idea for store owners to display "Out of stock" message if a product is not available.
Today, we will go over the process of adding an "out of stock" message on product box in nopCommerce.
Go to: Nop.Web/Views/Shared/_ProductBox.cshtml
Open "_ProductBox.cshtml" file and add this at the top of your view code:
@using Nop.Services.Catalog;
So, the top of your view code should look like this:
@model ProductOverviewModel@using Nop.Core@using Nop.Core.Domain.Orders@using Nop.Core.Domain.Tax@using Nop.Core.Infrastructure@using Nop.Web.Models.Catalog;@using Nop.Services.Catalog;
Now, add this line (at the top):
var productQuantity = EngineContext.Current.Resolve<IProductService>().GetProductById(Model.Id).StockQuantity;
Like this:
@model ProductOverviewModel@using Nop.Core@using Nop.Core.Domain.Orders@using Nop.Core.Domain.Tax@using Nop.Core.Infrastructure@using Nop.Web.Models.Catalog;@using Nop.Services.Catalog;@{ //prepare "Add to cart" AJAX link string 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 }); <!-- To add "Out of stock" message --> var productQuantity = EngineContext.Current.Resolve<IProductService>().GetProductById(Model.Id).StockQuantity;}
As per your requirement (where you would like to display the "Out of stock" message), simple add the following code:
@if (productQuantity < 1) { <div id="out-of-stock-div" style="border: dashed 2px gray; height:25px; text-align:center;"> <span class="out-of-stock">Out of Stock</span> </div> }
For this example, the code should look like this:
@model ProductOverviewModel@using Nop.Core@using Nop.Core.Domain.Orders@using Nop.Core.Domain.Tax@using Nop.Core.Infrastructure@using Nop.Web.Models.Catalog;@using Nop.Services.Catalog;@{ //prepare "Add to cart" AJAX link string 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 }); <!-- To add "Out of stock" message --> var productQuantity = EngineContext.Current.Resolve<IProductService>().GetProductById(Model.Id).StockQuantity;}<!-- To add "Out of stock" message --> @if (productQuantity < 1) { <div id="out-of-stock-div" style="border: dashed 2px gray; height:25px; text-align:center;"> <span class="out-of-stock">Out of Stock</span> </div> } <!-- To add "Out of stock" message --><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>
Save changes!
In order to test:
1) Go to administration section and change the quantity of any product to 0
2) Go to public store and order the category of that specific product
Here is the result:
Thank you so much.
The code in this tutorial is for nopCommerce 3.70. If you are using a difference version, you may have to change / update the code accordingly.