ProductOverviewModel // _ProductBox.cshtml. IMPROVE

Hello Everyone.


When searching for products, the product results appear with "Picture", "Title" , "Price" and "Button add to cart".

When we click on add to cart, if the product is out of stock all we see is  a red line on top with text Out of stock.

some of my customers are not seeing this.

I would like to improve these views.

For example i would like to show the availability as well.

and maybe just maybe  when the product is out of stock and not pre order to replace the button add to cart with Notify when Next available.

The view appears in : /Views/Shared/_ProductBox.cshtml.

The model is : @model ProductOverviewModel

Any ideas how to extend the model and display more details for this product without reduce the performance?

Looking for the  best approach.

Did you find any help in this area?  ProductOverviewModel is pretty useless for anything other than displaying the few values it contains.

Hello,

Not sure if this is still required but with a small modification to a few files, I have managed to display the stock quantity & stock message on the item-box (_ProductBox.cshtml) section. (as well as search results)

1. ProductOverviewModel.cs

Change;

public string Name { get; set; }
        public string ShortDescription { get; set; }
        public string FullDescription { get; set; }
        public string SeName { get; set; }

        public string Sku { get; set; }

        public ProductType ProductType { get; set; }

        public bool MarkAsNew { get; set; }

        //price
        public ProductPriceModel ProductPrice { get; set; }

TO:

public string Name { get; set; }
        public string ShortDescription { get; set; }
        public string FullDescription { get; set; }
        public string SeName { get; set; }

        public string Sku { get; set; }

        public ProductType ProductType { get; set; }

        public bool MarkAsNew { get; set; }

        public string StockAvailability { get; set; } // add this line

        //price
        public ProductPriceModel ProductPrice { get; set; }

2. ProductModelFactory.cs

Change:

var model = new ProductOverviewModel
                {
                    Id = product.Id,
                    Name = product.GetLocalized(x => x.Name),
                    ShortDescription = product.GetLocalized(x => x.ShortDescription),
                    FullDescription = product.GetLocalized(x => x.FullDescription),
                    SeName = product.GetSeName(),
                    Sku = product.Sku,
                    ProductType = product.ProductType,
                    MarkAsNew = product.MarkAsNew &&
                        (!product.MarkAsNewStartDateTimeUtc.HasValue || product.MarkAsNewStartDateTimeUtc.Value < DateTime.UtcNow) &&
                        (!product.MarkAsNewEndDateTimeUtc.HasValue || product.MarkAsNewEndDateTimeUtc.Value > DateTime.UtcNow)
                };

                //price

TO:

var model = new ProductOverviewModel
                {
                    Id = product.Id,
                    Name = product.GetLocalized(x => x.Name),
                    ShortDescription = product.GetLocalized(x => x.ShortDescription),
                    FullDescription = product.GetLocalized(x => x.FullDescription),
                    SeName = product.GetSeName(),
                    Sku = product.Sku,
                    ProductType = product.ProductType,
                    StockAvailability = product.FormatStockMessage("", _localizationService, _productAttributeParser, _dateRangeService), // add this line
                    MarkAsNew = product.MarkAsNew &&
                        (!product.MarkAsNewStartDateTimeUtc.HasValue || product.MarkAsNewStartDateTimeUtc.Value < DateTime.UtcNow) &&
                        (!product.MarkAsNewEndDateTimeUtc.HasValue || product.MarkAsNewEndDateTimeUtc.Value > DateTime.UtcNow)
                };

                //price

3. _ProductBox.cshtml

Change;

@if (EngineContext.Current.Resolve<CatalogSettings>().ShowSkuOnCatalogPages && !string.IsNullOrEmpty(Model.Sku))
        {
            <div class="sku">
                @Model.Sku
            </div>
        }

TO:

@if (EngineContext.Current.Resolve<CatalogSettings>().ShowSkuOnCatalogPages && !string.IsNullOrEmpty(Model.Sku))
        {
            <div class="sku">
                @Model.Sku - @Model.StockAvailability
            </div>
        }

Or you can simply add @Model.StockAvailability to anywhere you want the stock message to display.
This could be;

xx amount in stock  like "22 in stock" or "Out of stock"

You can also style the message like below;

@if (!String.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayBackInStockSubscription)
{
    @*Stock availability*@
      var MyStockValue = Model.StockAvailability;
      var StockStyle = "";
     
        if (MyStockValue == "Out of stock")
        {
            StockStyle = "color:red !important;";
        }
        else
        {
            StockStyle = "color:green !important;";
        }
    <div class="availability">
        @if (!String.IsNullOrWhiteSpace(Model.StockAvailability))
        {
            <div class="stock">
                <span class="label">@T("Products.Availability"):</span>
                <span class="value" id="stock-availability-value[email protected]" style="@Html.Raw(StockStyle)">@Model.StockAvailability</span>
            </div>
        }
        @Html.Partial("_BackInStockSubscription", Model)
    </div>
}

Hope this helps someone else.
Cheers.
V.

Just wanted to say, big thanks to volkanozer. I needed the ManufacturerPartNumber added to the catalogue listing page so I wanted to edit the ProductOverviewModel.....the above guide was great! [Version 4.0]