This is an interesting scenario related to the Wishlist Link. By default, when the wishlist is non-empty, a counter containing number of items present in the wishlist is displayed next to the wishlist link. When the wishlist is empty, the counter is hidden.
Sometimes, you may want to display different texts depending on if the wishlist is empty and non-empty. Let’s say, our wishlist has a heart and text. For empty wishlists, we want heart outline and for non-empty wishlists we want a filled heart.
1. Make sure that the Wishlist item counter is enabled. We use this for determining if the wishlist is empty or not.
If you want to hide the counter, use CSS to hide it. Add the following CSS to the Extra CSS tool (Optional)
span.topbadge {
display: none !important;
}2. In this example, we assume that the following is the HTML of wishlist link. The FontAwesome shortcodes of fa-heart and fa-heart-o are used to display the filled and outline heart icons respectively
<a href="/a/wishlist" id="smartwishlist_desktop_link" title="My Wishlist"> <i class="fa fa-heart-o"></i>Wishlist</a>
3. Add the following Javascript to the theme.
setInterval(function() {
if(($(".topbadge").html()!==undefined)&&($(".topbadge").html()!=="")&&($(".topbadge").html()!=="0")) $("#smartwishlist_desktop_link i").removeClass("fa-heart fa-heart-o").addClass("fa-heart");
else $("#smartwishlist_desktop_link i").removeClass("fa-heart fa-heart-o").addClass("fa-heart-o");
}, 1000); 4. The logic is simple. If topbadge class (used for counter) has a valid non-zero value, the wishlist is non-empty. This is checked every 1000 miliseconds and accordingly the link is updated.
This logic can be extended to display any pair of contents for empty and non-empty wishlists.