To change the color of the wishlist button to pink if the number of rows in the wishlist table is greater than 0, you need to fetch the data from the wishlist table using PHP and then dynamically set the button's appearance based on the result. Here's a general outline of how to achieve this:
PHP to Check Wishlist Status:
1. Create a PHP script to check if a product is in the wishlist and return a result. You would typically do this based on the product ID and the user's ID (if you have user accounts). You can also count the number of rows in the wishlist table where the product ID and user ID match.
// Check if the user is logged in and get the user's ID
// Replace this with your actual user authentication code
// Get the product ID (replace with your actual method)
$product_id = 123;
// Query the database to check if the product is in the wishlist
$user_id = 1; // Replace with the actual user's ID
$query = "SELECT COUNT(*) AS count FROM wishlist WHERE user_id = $user_id AND product_id = $product_id";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_assoc($result);
if ($row['count'] > 0) {
// Product is in the wishlist
echo "active"; // Return a response to the JavaScript
} else {
// Product is not in the wishlist
echo "inactive"; // Return a response to the JavaScript
}
JavaScript to Set Button Appearance:
2. In your HTML page, use JavaScript to make an AJAX request to the PHP script to check the wishlist status of the product and set the button's appearance accordingly.
In this setup, you first check the wishlist status using PHP and return either "active" or "inactive" based on whether the product is in the wishlist. The JavaScript code then sets the button's appearance accordingly when the page loads and during user interactions.
<svg class="wishlist-button" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
</path></svg>
<style>
.wishlist-button {
fill: #000; /* Default color */
cursor: pointer;
}
.wishlist-button.active {
fill: #ff69b4; /* Pink color for active (in wishlist) */
}
</style>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me