document.addEventListener('DOMContentLoaded', function() {
var wishlistButton = document.getElementById('wishlistBtn');
wishlistButton.addEventListener('click', function() {
// Create or toggle popup container
var popupContainer = document.querySelector('.popup');
if (!popupContainer) {
popupContainer = document.createElement('div');
popupContainer.className = 'popup';
popupContainer.innerHTML = `
<div class="popup-content">
<span class="close" onclick="closePopup()">×</span>
<h2>Wishlist</h2>
${getWishlistContent()} <!-- Insert WooCommerce Smart Wishlist shortcode content here -->
<p><a href="#" id="wishlistLink">View Wishlist</a></p>
</div>
`;
// Set the link to the wishlist page (replace with your wishlist link)
var wishlistLink = popupContainer.querySelector('#wishlistLink');
wishlistLink.href = '#'; // replace with your wishlist page URL
// Append the popup container to the body
document.body.appendChild(popupContainer);
} else {
// Toggle display property
var currentDisplay = window.getComputedStyle(popupContainer).getPropertyValue('display');
popupContainer.style.display = currentDisplay === 'none' ? 'block' : 'none';
}
});
// Function to close the popup
window.closePopup = function() {
var popupContainer = document.querySelector('.popup');
if (popupContainer) {
document.body.removeChild(popupContainer);
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter