Skip to content

Instantly share code, notes, and snippets.

@webmarked
Last active January 13, 2022 14:08
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
{% include 'breadcrumb' %}
<h1>{{ page.title }}</h1>
<div class="grid-uniform" id="wishlisthtml">
<p><img src="https://cdn.shopify.com/s/files/1/1503/9840/t/185/assets/loadding-page.gif" /> </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 product_id=value.id;
var variant_id=value.variant_id;
var variant_title=value.variant_title;
var variant_price=value.variant_price;
// NOTE: This grid HTML has been optimized for Supply theme. For other themes, you need to modify it for best experience.
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 class="actions"><a role="button" tabindex="0" href="#" aria-label="Add to Shopping Cart" class="addtocartbutton" data-productid="'+product_id+'" data-variantid="'+variant_id+'">Add to cart</a></div></div>';
});
$("#wishlisthtml").html(gridhtml);
}
else
{
gridhtml='<p style="text-align: center;">There are no items in the Wishlist.</p>';
}
},
complete: function(){
$("#wishlisthtml").html(gridhtml);
}
});
$(document.body).on('click','.addtocartbutton', function(e) {
e.preventDefault();
var variantid=$(this).data("variantid");
$.ajax({url:"/cart/add.js",
data: {quantity:1,id:variantid},
dataType: 'json',
error: function(data){alert(data.responseJSON.description)},
success:function(data){location.reload()}});
});
});
</script>
<style>
.addtocartbutton {
background-color: #ffffff;
border: 1px solid #0e20f9;
font-family: "Roboto", Helvetica, Arial, sans-serif;
border-radius: 3px;
display: inline-block !important;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
color: #3075f9 !important;
letter-spacing: 1px;
width: 50%;
}
.actions {
text-align: center;
margin-top: 10px;
}
</style>
@Daniil1402
Copy link

Hello, I would like to know how to make a delete button from wishlist?

@georgiasamurai
Copy link

georgiasamurai commented Jan 13, 2022

Example remove from wishlist
<button type="button" class="btn btn-remove" onclick="RemoveFromSmartWishlist(${product_id},${variant_id}), window.location.reload()" data-tooltip="Remove this product from wishlist" data-tooltip-position="top">Remove</button>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment