wtf javascript error fix, ViewModel being empty on document.ready

Nop.Plugin.Misc.AuctionPlugin/AuctionDefaults.cs

@@ -33,6 +33,7 @@ public static class AuctionDefaults
     public static string BidNotificationRouteName => "Plugin.Misc.AuctionPlugin.BidNotification";
     public static string RefreshAuctionWidgetRouteName => "Plugin.Misc.AuctionPlugin.RefreshAuctionWidget";
     public static string AssignProductToAuction => "Plugin.Misc.AuctionPlugin.AssignProductToAuction";
+    public static string LiveScreenRouteName => "Plugin.Misc.AuctionPlugin.LiveScreenRouteName";
 
     /// <summary>
     /// Gets the name of autosuggest component

Nop.Plugin.Misc.AuctionPlugin/AuctionPlugin.cs

@@ -7,7 +7,6 @@ using Nop.Data;
 using Nop.Plugin.Misc.AuctionPlugin.Areas.Admin.Components;
 using Nop.Plugin.Misc.AuctionPlugin.Components;
 
-
 //using Nop.Plugin.Misc.AuctionPlugin.Components;
 using Nop.Services.Catalog;
 using Nop.Services.Cms;
@@ -112,7 +111,7 @@ namespace Nop.Plugin.Misc.AuctionPlugin
                 return typeof(AuctionAdminViewComponent);
             }
 
-            if (widgetZone.Equals(PublicWidgetZones.HeaderAfter))
+            if (widgetZone.Equals(PublicWidgetZones.BodyStartHtmlTagAfter))
             {
                 return typeof(LiveAnnouncementViewComponent);
             }
