Add Copy URL button to the Wishlist Share dialog/popup

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' %} 

Leave a Reply

Your email address will not be published.