Swym Wishlist Plus - Custom Wishlist UX for your site - An example using the Supply theme

custom-wishlist-page.js

(function(){
  var _products = {};
  if(!window.SwymCallbacks){window.SwymCallbacks = [];}
  window.SwymCallbacks.push(function(){
    _swat.fetchWrtEventType(function(products){
      // render products - array of objects with same structure as productData
      // {{Insert your rendering function}}
      renderProducts(products);
      // products count - products.length
      // {{Insert your count update}}
      var countHTMLElem = document.getElementById("wishlist-count-span");
      _swat.renderWishlistCount(countHTMLElem, function(cnt, elem){
        // successful rendering
        console.log("Wishlist count", cnt);
      });

    }, _swat.retailerSettings.RelayUI.Title);});


  function renderProducts(products){
    // Handle zero products
    if(products.length == 0){
      $("#wishlist-count").hide();
      $("#zero-wishlist").show();
    }else{
      $("#wishlist-count").show();
      $("#zero-wishlist").hide();
    }
    var productsHtml = products.map(function(product){
      // store local reference
      _products[product.epi] = product;
      return renderProduct(product);
    });
    $("#wishlist-product-list").html(productsHtml);
    $("#wishlist-product-list .custom-wishlist-delete").click(function(e){
      e.preventDefault();
      var productEventId = $(this).data()["productEventid"];
      _swat.deleteEvent(function callback() {
        // Successfully deleted, re-render page
        $(e.currentTarget).closest(".grid-item").remove();
      }, productEventId);
    });
    $("#wishlist-product-list .custom-wishlist-add-to-cart").click(function(e){
      e.preventDefault();
      var productId = $(this).data()["productId"];
      var productData = _products[productId];
      _swat.replayAddToCart(productData, productData.epi, function() {
        // Successfully added, open cart
        _swat.openCartPage();
      });

    });
  }

  function renderProduct(product){
    // Using Mustache with different tags
    Mustache.tags = ["<%","%>"];
    var tmpl = loadTemplate("product-item-tmpl");
    var r = Mustache.render(tmpl, transformProduct(product));
    Mustache.tags = ["{{","}}"];
    return r;
  }
  function transformProduct(product){
    // To use Shopify's default formatter - 
    // But warning - Some themes throw an unknown format exception, 
    // build custom formatter in that case
    // if(Shopify.formatMoney && Shopify.money_format){
    //   product["pr"] = Shopify.formatMoney(product["pr"].toFixed(2));
    //    if(product["op"]){
    //      product["op"] = Shopify.formatMoney(product["op"].toFixed(2));
    //    }
    // }
    product["pr"] = product["pr"].toFixed(2);
    if(product["op"]){
      product["op"] = product["op"].toFixed(2);
    }
    product.currency = _swat.currency; // use currency in case you want to render in the template
    return product;
  }

  function loadTemplate(templateId) {

    var template =  document.getElementById(templateId);
    if(!template) {
      SwymUtils.warn('Error cannot find the template #' + templateId);
      return false;
    }

    var templateHtml = template.innerHTML.trim();
    Mustache.parse(templateHtml);
    return templateHtml;
  }
})();

page.custom-wishlist.liquid

{% include 'breadcrumb' %}

{% assign has_sidebar = false %}
{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}
{% endif %}
<script src="{{ 'custom-wishlist-page.js' | asset_url }}"></script>
<div id="wishlist-count" style="display: none"><span id="wishlist-count-span"></span> <span>items</span></div>
<h3 id="zero-wishlist" style="display: none">No products added to wishlist :(</h3>
<div class="grid grid-border">

  

  <div class="grid-item{% if has_sidebar %} large--four-fifths grid-border--left{% endif %}">

    <div class="grid-uniform" id="wishlist-product-list">

      {% if has_sidebar %}
      	{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
      {% else %}
	      {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
      {% endif %}


    </div>
    
    <script style="display: none;" id="product-item-tmpl" type="x-tmpl-mustache">
      <div class="grid-item {{ grid_item_width }}" data-product-eventid="<%_id%>" data-product-id="<%epi%>">

          <a href="<%du%>" class="product-grid-item">
            <div class="product-grid-image">
              <div class="product-grid-image--centered">
                
                <img src="<%iu%>" alt="<%dt%>">
              </div>
            </div>

            <p>
              <span><%dt%></span>
            </p>

            <div class="product-item--price">
              <span class="h1 medium--left">
                <span class="old-price" style="text-decoration: line-through;"><%op%></span> <span><%pr%></span>
              </span>

            </div>
            <button class="custom-wishlist-delete" data-product-eventid="<%_id%>">Remove from wishlist</button>
            <button class="custom-wishlist-add-to-cart" data-product-id="<%epi%>">Add to cart</button>
          </a>

        </div>
    </script>



</div>