@@ -130,8 +129,8 @@ namespace Nop.Plugin.Misc.AuctionPlugin
             return Task.FromResult<IList<string>>(new List<string>
             {
                 PublicWidgetZones.ProductDetailsOverviewTop,
-                PublicWidgetZones.ProductDetailsBottom,
+                PublicWidgetZones.ProductBoxAddinfoBefore,
-                PublicWidgetZones.HeaderAfter,
+                PublicWidgetZones.BodyStartHtmlTagAfter,
                 AdminWidgetZones.ProductDetailsButtons
 
                 //AdminWidgetZones.OrderBillingAddressDetailsBottom,

Nop.Plugin.Misc.AuctionPlugin/Components/AuctionPublicViewComponent.cs

@@ -135,15 +135,21 @@ public class AuctionPublicViewComponent : NopViewComponent
 
         }
 
-        var productToAuctionId = await _auctionService.GetProductToAuctionByAuctionIdAndProductIdAsync(auctionId, productDetailsModel.Id);
+        List<ProductToAuctionMapping> productToAuctionId = await _auctionService.GetProductToAuctionByAuctionIdAndProductIdAsync(auctionId, productDetailsModel.Id);
+
+        AuctionStatus status = productToAuctionId.FirstOrDefault().AuctionStatus;
+        bool isActive = status.HasFlag(AuctionStatus.Active);
+        bool isFirstWarning = status.HasFlag(AuctionStatus.FirstWarning);
+
 
         productBidBoxViewModel.IsAdmin = await _customerService.IsAdminAsync(customer);
         productBidBoxViewModel.IsGuest = await _customerService.IsGuestAsync(customer);
-        productBidBoxViewModel.AuctionClosed = auction.Closed;
+        productBidBoxViewModel.AuctionClosed = auction.Closed;        
+        productBidBoxViewModel.IsItemActive = isActive;
         productBidBoxViewModel.WidgetZone = widgetZone;        
         productBidBoxViewModel.BasePrice = productDetailsModel.ProductPrice.OldPriceValue;
         productBidBoxViewModel.CurrentPrice = productDetailsModel.ProductPrice.PriceValue;
-        productBidBoxViewModel.ProductToAuctionsId = productToAuctionId.FirstOrDefault().Id;
+        productBidBoxViewModel.ProductToAuctionId = productToAuctionId.FirstOrDefault().Id;
         productBidBoxViewModel.AuctionId = auctionId;
         productBidBoxViewModel.CustomerId = customer.Id;
         productBidBoxViewModel.ProductId = productDetailsModel.Id;

Nop.Plugin.Misc.AuctionPlugin/Components/AuctionViewComponent.cs

@@ -1,6 +1,8 @@
 using Microsoft.AspNetCore.Mvc;
 using Nop.Core;
+using Nop.Plugin.Misc.AuctionPlugin.Domains.Enums;
 using Nop.Plugin.Misc.AuctionPlugin.Models;
+using Nop.Plugin.Misc.AuctionPlugin.Services;
 using Nop.Services.Cms;
 using Nop.Services.Logging;
 using Nop.Web.Framework.Components;
@@ -16,6 +18,7 @@ public class AuctionViewComponent : NopViewComponent
     protected readonly ILogger _logger;
     protected readonly IWidgetPluginManager _widgetPluginManager;
     protected readonly IWorkContext _workContext;
+    AuctionService _auctionService;
     protected readonly AuctionSettings _auctionSettings;
 
     #endregion
@@ -25,11 +28,13 @@ public class AuctionViewComponent : NopViewComponent
     public AuctionViewComponent(ILogger logger,
         IWidgetPluginManager widgetPluginManager,
         IWorkContext workContext,
+        AuctionService auctionService,
         AuctionSettings auctionSettings)
     {
         _logger = logger;
         _widgetPluginManager = widgetPluginManager;
         _workContext = workContext;
+        _auctionService = auctionService;
         _auctionSettings = auctionSettings;
     }
 
@@ -73,19 +78,28 @@ public class AuctionViewComponent : NopViewComponent
         //}
         var model = new AuctionPublicInfoModel();
 
-        if (widgetZone.Equals(PublicWidgetZones.ProductDetailsBottom))
+        if (!widgetZone.Equals(PublicWidgetZones.ProductBoxAddinfoBefore))
         {
-
+            return Content(string.Empty);
-            model.Message = $"Auction plugin is active, setting = {_auctionSettings.SomeText}, productId = {((ProductDetailsModel)additionalData).Name}";            
-           
         }
-        else
+
+        var productId = ((ProductOverviewModel)additionalData).Id;
+        model.ProductId = productId;
+        var productToAuctionMapping = (await _auctionService.GetProductToAuctionsByProductIdAsync(productId)).FirstOrDefault();
+
+        if (productToAuctionMapping == null)
         {
-
+            return Content(string.Empty);
-            model.Message = _auctionSettings.SomeText;
-        
         }
 
+        model.ProductToAuctionMappingId = productToAuctionMapping.Id;
+        var auction = await _auctionService.GetAuctionDtoByProductToAuctionIdAsync(productToAuctionMapping.Id);
+        model.StartDate = auction.StartDateUtc;
+        AuctionStatus status = productToAuctionMapping.AuctionStatus;
+        model.IsActive = status.HasFlag(AuctionStatus.Active);
+
+        bool isFirstWarning = status.HasFlag(AuctionStatus.FirstWarning);
+
         return View("~/Plugins/Misc.AuctionPlugin/Views/PublicInfo.cshtml", model);
 
     }

Nop.Plugin.Misc.AuctionPlugin/Components/LiveAnnouncementViewComponent.cs

@@ -35,7 +35,7 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Components
 
             await _logger.InformationAsync("SignalR Widget: widget active");
 
-            if (!widgetZone.Equals(PublicWidgetZones.HeaderAfter))
+            if (!widgetZone.Equals(PublicWidgetZones.BodyStartHtmlTagAfter))
             {
                 return Content(string.Empty);
             }

Nop.Plugin.Misc.AuctionPlugin/Controllers/AuctionController.cs

@@ -1,6 +1,7 @@
 using AyCode.Core.Extensions;
 using Microsoft.AspNetCore.Mvc;
 using Nop.Data;
