Click here to Skip to main content
15,907,395 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
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 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 class="text-muted ml-2"><del>R200.00</del></h6>
        <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"
            ^__i class="fas fa-heart text-danger mr-1">Add To Wishlist</a>


// server side
$(document).ready(function () {
    // Initialize wishlist count to 0
    let wishlistCount = 0;

    // Function to update the wishlist badge count
    function updateWishlistBadge() {

    // Function to open the login modal when the badge is clicked
    function openLoginModal() {

    // 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:
            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

                    // Add each item to the list
                    wishlistItems.forEach(function (item) {
    (`<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:
            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

                    // If items are in the wishlist, 
                    // open the login modal and display items
                    if (wishlistCount > 0) {
                } else {
                    console.error('Failed to add to wishlist:', 
            error: function (error) {
                console.error('Error adding to wishlist:', error);
Updated 12-Oct-23 11:15am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900