On the wishlist page, by default the user is prompted to visit the corresponding product page to select the variant whenever the variant selection is required before adding the item to Shopping Cart.
However, using some custom Javascript implementation, we can skip this step and display the list of available variants asynchronously on the Wishlist page itself.
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. If WishlistLoadedCallback is already defined, append the inner code of the following function to it.
{% unless template %}
<!-- Begin Smart Wishlist Callback -->
<script type="text/javascript">
WishlistLoadedCallback=function(){
$("body").off("click","#visit_product_button").on("click","#visit_product_button",function()
{
$("#variant_selection_modal").modal('hide');
var temp_product_variant=$("#select_variant").val().split(".");
$(".wishlistpage").find(`a.addsingleproduct[data-productid='${temp_product_variant[0]}']`).data("variantid",temp_product_variant[1]).data("is_chosen_variant","1").trigger('click');
});
$('#variant_selection_modal').on('show.bs.modal', function(e) {
var source_url=$(this).find("#visit_product_button").attr("data-url");
$.getJSON( source_url+".json", function(data) {
var temp_select='<select id="select_variant">';
var temp_variants = data.product.variants;
temp_variants.forEach(function(temp_variant)
{
temp_select+='<option value="'+temp_variant.product_id+'.'+temp_variant.id+'">'+temp_variant.title+'</option>';
});
temp_select+='</select>';
$("#select_variant").remove();
$("#variant_selection_modal_text").append(temp_select);
//console.log(temp_select);
});
});
};
</script>
{% 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' %}