Wishlist items are not added nor updating

See more:

PHP

jQuery

HTML5

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:

// html code

 <!--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 () {
    // Initialize wishlist count to 0
    let wishlistCount = 0;

    // Function to update the wishlist badge count
    function updateWishlistBadge() {
        $("#wishlist-badge").text(wishlistCount);
    }

    // Function to open the login modal when the badge is clicked
    function openLoginModal() {
        $("#wishlistLoginModal").modal("show");
    }

    // Function to display wishlist items
    function displayWishlistItems() {
        // Here, you should make an AJAX request to your server to fetch the user's wishlist items.
        // Replace the following code with your actual request:
        $.ajax({
            url: 'get-wishlist-product.php', // Replace with your API endpoint
            method: 'GET',
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    // The server should return an array of wishlist items.
                    const wishlistItems = response.items;

                    // Clear the existing items in the list
                    $('#wishlistItems').empty();

                    // Add each item to the list
                    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);
            }
        });
    }

    // Listen for the "Add to Wishlist" button click
    $(".add-to-wishlist").click(function () {
        // Simulate adding an item to the wishlist
        const productID = $(this).data("id");
        const productName = $(this).data("product-name");
        const productImage = $(this).data("product-image");

        // You can now send this product information to the server 
        // using an AJAX request to add it to the user's wishlist.
        // Replace the following code with your actual request:
        $.ajax({
            url: 'add-to-wishlist.php', // Replace with your API endpoint
            method: 'POST',
            data: { product_id: productID, 
            product_name: productName, product_image: productImage },
            dataType: 'json',
            success: function (response) {
                if (response.success) {
                    // If the product is successfully added to the wishlist, 
                    // update the badge count
                    wishlistCount++;
                    updateWishlistBadge();

                    // If items are in the wishlist, 
                    // open the login modal and display items
                    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);
            }
        });
    });
});