Display a different color for In Stock/Out of Stock products

Hi,

I was wondering if anyone had information regarding displaying stock status for products?

What I was thinking is to be able to have the following settings for all product when a product is:

In Stock - It appears with green letters

Out of Stock - It appears with red letters

Has anyone done something similar or has a solution (custom styles, plugins etc.) ?

Any help would be well appreciated!

Best regards,
OTH

NopCommerce already display Stock and out if stock lable in product detail page.

So you need to just add css for display lable in Green or Red,

OTH wrote:


Hello OTH,

there are many options for the Availability of the products, but if you want to just check if a product is Out of stock and have different styling for the label you can use the following approach.

In the _Availability.cshtml file in your Product folder add the bolded lines of code:

@model ProductDetailsModel

@using Nop.Services.Localization

@inject ILocalizationService localizationService

@if (!string.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayBackInStockSubscription)
{
    <div class="availability">
        @if (!string.IsNullOrWhiteSpace(Model.StockAvailability))
        {

            bool outOfStock = string.Equals(localizationService.GetResource("products.availability.outofstock"), Model.StockAvailability, StringComparison.InvariantCulture);
            string stockClass = "is-in-stock";

            if (outOfStock)
            {
                stockClass = "is-out-of-stock";
            }

            <div class="stocking @stockClass">
                <span class="label">@T("Products.Availability"):</span>
                <span class="value" id="stock-availability-value[email protected]">@Model.StockAvailability</span>
            </div>
        }
        @await Html.PartialAsync("_BackInStockSubscription", Model)
    </div>
}

This will add a class of is-in-stock anytime the product is not Out of stock, and a class of is-out-of-stock if the stock quantity is 0.
You can then you these classes to add some custom styling to Availability element like red color if is-out-of-stock and green if is-in-stock.

Hope this was helpful.

Best Regards,
Valentin.

@model ProductDetailsModel

@using Nop.Services.Localization

@inject ILocalizationService localizationService

@if (!string.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayBackInStockSubscription)
{
    <div class="availability">
        @if (!string.IsNullOrWhiteSpace(Model.StockAvailability))
        {

            bool outOfStock = string.Equals(localizationService.GetResource("products.availability.outofstock"), Model.StockAvailability, StringComparison.InvariantCulture);
            string stockClass = "is-in-stock";

            if (outOfStock)
            {
                stockClass = "is-out-of-stock";
            }

            <div class="stocking @stockClass">
                <span class="label">@T("Products.Availability"):</span>
                <span class="value" id="stock-availability-value[email protected]">@Model.StockAvailability</span>
            </div>
        }
        @await Html.PartialAsync("_BackInStockSubscription", Model)
    </div>
}

I have tried this with version 3.90 and it doesn not work! It breaks the site!

My code is here:

@model ProductDetailsModel
@using Nop.Web.Models.Catalog;
@using Nop.Services.Localization
@inject ILocalizationService localizationService
@if (!String.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayBackInStockSubscription)
{
    <div class="availability">
        @if (!String.IsNullOrWhiteSpace(Model.StockAvailability))
        {
      bool outOfStock = string.Equals(localizationService.GetResource("products.availability.outofstock"), Model.StockAvailability, StringComparison.InvariantCulture);
            string stockClass = "is-in-stock";

            if (outOfStock)
            {
                stockClass = "is-out-of-stock";
            }
            <div class="stock" @stockClass">
                <span class="label">@T("Products.Availability"):</span>
                <span class="value" id="stock-availability-value[email protected]">@Model.StockAvailability</span>
            </div>
        }
        @Html.Partial("_BackInStockSubscription", Model)
    </div>
}

Hi Nop Templates,

The code works perfectly thank you (i'm running 4.30)

One question, which I'm hoping you can help with: When using product attributes the class does not change, when the product page loads the availability is set to Please select required attribute(s) which sets the class to Is-In-Stock, clicking on a product attribute that is Out of Stock does not change the class to Is-Out-Of-Stock, do you know how to change the code so the class changes on attribute click (I'm using Radio Button Lists)

Thank you