Close

Feature Requests

Support
one year ago
#14518 Quote
Avatar
  • Moderator
  • 1002
Help make Nop-Templates products better. Share your ideas or feature requests related to the Nop Emporium Theme for nopCommerce.
OTH
3 months ago
#15757 Quote
Avatar
  • 18
Hi,

I think it would be a good idea to add a product feature so as to be able to choose a display color for product stock status.

As in if a products stock status would be;

In Stock - You could choose for it to appear with green letters.

Out of Stock - You could choose for it to appear with red letters.

Best regards,
OTH
Best regards,
Odinn Thor
Valentin
3 months ago
#15763 Quote
Avatar
  • Moderator
  • 139
OTH wrote:
Hi,

I think it would be a good idea to add a product feature so as to be able to choose a display color for product stock status.

As in if a products stock status would be;

In Stock - You could choose for it to appear with green letters.

Out of Stock - You could choose for it to appear with red letters.

Best regards,
OTH


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-@Model.Id">@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 Kirov
Nop-Templates.com
OTH
3 months ago
#15765 Quote
Avatar
  • 18
Valentin wrote:
Hi,

I think it would be a good idea to add a product feature so as to be able to choose a display color for product stock status.

As in if a products stock status would be;

In Stock - You could choose for it to appear with green letters.

Out of Stock - You could choose for it to appear with red letters.

Best regards,
OTH

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-@Model.Id">@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.



Would I add this just to the chtml file itself or would I have to put this in the source code itself? And would this help with different coloring/labeling on to front side of the page?
Best regards,
Odinn Thor
Valentin
3 months ago
#15766 Quote
Avatar
  • Moderator
  • 139
OTH wrote:

Would I add this just to the chtml file itself or would I have to put this in the source code itself? And would this help with different coloring/labeling on to front side of the page?


Hello again, OTH,

you can just open the above-mentioned file and replace its contents with the code I gave you here.
However, it will not make the availability status look any different.
It will just add the mentioned classes to the element depending on - if the product has quantity or not.
You then need to use these classes to add some custom styling in your theme`s Custom Head Styles section, for your elements e.g.:

.is-in-stock {
   color: green;
}

.is-out-of-stock {
   color: red;
}


Hope this clarifies things a bit.
Best Regards,

Valentin Kirov
Nop-Templates.com
OTH
3 months ago
#15767 Quote
Avatar
  • 18
Valentin wrote:


Hello again, OTH,

you can just open the above-mentioned file and replace its contents with the code I gave you here.
However, it will not make the availability status look any different.
It will just add the mentioned classes to the element depending on - if the product has quantity or not.
You then need to use these classes to add some custom styling in your theme`s Custom Head Styles section, for your elements e.g.:

.is-in-stock {
   color: green;
}

.is-out-of-stock {
   color: red;
}


Hope this clarifies things a bit.


This works perfectly, thank you very much!
Best regards,
Odinn Thor
OTH
one month ago
#15918 Quote
Avatar
  • 18
Hi,

Can you tell me how I could make the letters be bigger or bolder?
Best regards,
Odinn Thor
Valentin
one month ago
#15919 Quote
Avatar
  • Moderator
  • 139
OTH wrote:
Hi,

Can you tell me how I could make the letters be bigger or bolder?


Hello again OTH,

in order to make the letters bigger, bolder, or have any other specific styling, you can use the same selectors I previously gave you and add some CSS rules to them e.g.:

.is-in-stock {
   color: green;
   font-size: 18px;
   font-weight: bold;

}

.is-out-of-stock {
   color: red;
   font-size: 18px;
   font-weight: bold;

}
Best Regards,

Valentin Kirov
Nop-Templates.com