To remove a product from the wishlist when a user deselects it (i.e., removing the product from the wishlist when clicking the "Wishlist" button again), you can modify the JavaScript code to handle the toggling of adding and removing products from the wishlist. Here's an example of how to do it:
**HTML for the Wishlist Button:**
```html
<!-- Add this button to your product page -->
<button id="wishlistButton" onclick="toggleWishlist(123)">Add to Wishlist</button>
```
In this example, `123` is the product ID. Replace it with the actual product ID you want to add or remove from the user's wishlist.
**JavaScript for Toggling Wishlist:**
```html
<script>
function toggleWishlist(product_id) {
// Check if the user is logged in (you might use a PHP session or other method)
var userLoggedIn = true; // Replace with your login check
if (userLoggedIn) {
// Get the current state of the product in the wishlist
var isAdded = $('#wishlistButton').hasClass('added');
if (isAdded) {
// Product is in the wishlist, remove it
removeFromWishlist(product_id);
} else {
// Product is not in the wishlist, add it
addToWishlist(product_id);
}
} else {
// User is not logged in, handle this case (e.g., show a login popup)
}
}
function addToWishlist(product_id) {
$.ajax({
type: "POST",
url: "add_to_wishlist.php", // Replace with the actual URL of your PHP script
data: { product_id: product_id },
success: function(response) {
if (response === "success") {
$('#wishlistButton').text("Remove from Wishlist");
$('#wishlistButton').addClass('added');
} else {
alert("Error adding the product to your wishlist.");
}
}
});
}
function removeFromWishlist(product_id) {
$.ajax({
type: "POST",
url: "remove_from_wishlist.php", // Replace with the actual URL of your PHP script
data: { product_id: product_id },
success: function(response) {
if (response === "success") {
$('#wishlistButton').text("Add to Wishlist");
$('#wishlistButton').removeClass('added');
} else {
alert("Error removing the product from your wishlist.");
}
}
});
}
</script>
```
In the above code, we have modified the `toggleWishlist` function to check if the product is already in the wishlist (based on a CSS class 'added' in this example) and either add or remove it based on the current state.
**PHP for Removing from Wishlist (`remove_from_wishlist.php`):**
You will need to create a `remove_from_wishlist.php` script that removes the product from the wishlist in your database. It's similar to the `add_to_wishlist.php` script but with a `DELETE` or similar SQL statement to remove the product.
Make sure to handle the database interaction correctly in your `remove_from_wishlist.php` script.
With this setup, the user can add or remove products from their wishlist by clicking the "Wishlist" button, and the button's text and styling will change accordingly.
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