The Wishlist page generated by Smart Wishlist automatically displays the image associated with the selected variant or the first image associated to the product. However, it is possible to display an alternate image when mouse is hovered over the product.
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 and save it.
{% unless template %}
<!-- Begin Smart Wishlist Callback -->
<script type="text/javascript">
WishlistLoadedCallback=function(){
if($("#bookmarks").has(".addsingleproduct").length>0)
{
if (shared_wishlist==0) wishlist_data_source=wishlist_item_data; else wishlist_data_source=wishlist_item_data_shared;
$("#bookmarks .addsingleproduct").each(function()
{
var current_button=$(this);
wishlist_data_source.forEach(function(wp_temp_product)
{
//add src for hover image.
if(wp_temp_product.id==current_product_id)
{
if(wp_temp_product.images.length>1) $(current_button).parent().parent().prev().children().children().attr('hoverimg',wp_temp_product.images[1].src);
}
});
});
}
//function to implement image change on hover
$("body").on("mouseenter mouseleave", ".product", function(event){
var original_image=$(this).find("img").attr("src");
var hover_image=$(this).find("img").attr("hoverimg");
if(hover_image!=undefined)
{
$(this).find("img").attr("src",hover_image);
$(this).find("img").attr("hoverimg",original_image);
}
});
};
</script>
<!-- End Smart Wishlist Callback -->
{% endunless %}3. Add the following code anywhere before closing </head> in layout/theme.liquid.
{% include 'wishlist-enhancements' %} 4. If you have already implemented the WishlistLoadedCallbackFunction for other features, you can skip the above steps. To add this feature, you just need to add the following 2 snippets. The location of these snippets would be same as displayed in Step #2 above.
if(wp_temp_product.id==current_product_id)
{
if(wp_temp_product.images.length>1) $(current_button).parent().parent().prev().children().children().attr('hoverimg',wp_temp_product.images[1].src);
}//function to implement image change on hover
$("body").on("mouseenter mouseleave", ".product", function(event){
var original_image=$(this).find("img").attr("src");
var hover_image=$(this).find("img").attr("hoverimg");
if(hover_image!=undefined)
{
$(this).find("img").attr("src",hover_image);
$(this).find("img").attr("hoverimg",original_image);
}
});