<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Include Bootstrap JavaScript and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Your product page content -->
<button onclick="addToWishlist(123)">Add to Wishlist</button>
<!-- Login Popup -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Your login form goes here -->
</div>
</div>
</div>
</div>
<script>
function addToWishlist(product_id) {
// Check if the user is logged in (you might use a PHP session or other method)
var userLoggedIn = false; // Replace with your login check
if (userLoggedIn) {
// User is logged in, add the product to the wishlist
// Implement this part using an AJAX request to a PHP script
} else {
// User is not logged in, show the login popup
$('#loginModal').modal('show');
}
}
</script>
</body>
</html>
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