A useful feature that can be added to the Wishlist share dialog/modal/popup is a Copy URL button. Upon clicking it, the Wishlist URL would automatically be shared to the clipboard of users’ computer/device. This speeds up manual sharing of Wishlist.
This is how it looks like. You can always modify its appearance.
STEPS
1. Create a new snippet titled wishlist-enhancements. It creates the file snippets/wishlist-enhancements.liquid. If this file already exists, skip this step.
2. Add the following code to it.
{% unless template %}
<!-- Begin Smart Wishlist Callback -->
<script type="text/javascript">
$("#wishlist_share_modal").find(".modal-footer").prepend('<button type="button" class="btn btn-info btn-info-modal" id="copyclipboard" style="background-color:blue;border-color:blue;color:#fff">Copy URL to clipboard</button>');
$("body").on("click","#copyclipboard", function(){
var $temp = $("<input>");
$("body").append($temp);
$temp.val($("#wishlist_url").text()).select();
var temp_share_button_title=$(this).html();
$(this).html("URL Copied!"); //text to be displayed after URL copied
setTimeout(function() {
$(this).html(temp_share_button_title);
},1000);
navigator.clipboard.writeText($temp.val())
.catch((error) => { alert(`Copy failed! ${error}`) })
$temp.remove();
});
</script>
<!-- End Smart Wishlist Callback -->
{% endunless %}3. Add the following code anywhere before closing </head> in layout/theme.liquid. If already added, you can skip this step.
{% include 'wishlist-enhancements' %}