Apply red color to Availability: when "Out of Stock"

Hi,
Is there a way to apply a red color to the text next to Availability when a
product attribute combination is not available ?

There is no specific css class applied it seems:

<div class="stock">
  <span class="label">Availability: </span><span class="value" id="stock-availability-value-64">Out of stock</span>
</div>

<div class="stock">
  <span class="label">Availability: </span><span class="value" id="stock-availability-value-64">In stock</span>
</div>

Hi,

There are a few ways to do it:
1. Use the jQuery "contains" selector.

Here is a simple code:

$('.stock span.value:contains(Out of stock)').css('color', 'red');

2. Edit the _SKU_MAN_GTIN_Ven.cshtml view located in Native\Views\Product directory. You have to add additional class to the span when the stock availability is out of stock and write a custom CSS code.
Here is a simple code:

<span class="value @if (Model.StockAvailability == "Out of stock"){<text>out-of-stock</text>}"

The shop is running in 2 languages, so I hope there is something on that Model that allows me to detect 0 stock in a language independant way.

Thanks for the pointers !

Hi,

Unfortunately, the StockAvailability property of the ProductDetailsModel is localized text.

If you have only two languages you can use the || operator in the conditional statement.

I see, but that would be quite bad programming practice. Can I make a enhencement request to include this in the upcoming 3.9 version ?

Hi,

The above solutions are workarounds so they are not the best practices.

You should ask this question in the nopCommerce forum, but the 3.9 release date is quite soon so most likely the nopCommerce team won't do it for 3.9.

Y're absolutely right, and greatly apreciated btw.

Do you mean this (Model enhencement) can't be handled by the theme alone ?

Yes, this can't be handled by the theme because we are using the nopCommerce ProductDetailsModel and we can't modify the code.