How to display the Wishlist contents on any page of the store?

Many store owners want to display the contents of Wishlist on selected pages of the store. In particular, we have received requests to display the wishlist contents at the following locations:

  • Account Page
  • Sidebar
  • Custom Popup
  • Footer

With the Smart Wishlist Public API, it has become possible to display the wishlist contents anywhere on the entire store. In this article, we shall explain how to do this. It assumes that the path to wishlist page is default /a/wishlist. If it has been changed, you need to replace it with the updated path.

STEPS

1: Create an empty HTML container. Assign it a unique id wishlisthtml

<div id="wishlisthtml"> <p>Loading Wishlist...... </p></div>

2. In the Liquid, check if the user is logged in. If not, we shall display Express Wishlist, otherwise the User Account Wishlist shall be displayed.

3. Depending on the #2, make a AJAX request to the /a/wishlist endpoint using Smart Wishlist Public API.

//For non logged in users (Express Wishlist)
function getExpressWishlistId(){for(var i=decodeURIComponent(document.cookie).split(";"),t=0;t<i.length;t++){for(var n=i[t];" "==n.charAt(0);)n=n.substring(1);if(0==n.indexOf("wishlist_id="))return n.substring("wishlist_id=".length,n.length)}}

query_url="/a/wishlist?type=api&wishlistid="+getExpressWishlistId()+"&version=1";

//For logged in users (Account Wishlist)
query_url="/a/wishlist?type=api&customerid="+{{customer.id}}+"&version=1";

4. Display the data received, in the HTML container created in Step 1. Apply your own formatting.

// variable 'gridhtml' contains the HTML elements created using the data fetched from API
$("#wishlisthtml").html(gridhtml);				

For the starters, we have created a readymade code which can be embedded in any layouts/snippets/templates/sections of the theme to display the contents of wishlist. It may not work if you place it in any assets of the theme.

Above code adapted for logged in users only. Useful in cases where you wish to display the wishlist in My Account section.

TROUBLESHOOTING

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *