How to create a custom Wishlist page?

Using Smart Wishlist, developers can create a custom wishlist page where they can exercise fine customizations and more degree of control over the elements. This can also be extended to display the wishlist on a specific section of any other page of store.

In this example, we shall use Supply theme, but the concept shall remain same for all themes. In fact,for other themes, the only change required is in the code provided below in Step 3.

We shall use the Public API and some Javascript to fetch and display the contents of Wishlist page.

STEPS

1. Log in to Shopify Admin and navigate to to Online Store=> Themes => Edit Code

2. Click “Add a new Template”. Under “Create a new template for” select page and under “called” just enter wishlist.

3. Replace its contents with this code and Save

4. Go to Online Store => Pages => Add Page

5. Enter the title “My Wishlist”. At the right sidebar, you would find a template box. Select page.wishlist under Template Suffix and click Save. Make sure that you leave everything else including the Content box, unlatered.

6. Now open the store and add few items to wishlist. Now come back and click View page. You shall see those items in the newly created Wishlist page.

7. All further customizations have to be made to template/page.wishlist.liquid.

8. You may add a preloader image of your choice so that the users get a visualization of wishlist loading. Download a preloader image (GIF) of your choice and upload it under Assets folder of the theme. Copy the image URL and replace it with the image URL provided in Step 3 above. A sample such image URL is given below.

<p><img src="https://cdn.shopify.com/s/files/1/1702/7393/t/2/assets/preloader.gif?v=1585160368" /> </p>

If you get the error, customerid not defined, add the following code to the above script.

var SWGetCustomerWishlistId=function()
{
	if((typeof __st)!=="undefined")
	{
	if(customer_id==undefined) customer_id=__st.cid;
	if(customer_id==undefined) customer_id=0;
	}
	
	return customer_id;
}

Advanced Features

Add to Cart: To implement the Add to Cart functionality, you can use Shopify Ajax API. This is how it is implemented on the default wishlist page of our app.

Remove from Wishlist: This feature can be implemented by calling the RemoveFromSmartWishlist function. Please visit this page for details.

Sample Code for Add to Cart and Remove from Wishlist feature

<!-- HTML -->
<button class="addtocart"   data-variantid="67890">Add to Cart</button>
<button class="removefromwishlist" data-productid="12345"  data-variantid="67890">Add to Cart</button>

<!-- Javascript -->
<script>

$("body").on("click", ".addtocart", function(event){
	var variantid=$(this).data("variantid");		
	$.ajax({url:"/cart/add.js",
		data: {quantity:1,id:variantid},
		method: "POST",
		success:function(data){},
		error: function(data){},
		complete: function(xhr,status){}
		});		
});


$("body").on("click", ".removefromwishlist", function(event){
		var productid=$(this).data("productid");	
		var variantid=$(this).data("variantid");		
		RemoveFromSmartWishlist(productid,variantid);
  
  //To hide the removed product/item from display, add a class "wishlistitem" and "data-variantid" in order to encapsulate each product, similar to the above. Then call the following
		$('.wishlistitem[data-variantid="'+variantid+'" ]').remove();    
});
	
</script>