Skip to content

Instantly share code, notes, and snippets.

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
What would you like to do?
{% include 'breadcrumb' %}
<h1>{{ page.title }}</h1>
<div class="grid-uniform" id="wishlisthtml">
<p><img src="" /> </p>
//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 %}
{% else %}
{% endif %}
var gridhtml="";
url: query_url,
dataType: "json",
success: function(data) {
var product_url="/products/"+value.handle;
var product_title=value.title;
var product_image=value.image;
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>';
gridhtml='<p style="text-align: center;">There are no items in the Wishlist.</p>';
complete: function(){
$(document.body).on('click','.addtocartbutton', function(e) {
var variantid=$(this).data("variantid");
data: {quantity:1,id:variantid},
dataType: 'json',
error: function(data){alert(data.responseJSON.description)},
.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;
Copy link

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

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