Skip to content

Instantly share code, notes, and snippets.

@webmarked webmarked/page.wishlist.liquid Secret
Last active Apr 28, 2020

Embed
What would you like to do?
{% include 'breadcrumb' %}
<h1>{{ page.title }}</h1>
<div class="grid-uniform" id="wishlisthtml">
<p>Loading Wishlist...... </p>
</div>
<script>
//define this function for fetching express wishlist ID from cookie
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)}}
$(function() {
{% if customer %}
query_url="/a/wishlist?type=api&customerid="+{{customer.id}}+"&version=1";
{% else %}
query_url="/a/wishlist?type=api&wishlistid="+getWishlistId()+"&version=1";
{% endif %}
var gridhtml="";
$.ajax({
url: query_url,
dataType: "json",
cache:false,
success: function(data) {
if(parseInt(data.count)>0)
{
$.each(data.items,function(key,value){
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;
//all HTML customizations need to be done here only
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"> <span class="visually-hidden">Regular price</span><small aria-hidden="true">'+variant_price+'</small></span> </div></a></div>';
});
$("#wishlisthtml").html(gridhtml);
}
}});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.