Blazor Client Side Интернет Магазин: Часть 4 — Добавления товара в корзину



    Привет, Хабр! Продолжаю делать интернет магазин на Blazor. В этой части расскажу о том как добавил в него возможность добавления товара в корзину. За подробностями добро пожаловать под кат.

    Содержание



    Ссылки


    → Исходники
    Образы на Docker Registry

    Код


    В модель ProductsModel добавил поле для количества товаров в корзине.

       public int ItemsInBasketCount { get; set; }
    

    В ProductsViewModel добавил:
    Для проверки отображения всплывающих окон и проверки состояния аутентификации пользователя.

            [Inject]
            public AuthenticationStateProvider AuthStateProvider { get; set; }
    
            [Inject]
            public IJSRuntime Js { get; set; }
    

    Для получения текущего количества предметов в корзине.

            private async Task LoadItemsInBasketCount()
            {
                var (res, err) = await Repository.GetItemsInBasketCount();
                if (!string.IsNullOrWhiteSpace(err))
                {
                    Model.HandledErrors += $";{err}";
                }
                else
                {
                    Model.ItemsInBasketCount = res;
                }
            }
    

    Проверка состояния аутентификации.

            private async Task<bool> IsAuth()
            {
                var state = await AuthStateProvider.GetAuthenticationStateAsync();
                return state?.User?.Identity?.IsAuthenticated ?? false;
            }
    

    Добавление товара в корзину.

            public async Task AddToBasket(Guid productId)
            {
                Model.IsLoaded = false;
                if (!await IsAuth())
                {
                    await Js.InvokeVoidAsync(
                         "alert",
                         "Пожалуйста авторизуйтесь в системе для добавления товаров в корзину. Кнопка для входа в верхнем правом углу."
                         );
                    Model.IsLoaded = true;
                    return;
                }
                var (r, e) = await Repository.AddToBasket(productId);
                Model.HandledErrors = e;
                Model.IsLoaded = true;
                await LoadItemsInBasketCount();
            }
    

    В Products.razor Добавил:

    Для отображения количества товаров в корзине.

    <AuthorizeView>
        <Authorized>
            Товаров в корзине: @Model.ItemsInBasketCount
        </Authorized>
    </AuthorizeView>
    

    Для добавления товара в корзину.

    <td>
        <input type="button"
               value="Добавить в корзину"
               class="btn btn-success"
               @onclick="@(async x=> await AddToBasket(product.Id))" />
    </td>
    

    Версия на Angular


    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое