Close

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

StephDep
7 years ago
#13213 Quote
Avatar
  • 17
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>

SDobrev
7 years ago
#13215 Quote
Avatar
  • 283
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>}"



Best Regards,
Stoyan Dobrev
Nop-Templates.com
StephDep
7 years ago
#13216 Quote
Avatar
  • 17
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 !
SDobrev
7 years ago
#13217 Quote
Avatar
  • 283
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.
Best Regards,
Stoyan Dobrev
Nop-Templates.com
StephDep
7 years ago
#13219 Quote
Avatar
  • 17
SDobrev wrote:
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 ?
SDobrev
7 years ago
#13220 Quote
Avatar
  • 283
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.
Best Regards,
Stoyan Dobrev
Nop-Templates.com
StephDep
7 years ago
#13223 Quote
Avatar
  • 17
SDobrev wrote:
Hi,
The above solutions are workarounds so they are not the best practices.

Y're absolutely right, and greatly apreciated btw.
SDobrev wrote:

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.

Do you mean this (Model enhencement) can't be handled by the theme alone ?
SDobrev
7 years ago
#13224 Quote
Avatar
  • 283
Yes, this can't be handled by the theme because we are using the nopCommerce ProductDetailsModel and we can't modify the code.
Best Regards,
Stoyan Dobrev
Nop-Templates.com