How to add wishlist using jquery and server side?

Sure! Let's clean up the code step by step.

Step 1: Use the Fetch API The Fetch API provides a more modern way to make web requests and is built into modern browsers. It returns Promises, which can be used with async/await to write more readable asynchronous code.

Reasons to use the Fetch API over jQuery's AJAX:

No Dependency: Fetch is built into modern browsers, so you don't need an external library. Promises: Fetch is promise-based, which is more modern than jQuery's callback-based AJAX. Readable: With async/await, Fetch becomes even more readable than jQuery's AJAX. Step 2: Use Async/Await Async/await is a way to handle Promises that makes asynchronous code look and behave a bit more like synchronous code. This makes the code more readable and easier to understand.

Step 3: Clean up the PHP We will organize the PHP code to make it cleaner.

Let's start with the JavaScript:

document.addEventListener('DOMContentLoaded', async function() {
    let wishlistCount = 0;

    function updateWishlistBadge() {
        document.getElementById("wishlist-badge").textContent = wishlistCount;
    }

    function openLoginModal() {
        $('#wishlistLoginModal').modal("show");
    }

    async function displayWishlistItems() {
        try {
            let response = await fetch('get-wishlist-product.php');
            let data = await response.json();

            if (data.success) {
                const wishlistItems = data.items;
                const wishlistContent = document.getElementById('wishlistContent');
                wishlistContent.innerHTML = '';

                wishlistItems.forEach(item => {
                    let listItem = document.createElement('li');
                    listItem.className = 'list-group-item';
                    listItem.textContent = item.product_name;
                    wishlistContent.appendChild(listItem);
                });
            }
        } catch (error) {
            console.error('Error fetching wishlist items:', error);
        }
    }

    document.querySelectorAll(".add-to-wishlist").forEach(button => {
        button.addEventListener('click', async function() {
            const productID = this.dataset.id;
            const productName = this.dataset.productName;
            const productImage = this.dataset.productImage;

            try {
                let response = await fetch('add-to-wishlist.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        product_id: productID,
                        product_name: productName,
                        product_image: productImage
                    })
                });

                let data = await response.json();

                if (data.success) {
                    wishlistCount++;
                    updateWishlistBadge();

                    if (wishlistCount > 0) {
                        await displayWishlistItems();
                        openLoginModal();
                    }
                } else {
                    console.error('Failed to add to wishlist:', data.message);
                }
            } catch (error) {
                console.error('Error adding to wishlist:', error);
            }
        });
    });
});

For the PHP:

 false, "message" => "Unknown error."];

if (isset($_SESSION['user_id'])) {
    try {
        $user_id = $_SESSION['user_id'];
        $product_name = $_POST['product_name'];
        $product_image = $_POST['product_image'];
        $product_code = $_POST['product_code'];

        $pdo = new PDO("mysql:host=localhost;dbname=testdb;charset=utf8", "username", "password");

        $productQuery = "SELECT id FROM products WHERE product_name = :product_name AND product_image = :product_image AND product_code = :product_code";
        $productStmt = $pdo->prepare($productQuery);
        $productStmt->bindParam(":product_name", $product_name, PDO::PARAM_STR);
        $productStmt->bindParam(":product_image", $product_image, PDO::PARAM_STR);
        $productStmt->bindParam(":product_code", $product_code, PDO::PARAM_STR);
        $productStmt->execute();

        if ($productStmt->fetch()) {
            $query = "INSERT INTO wishlist (user_id, product_name, product_image, product_code) VALUES (:user_id, :product_name, :product_image, :product_code)";
            $stmt = $pdo->prepare($query);
            $stmt->bindParam(":user_id", $user_id, PDO::PARAM_INT);
            $stmt->bindParam(":product_name", $product_name, PDO::PARAM_STR);
            $stmt->bindParam(":product_image", $product_image, PDO::PARAM_STR);
            $stmt->bindParam(":product_code", $product_code, PDO::PARAM_STR);
            $stmt->execute();

            $response = ["success" => true, "message" => "Product added to your wishlist."];
        } else {
            $response = ["success" => false, "message" => "Product does not exist."];
        }
    } catch (Exception $e) {
        $response = ["success" => false, "message" => "Database error: " . $e->getMessage()];
    }
} else {
    $response = ["success" => false, "message" => "User is not logged in."];
}

header("Content-Type: application/json");
echo json_encode($response);
?>

Notes: I've replaced jQuery AJAX with Fetch API and used async/await for asynchronous operations. I've organized the PHP code to make it cleaner and added a try-catch block to handle potential PDO exceptions. Make sure to replace placeholders like database connection details with actual values. The code assumes that add-to-wishlist is a class assigned to multiple elements. If it's an ID for a single element, replace document.querySelectorAll with document.getElementById and adjust the logic accordingly.