+using Nop.Plugin.Misc.AuctionPlugin.Areas.Admin.Models;
 using Nop.Plugin.Misc.AuctionPlugin.Domains.Entities;
 using Nop.Plugin.Misc.AuctionPlugin.Models;
 using Nop.Plugin.Misc.AuctionPlugin.Services;
@@ -69,4 +70,10 @@ public class AuctionController : BasePluginController
 
         return ViewComponent("AuctionPublic", new { widgetZone = request.WidgetZone, additionalData = detailsModel });
     }
+
+    public async Task<IActionResult> LiveScreen()
+    {
+        var model = new LiveScreenViewModel();
+        return View("~/Plugins/Misc.AuctionPlugin/Views/LiveScreen.cshtml", model);
+    }
 }

Nop.Plugin.Misc.AuctionPlugin/Hubs/Messages/AuctionUpdateNotificationMessage.cs

@@ -0,0 +1,18 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Nop.Plugin.Misc.AuctionPlugin.Domains.Dtos;
+
+namespace Nop.Plugin.Misc.AuctionPlugin.Models
+{
+    public class AuctionUpdateNotificationMessage : AuctionBidDto
+    {
+        public int AuctionId { get; set; }
+        //public string BidPrice { get; set; }
+        //public int ProductId { get; set; }
+        //public int CustomerId { get; set; }
+
+    }
+}

Nop.Plugin.Misc.AuctionPlugin/Infrastructure/RouteProvider.cs

@@ -53,6 +53,10 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Infrastructure
             endpointRouteBuilder.MapControllerRoute(name: AuctionDefaults.AssignProductToAuction,
             pattern: "Admin/Auction/AssignProductToAuction",
             defaults: new { controller = "AuctionPluginAdmin", action = "AssignProductToAuction" });
+            
+            endpointRouteBuilder.MapControllerRoute(name: AuctionDefaults.LiveScreenRouteName,
+            pattern: "Auction/LiveScreen",
+            defaults: new { controller = "Auction", action = "LiveScreen" });
 
         }
 

Nop.Plugin.Misc.AuctionPlugin/Models/AuctionPublicInfoModel.cs

@@ -5,8 +5,14 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Models
 {
     public record AuctionPublicInfoModel : BaseNopModel
     {
-        [NopResourceDisplayName("Message")]
+
-        public string Message { get; set; }
+        public int ProductId {  get; set; }
+
+        public int ProductToAuctionMappingId {  get; set; }
+
+        public DateTime StartDate { get; set; }
+
+        public bool IsActive { get; set; }
 
     }
 }

Nop.Plugin.Misc.AuctionPlugin/Models/LiveScreenViewModel.cs

@@ -0,0 +1,18 @@
+using Nop.Web.Framework.Models;
+using Nop.Web.Framework.Mvc.ModelBinding;
+
+namespace Nop.Plugin.Misc.AuctionPlugin.Models
+{
+    public record LiveScreenViewModel : BaseNopModel
+    {
+
+        public int ProductId {  get; set; }
+
+        public int ProductToAuctionMappingId {  get; set; }
+
+        public DateTime StartDate { get; set; }
+
+        public bool IsActive { get; set; }
+
+    }
+}

Nop.Plugin.Misc.AuctionPlugin/Models/ProductBidBoxViewModel.cs

