I have a wishlist and what I want is when I add an item, the wishlist must update that item. Following its modal form so users can log in and view their wishlist. Currently, when debugging from server side, I message user is logged in. This step is supposed to come once users can see their items being added to the wishlist. What am I doing wrong?
What I have tried:
<!--adding some items to wishlist-->
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<img class="img-fluid w-100" src="img/wishlist-img/SecondWishlist.jpg" alt="">
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3">Colorful Stylish Shirt</h6>
<div class="d-flex justify-content-center">
<h6>R200.00</h6>
<h6 class="text-muted ml-2"><del>R200.00</del></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<a href="" class="btn btn-sm text-dark p-0">View Detail</a>
<a href="#" class="btn btn-sm text-dark p-0 add-to-wishlist" data-id="12"
data-product-name="Colorful Stylish Shirt"
data-product-image="img/wishlist-img/SecondWishlist.jpg">
^__i class="fas fa-heart text-danger mr-1">Add To Wishlist</a>
</div>
</div>
</div>
0
// server side
$(document).ready(function () {
let wishlistCount = 0;
function updateWishlistBadge() {
$("#wishlist-badge").text(wishlistCount);
}
function openLoginModal() {
$("#wishlistLoginModal").modal("show");
}
function displayWishlistItems() {
$.ajax({
url: 'get-wishlist-product.php',
method: 'GET',
dataType: 'json',
success: function (response) {
if (response.success) {
const wishlistItems = response.items;
$('#wishlistItems').empty();
wishlistItems.forEach(function (item) {
$('#wishlistItems').append
(`<li class="list-group-item">${item.product_name}</li>`);
});
}
},
error: function (error) {
console.error('Error fetching wishlist items:', error);
}
});
}
$(".add-to-wishlist").click(function () {
const productID = $(this).data("id");
const productName = $(this).data("product-name");
const productImage = $(this).data("product-image");
$.ajax({
url: 'add-to-wishlist.php',
method: 'POST',
data: { product_id: productID,
product_name: productName, product_image: productImage },
dataType: 'json',
success: function (response) {
if (response.success) {
wishlistCount++;
updateWishlistBadge();
if (wishlistCount > 0) {
displayWishlistItems();
openLoginModal();
}
} else {
console.error('Failed to add to wishlist:',
response.message);
}
},
error: function (error) {
console.error('Error adding to wishlist:', error);
}
});
});
});