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

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

​

//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";

​

// variable 'gridhtml' contains the HTML elements created using the data fetched from API

$("#wishlisthtml").html(gridhtml);              

​

<!-- This is where the wishlist contents shall be displayed. The purpose of Javascript is to fetch the wishlist data using API and render them here in HTML format  -->

​

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

​

<script>

// this function fetches Express wishlist ID from browser cookies. This is useful for wishlists of unregistered users.

​

{% unless customer %}

function getWishlistId(){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)}}

{% endunless %}

$(function() {

app_proxy_path="/a/wishlist";   //if this has been changed in settings, change it here too.

gridhtml="";

{% if customer %}

query_url=app_proxy_path+"?type=api&customerid="+{{customer.id}}+"&version=1";

{% else %}

query_url=app_proxy_path+"?type=api&wishlistid="+getWishlistId()+"&version=1";

{% endif %}

$.ajax({

    url: query_url,

    dataType: "json",

    cache:false,

    success: function(data) {

    if(parseInt(data.count)>0)

    {

        $.each(data.items,function(key,value){

        //Javascript variables initialized. These are used to populate the HTML Grid    

        var product_url="/products/"+value.handle;

        var product_title=value.title;

        var product_image=value.image;              

        var variant_title=value.variant_title;

        var variant_price=value.variant_price;

        /* The following HTML code has been adapted for "Supply" theme. All HTML customizations should be done here itself. The below code represents one item in the grid. On themes other than "Supply", it should be replaced by the corresponding HTML for one itme in the grid/list displayed on collection pages. However, the names of Javascript variables (product_url,product_image,product_title,variant_price) must not be altered. */

         gridhtml+='<div class="grid-item small--one-half medium--one-quarter large--one-quarter"> <a href="'+product_url+'" class="product-grid-item"> <div class="product-grid-image" style="height: 312px;"> <div class="product-grid-image--centered"> <img src="'+product_image+'"> </div></div><p>'+product_title+'</p><div class="product-item--price"> <span class="h1 medium--left"> <small>'+variant_price+'</small></span> </div></a></div>';

        }); 

        $("#wishlisthtml").html(gridhtml);              

    }

}});

});

​

</script>  

<!-- 

In this setup, we shall display wishlist on account page. For better UX, the wishlist will be hidden by default. Once a link is clicked, the wishlist shall be displayed -->

​

<!-- Place this HTML where you want to display wishlist items-->

<div id="sw-custom-html"></div>

<!--  End HTML -->

​

<!-- Add this link used to view Wishlist -->

​

<a href="#" id="viewwishlistbutton">View Wishlist</a>

​

​

<!-- Javascript begin -->

<script type="text/javascript">

​

var WishlistScripts=function(){

query_url="/a/wishlist?type=api&customerid="+{{customer.id}}+"&version=1";

var gridhtml='<div class="sw-custom-grid-container">';

var sw_item_count=0;  

jQuery.ajax({

    url: query_url,

    dataType: "json",

    cache:false,

    success: function(data) {

    sw_item_count=parseInt(data.count);  

    if(sw_item_count>0)

    {

        jQuery.each(data.items,function(key,value){

        //Javascript variables initialized. These are used to populate the HTML Grid    

        var product_url="/products/"+value.handle;

        var product_title=value.title;

        var product_image=value.image;              

        var variant_title=value.variant_title;

        var variant_price=value.variant_price;

        gridhtml+='<div class="sw-custom-grid-item">\

    <a href="'+product_url+'" class="sw-custom-grid-item-product">\

        <div class="sw-custom-grid-item-product-image">\

                <img src="'+product_image+'"> </div>\

                <p>'+product_title+'</p>\

                <div class="sw-custom-grid-item-product-price"><span class="sw-custom-grid-currency">'+window.Shopify.currency.active+'</span>&nbsp;'+variant_price+'</div>\

                </a>\

</div>'

        }); 

        gridhtml+='</div>'; 

        $("#sw-custom-html").html(gridhtml);

        $("#viewwishlistbutton").append("("+sw_item_count+")");

    }

}});

​

// Make the link clickable

jQuery("#viewwishlistbutton").click(function(){

jQuery("#sw-custom-html").show(); 

jQuery(".account-order-history .account-page-subtitle").html("My Wishlist");

if(sw_item_count==0) jQuery(".empty").html("There are no items in the Wishlist"); else jQuery(".empty").hide();

});  

};

​

if("undefined"==typeof jQuery)

{

    console.log("jquery not defined, loading it");

    var script=document.createElement("script");

    script.type="text/javascript",

    script.onload=WishlistScripts,

    script.src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js",

    document.getElementsByTagName("head")[0].appendChild(script)

}

else WishlistScripts();

​

​

</script>

<!-- End Javascript -->

<!-- CSS styles -->

<style>

#sw-custom-html{display:none;}      

.sw-custom-grid-container {

  display: grid;  

}  

@media (min-width: 600px) {

.sw-custom-grid-container  { grid-template-columns: repeat(2, 1fr); }

}

​

@media (min-width: 900px) {

.sw-custom-grid-container  { grid-template-columns: repeat(3, 1fr); }

}

​

.sw-custom-grid-item {

  padding: 20px;

  text-align: center;

}

.sw-custom-grid-item-product-image img {

    width: 100%;

}

</style>

​

​

​

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;

}