@@ -10,11 +10,12 @@ namespace Nop.Plugin.Misc.AuctionPlugin.Models
 {
     public record ProductBidBoxViewModel: BaseNopModel
     {
-        public int ProductToAuctionsId { get; set; }
+        public int ProductToAuctionId { get; set; }
         public bool IsAdmin {  get; set; }
         public bool IsGuest {  get; set; }
         public int AuctionId { get; set; }
         public bool AuctionClosed { get; set; }
+        public bool IsItemActive { get; set; }
         public int ProductId { get; set; }
         public int CustomerId { get; set; }
 

Nop.Plugin.Misc.AuctionPlugin/Nop.Plugin.Misc.AuctionPlugin.csproj

@@ -22,8 +22,12 @@
     <None Remove="Views\AdminProductAuctionSettingsBox.cshtml" />
     <None Remove="Views\Announcement.cshtml" />
     <None Remove="Views\AnnouncementList.cshtml" />
+    <None Remove="Views\Auction\LiveScreenRoot.cshtml" />
+    <None Remove="Views\Auction\_ViewImports.cshtml" />
     <None Remove="Views\Configure.cshtml" />
     <None Remove="Views\LiveAnnouncement.cshtml" />
+    <None Remove="Views\LiveScreen.cshtml" />
+    <None Remove="Views\PublicInfo - Copy.cshtml" />
     <None Remove="Views\PublicInfo.cshtml" />
     <None Remove="Views\PublicProductBidBox.cshtml" />
     <None Remove="Views\_ViewImports.cshtml" />
@@ -61,9 +65,21 @@
     <Content Include="Areas\Admin\Views\Configure.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="Views\Auction\LiveScreenRoot.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Views\Auction\_ViewImports.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="Views\LiveAnnouncement.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>
+    <Content Include="Views\LiveScreen.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Views\Auction\_LiveScreenLayout.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
     <Content Include="Views\PublicInfo.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Content>

Nop.Plugin.Misc.AuctionPlugin/Views/Auction/LiveScreenRoot.cshtml

@@ -0,0 +1,22 @@
+@{
+    Layout = "_LiveScreenLayout.cshtml";
+}
+@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.BodyStartHtmlTagAfter })
+@{
+    await Html.RenderPartialAsync("_Notifications");
+}
+@{
+    await Html.RenderPartialAsync("_JavaScriptDisabledWarning");
+}
+
+<div class="master-wrapper-page">
+    
+   
+    <section>
+        <div class="container-fluid">
+            @RenderBody()
+        </div>
+    </section>
+</div>
+
+@await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.BodyEndHtmlTagBefore })

Nop.Plugin.Misc.AuctionPlugin/Views/Auction/_LiveScreenLayout.cshtml

@@ -0,0 +1,84 @@
+@using Nop.Core.Configuration
+@using Nop.Core.Domain.Catalog
+@using Nop.Core.Domain.Common
+@using Nop.Core.Domain.Seo
+@using Nop.Services.Security
+@using Nop.Core.Events
+@inject CatalogSettings catalogSettings
+@inject CommonSettings commonSettings
+@inject IEventPublisher eventPublisher
+@inject IPermissionService permissionService
+@inject SeoSettings seoSettings
+@inject AppSettings appSettings
+@{
+    if (catalogSettings.DisplayAllPicturesOnCatalogPages)
+    {
+        NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/swiper/swiper-bundle.min.js");
+    }
+
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/Themes/CypherClean/Content/scripts/bootstrap.bundle.min.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/Themes/CypherClean/Content/scripts/tether.min.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/js/public.countryselect.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/js/public.ajaxcart.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/js/public.common.js");
+    //when jQuery migrate script logging is active you will see the log in the browser console
+    if (commonSettings.JqueryMigrateScriptLoggingActive)
+    {
+        NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery-migrate/jquery-migrate.js");
+    }
+    else
+    {
+        NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery-migrate/jquery-migrate.min.js");
+    }
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery-ui-dist/jquery-ui.min.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery-validation/jquery.validate.min.js");
+    NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/lib_npm/jquery/jquery.min.js");
+
+    //custom tag(s);
+    if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
+    {
+        NopHtml.AppendHeadCustomParts(seoSettings.CustomHeadTags);
+    }
+    //event
+    await eventPublisher.PublishAsync(new PageRenderingEvent(NopHtml));
+    var title = await NopHtml.GenerateTitleAsync();
+    var description = await @NopHtml.GenerateMetaDescriptionAsync();
+    var keywords = await NopHtml.GenerateMetaKeywordsAsync();
+}
+<!DOCTYPE html>
+<html lang="@CultureInfo.CurrentUICulture.TwoLetterISOLanguageName" dir="@Html.GetUIDirection(!await Html.ShouldUseRtlThemeAsync())" class="@NopHtml.GeneratePageCssClasses()">
+<head>
+    <title>@title</title>
+    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
+    <meta name="description" content="@description" />
+    <meta name="keywords" content="@keywords" />
+    <meta name="generator" content="nopCommerce" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    @NopHtml.GenerateHeadCustom()
+    @*This is used so that themes can inject content into the header*@
+    @await Html.PartialAsync("Head")
+
+    @NopHtml.GenerateCssFiles()
+
+    @await Component.InvokeAsync(typeof(WidgetViewComponent), new { widgetZone = PublicWidgetZones.HeadHtmlTag })
+    @NopHtml.GenerateScripts(ResourceLocation.Head)
+    @NopHtml.GenerateCanonicalUrls()
+    @await Component.InvokeAsync(typeof(NewsRssHeaderLinkViewComponent))
+    @await Component.InvokeAsync(typeof(BlogRssHeaderLinkViewComponent))
+    @*Insert favicon and app icons head code*@
+    @await Component.InvokeAsync(typeof(FaviconViewComponent))
+    @NopHtml.GenerateScripts(ResourceLocation.Head)
+    @NopHtml.GenerateInlineScripts(ResourceLocation.Head)
+    <script src="https://kit.fontawesome.com/12c469cb8f.js" crossorigin="anonymous"></script>
+    <!--Powered by nopCommerce - https://www.nopCommerce.com-->
+    @Html.Raw(commonSettings.HeaderCustomHtml)
+</head>
+<body>
+    <nop-antiforgery-token />
+    @RenderBody()
+    @NopHtml.GenerateScripts(ResourceLocation.Footer)
+    @NopHtml.GenerateInlineScripts(ResourceLocation.Footer)
+    @Html.Raw(commonSettings.FooterCustomHtml)
+</body>
+</html>

