- Moderator
- 1044
Help make Nop-Templates products better. Share your ideas or feature requests related to the Nop Emporium Theme for nopCommerce.
Feature Requests
- 39
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
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,
OTH
OTH
- Moderator
- 172
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
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[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 Kirov
Nop-Templates.com
Valentin Kirov
Nop-Templates.com
- 39
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:
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.
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[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.
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,
OTH
OTH
- Moderator
- 172
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
Valentin Kirov
Nop-Templates.com
- 39
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,
OTH
OTH
- 39
Hi,
Can you tell me how I could make the letters be bigger or bolder?
Can you tell me how I could make the letters be bigger or bolder?
Best regards,
OTH
OTH
- Moderator
- 172
Hi,
Can you tell me how I could make the letters be bigger or bolder?
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
Valentin Kirov
Nop-Templates.com
- 39
Hi,
Since upgrading nopCommerce over to version 4.20 I am unable to find _Availability.cshtml in the Product folder.
Did this file move somewhere else?
Since upgrading nopCommerce over to version 4.20 I am unable to find _Availability.cshtml in the Product folder.
Did this file move somewhere else?
Best regards,
OTH
OTH
- Moderator
- 172
Hi,
Since upgrading nopCommerce over to version 4.20 I am unable to find _Availability.cshtml in the Product folder.
Did this file move somewhere else?
Since upgrading nopCommerce over to version 4.20 I am unable to find _Availability.cshtml in the Product folder.
Did this file move somewhere else?
Hi OTH,
if you are referring to the Emporium theme, the _Availability.cshtml was never overridden for the theme and therefore - it is not in the theme`s Products folder.
You can find it in the common ~ Nop.Web\Views\Product folder.
Best Regards,
Valentin Kirov
Nop-Templates.com
Valentin Kirov
Nop-Templates.com
