Witam. Mam sklep internetowy i mechanizm koszyka napisany w ASP.Net i dopiąłem sobie do niego kod AJAX aby można było usuwać produkty z koszyka bez przeładowania. Kod działa i usuwa poprawnie. Podczas gdy w koszyku jest min. 2 sztuki tego samego produktu to skrypt po usunięciu zmniejsza je o jeden i wszystko dobrze aktualizuje.
Problem jest gdy zostaje ostatnia sztuka produktu i ją usuwam, wtedy wszystko sie aktualizuje na 0 więc działa poprawnie, jest efekt "slow" zanikania produktu ale od razu po zakończeniu tego efektu produkt powraca i nadal widnieje na stronie mimo, że go już nie ma w koszyku (dopiero po przeładowaniu strony koszyk jest pusty). Czy to problem ze strony AJAXA, że ten produkt wizualnie ostatecznie nie znika bo od strony backendu wszystko się usuwa?
<script type="text/javascript">
$(function () {
$(".delete_product").click(function () {
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
$.post("/Cart/DeleteFromCart", { "prodId": recordToDelete },
function (response) {
if (response.RemovedItemNumber == 0) {
$('#cart-line-' + response.RemovedItemId).fadeOut('slow', function () {
if (response.CartItemsNumber == 0) {
$("#cart-empty-message").addClass("hidden");
}
});
} else {
$('#cart-positions-number-' + response.RemovedItemId).text(response.RemovedItemNumber);
$('#product-total-price-' + response.RemovedItemId).text(response.CartTotalProductAmount + ' zł');
}
if (response.CartItemsNumber == 0) {
$('#cart-button-pay').addClass('hidden');
$('#total-price').addClass('invisible');
}
$('#total-price-value').text(response.CartTotalPrice);
$('#cart-header-number').text(response.CartItemsNumber);
$('#cart-header-value').text(response.CartTotalPrice + ' zł');
});
return false;
}
});
});
</script>
CartController.cs
public ActionResult DeleteFromCart(int prodId)
{
int positionsNumber = cartMenager.DeleteFromCart(prodId);
int cartPositionsNumber = cartMenager.TakeQuantityCartPosition();
decimal cartValue = cartMenager.TakeCartValue();
var product = _productRepo.GetOne(prodId);
decimal productPrice = product.ProductPrice;
var result = new DeleteFromCartViewModel
{
RemovedItemId = prodId,
RemovedItemNumber = positionsNumber,
CartTotalPrice = cartValue,
CartItemsNumber = cartPositionsNumber,
CartTotalProductAmount = productPrice * positionsNumber
};
return Json(result);
}
HTML Koszyka
<!-- Cart Items -->
<div class="cart_items">
<ul class="cart_items_list">
@foreach (var item in Model.CartPositions)
{
<li id="cart-line-@item.Product.ProductId" class="cart_item item_list d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
<div class="product d-flex flex-lg-row flex-column align-items-lg-center align-items-start justify-content-start">
<div><div class="product_image"><img src="@Url.ProductsMiniaturesPath(item.Product.ImageFileName+".jpg")" alt=""></div></div>
<div class="product_name"><a href="@Url.Action("Details", "Products", new { id=item.Product.ProductId})">@item.Product.ProductTitle</a></div>
</div>
<div class="product_color text-lg-center product_text"><span> </span></div>
<div class="product_price text-lg-center product_text"><span>Cena: </span>@item.Product.ProductPrice zł</div>
<div class="product_quantity_container">
<div class="product_quantity ml-lg-auto mr-lg-auto text-center">
<span id="cart-positions-number-@item.Product.ProductId" class="product_text product_num">@item.Quantity</span>
<!--<div class="qty_sub qty_button trans_200 text-center"><span>-</span></div>
<div class="qty_add qty_button trans_200 text-center"><span>+</span></div>-->
</div>
</div>
<div class="product_total text-lg-center product_text" id="product-total-price-@item.Product.ProductId">@(item.Product.ProductPrice * item.Quantity) zł</div>
<div class="product_size text-lg-center product_text"><a class="delete_product" data-id="@item.Product.ProductId" href="#"><b>Usuń</b></a></div>
</li>
}
@if (Model.CartPositions == null || Model.CartPositions.Count == 0)
{
<li id="cart-empty-message" >
<span>Twój koszyk jest pusty. Może chcesz coś dodać do koszyka?</span>
</li>
}
</ul>
</div>