Nop.Plugin.Misc.AuctionPlugin/Views/Auction/_ViewImports.cshtml

@@ -0,0 +1,32 @@
+@inherits Nop.Web.Framework.Mvc.Razor.NopRazorPage<TModel>
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, Nop.Web.Framework
+
+@inject INopHtmlHelper NopHtml
+
+@using System.Globalization;
+@using System.Text.Encodings.Web
+@using Microsoft.AspNetCore.Mvc.ViewFeatures
+@using System.Text.Encodings.Web
+@using Newtonsoft.Json
+@using Nop.Core
+@using Nop.Core.Infrastructure
+@using Nop.Core.Domain.Catalog
+@using Nop.Core.Domain.Seo;
+@using Nop.Services.Events
+@using Nop.Web.Components
+@using Nop.Web.Framework
+@using Nop.Web.Framework.Events
+@using Nop.Web.Framework.Infrastructure
+@using Nop.Web.Extensions
+@using Nop.Web.Framework.Extensions
+@using Nop.Web.Framework.Models
+@using Nop.Web.Framework.Models.DataTables
+@using Nop.Web.Framework.Security.Captcha
+@using Nop.Web.Framework.Security.Honeypot
+@using Nop.Web.Framework.Themes
+@using Nop.Web.Framework.UI
+@using Nop.Web.Areas.Admin.Models.Catalog
+@using Nop.Plugin.Misc.AuctionPlugin
+@using Nop.Plugin.Misc.AuctionPlugin.Models
+@using Nop.Plugin.Misc.AuctionPlugin.Services

Nop.Plugin.Misc.AuctionPlugin/Views/LiveScreen.cshtml

@@ -0,0 +1,21 @@
+@model LiveScreenViewModel
+@using Nop.Core.Infrastructure
+@using Nop.Web.Framework
+
+@{
+    var defaultGridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().DefaultGridPageSize;
+    var gridPageSizes = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSizes;
+    Layout = "Auction/LiveScreenRoot.cshtml";
+    //page title
+    
+}
+<div>
+
+    <h1>Live screen</h1>
+
+</div>
+
+
+
+
+

Nop.Plugin.Misc.AuctionPlugin/Views/PublicInfo.cshtml

@@ -1,9 +1,44 @@
 @model AuctionPublicInfoModel
 
-<div class="bg-dark">
+
-    <h3>Auction viewcomponent</h3>
+
-    <label for="w3w">@T("Plugins.Misc.AuctionPLugin.Label"):</label>
+<script asp-location="Footer">
-    <div class="">
+    var pageViewModel;
-        <p>General widget info: @Model.Message</p>
+
-    </div>
+    $(document).ready(function () {
-</div>
+        // Deserialize the server-side model
+        pageViewModel = @Html.Raw(Json.Serialize(Model));
+        console.log("Page View Model:", pageViewModel);
+        console.log(pageViewModel.ProductId);
+        console.log(pageViewModel.ProductToAuctionMappingId);
+        // Get the element with data-productid
+        var productItem = $('.product-item[data-productid="' + pageViewModel.ProductId + '"]');
+
+        // Check if element exists
+        if (productItem.length > 0 && pageViewModel.ProductToAuctionMappingId > 0) {
+            console.log("Product item found:", productItem);
+            // Add a new div as the first child
+            if (pageViewModel.IsActive) {
+                productItem.prepend('<div class="bg-success p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> '
+                    + 'LIVE RIGTH NOW' +
+                    '</i></div>');
+            }
+            else {
+                productItem.prepend('<div class="bg-primary p-1 text-white fs-6 text-center" style="position: absolute; width: calc(100% - 1rem); height: 40px; z-index: 1;"><i class="fa-solid fa-gavel"> '
+                    + pageViewModel.StartDate +
+                    '</i></div>');
+            }
+            
+        } else {
+            console.error("Product item not found with productId:", pageViewModel.ProductId);
+        }
+    });
+
+
+    function refreshPublicInfo@(Model.ProductId)(data) {
+
+        console.log('function called: refreshPublicInfo'+@(Model.ProductId))
+    }
+
+</script>
+

Nop.Plugin.Misc.AuctionPlugin/Views/PublicProductBidBox.cshtml

@@ -1,5 +1,5 @@
 @model ProductBidBoxViewModel
-@inject IJsonHelper JsonHelper;
+@* @inject IJsonHelper JsonHelper; *@
 
 @* @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(myObj) as String) *@
 
@@ -19,7 +19,7 @@
                 </div>
                 <div>
                     <strong>Bid Step:</strong>
-                    <span class="value">@String.Format("{0:c}", Model.LicitStep)</span>
+                    <span id="licitStepText" class="value">@String.Format("{0:c}", Model.LicitStep)</span>
                 </div>
                 <div>
                     <button id="signalRBidButton" class="btn btn-success" style="text-transform: uppercase;" type="button">
@@ -75,28 +75,38 @@
 }
 
 <script>
-    var pageViewModel = undefined;
+    var bidBoxPageViewModel;
-    $(document).ready(function () {
 
-        pageViewModel = @Html.Raw(Json.Serialize(Model));
+    $(window).load(function () {
-        console.log(pageViewModel);
+        try {
-        console.log(pageViewModel.WidgetZone);
+
+            bidBoxPageViewModel = @Html.Raw(Json.Serialize(Model));
+        }
+        catch (e) {
+            console.log(e); // Logs the error
+        }
+        console.log("bidBoxPageViewModel " + bidBoxPageViewModel);
+        console.log(bidBoxPageViewModel.WidgetZone);
         console.log(typeof sendMessageToServer);
 
         $("#signalRBidButton").on("click", function () {
 
             document.getElementById("signalRBidButton").disabled = true;
             event.preventDefault();
-
+            if (!bidBoxPageViewModel) {
+                console.log("we need viewmodel data");
+                bidBoxPageViewModel = @Html.Raw(Json.Serialize(Model));
+            }
             var bidMessage = {
-                ProductAuctionMappingId: pageViewModel.ProductToAuctions,
+                ProductAuctionMappingId: bidBoxPageViewModel.ProductToAuctionId,
-                AuctionId: pageViewModel.AuctionId,
+                AuctionId: bidBoxPageViewModel.AuctionId,
-                BidPrice: pageViewModel.BidPrice,
+                BidPrice: bidBoxPageViewModel.BidPrice,
-                ProductId: pageViewModel.ProductId,
+                ProductId: bidBoxPageViewModel.ProductId,
-                CustomerId: pageViewModel.CustomerId
+                CustomerId: bidBoxPageViewModel.CustomerId
             };
             var content = JSON.stringify(bidMessage);
-            sendMessageToServer("BidRequestMessage", pageViewModel.CustomerId, content);
+            console.log("WTF " + content);
+            sendMessageToServer("BidRequestMessage", bidBoxPageViewModel.CustomerId, content);
 
             return false;
         });
@@ -107,12 +117,12 @@
             event.preventDefault();
 
             var openItemMessage = {
-                ProductAuctionMappingId: pageViewModel.ProductToAuctions,                
+                ProductAuctionMappingId: bidBoxPageViewModel.ProductToAuctionId,
-                AdminId: pageViewModel.CustomerId
+                AdminId: bidBoxPageViewModel.CustomerId
             };
             var content = JSON.stringify(openItemMessage);
             console.log(content);
-            sendMessageToServer("OpenItemRequestMessage", pageViewModel.CustomerId, content);
+            sendMessageToServer("OpenItemRequestMessage", bidBoxPageViewModel.CustomerId, content);
 
             return false;
         });
@@ -122,12 +132,12 @@
             event.preventDefault();
 
             var itemFirstWarningMessage = {
-                ProductAuctionMappingId: pageViewModel.ProductToAuctions,                
+                ProductAuctionMappingId: bidBoxPageViewModel.ProductToAuctionId,
-                AdminId: pageViewModel.CustomerId
+                AdminId: bidBoxPageViewModel.CustomerId
             };
             var content = JSON.stringify(itemFirstWarningMessage);
             console.log(content);
-            sendMessageToServer("FirstWarningMessage", pageViewModel.CustomerId, content);
+            sendMessageToServer("FirstWarningMessage", bidBoxPageViewModel.CustomerId, content);
 
             return false;
         });
@@ -136,21 +146,28 @@
 
     function refreshPublicBidBox(data) {
 
+        let HUFFormatter = new Intl.NumberFormat('hu-HU', {
+            style: 'currency',
+            currency: 'HUF',
+        });
 
-        var widgetPriceElement = document.getElementById("price-value-" + pageViewModel.ProductId);
+        var widgetPriceElement = document.getElementById("price-value-" + bidBoxPageViewModel.ProductId);
         var budButtonElement = document.getElementById("signalRBidButton");
+        var licitStepElement = document.getElementById("licitStepText");
 
         if (widgetPriceElement) {
-            widgetPriceElement.textContent = data.bidPrice; // Update the price
+            widgetPriceElement.textContent = HUFFormatter.format(data.bidPrice); // Update the price
+            licitStepElement.textContent = HUFFormatter.format(data.nextStepAmount);
+            bidBoxPageViewModel.BidPrice = Number(data.bidPrice) + Number(data.nextStepAmount);
 
-            pageViewModel.BidPrice = Number(data.bidPrice) + Number(data.nextStepAmount);
+            budButtonElement.textContent = "Bid " + HUFFormatter.format(bidBoxPageViewModel.BidPrice);
-            budButtonElement.textContent = pageViewModel.BidPrice.toFixed(2);
 
-            // if (pageViewModel.CustomerId == data.CustomerId) {
+
+            // if (bidBoxPageViewModel.CustomerId == data.CustomerId) {
 
             // }
 
-            console.log(`WidgetPrice updated to: ${data.bidPrice}`);
+            console.log(`WidgetPrice updated to: ${data.bidPrice}, next bid is ${bidBoxPageViewModel.BidPrice}`);
             budButtonElement.disabled = false;
         } else {
             console.warn("Element with ID 'WidgetPrice' not found in the DOM.");