Code for creating a custom wishlist page with Swym APIs for Shopify

page.wishlist.liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
      
      <div id="wishlist-items-container">
        
        
      </div>
      
    </div>
  </div>
</div>
<script src="{{ 'swym-wishlist-page.js' | asset_url }}" ></script>

swym-wishlist-page.js

var productCardMarkup = `
 <ul>
 {{#products}}
	<li class="grid__item grid__item--collection-template small--one-half medium-up--one-quarter">
      <div class="grid-view-item product-card">
        <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{du}}">
          <span class="visually-hidden">{{dt}}</span>
        </a>

        <div class="grid-view-item__image-wrapper product-card__image-wrapper js">
          <div style="padding-top: 66.66666666666666%;">
            <img  class="grid-view-item__image lazyautosizes" src="{{iu}}" />
          </div>
        </div>

		<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{dt}} - {{variantinfo}}</div>
        <dl class="price" data-price="">
          <span class="price-item price-item--sale" data-sale-price="">
            {{cu}}{{pr}}
          </span>
        </dl>
        <a href="" data-product-id="{{empi}}" data-url="{{du}}" data-variant-id="{{epi}}" class="add-to-cart">
			{{#isInCart}}Moved to cart{{/isInCart}}
			{{^isInCart}}Move to cart{{/isInCart}}
		</a>
      </div>
    </li>
  {{/products}}
 </ul>
`;

function getVariantInfo(variants){
  try {
    let variantKeys = ((variants && variants != "[]") ? Object.keys(JSON.parse(variants)[0]) : []) , variantinfo;
    if(variantKeys.length > 0){
      variantinfo = variantKeys[0];
      if(variantinfo == "Default Title"){
        variantinfo = "";
      }
    } else {
      variantinfo = "";
    }
    return variantinfo;
  } catch(err){
    return variants;
  }
}

function swymCallbackFn(){
  // gets called once Swym is ready
  var wishlistContentsContainer = document.getElementById("wishlist-items-container");
  _swat.fetchWrtEventTypeET(
    function(products) {
      // Get wishlist items
      var formattedWishlistedProducts = products.map(function(p){
        p = SwymUtils.formatProductPrice(p);    // formats product price and adds currency to product Object
        p.isInCart = _swat.platform.isInDeviceCart(p.epi) || (p.et == _swat.EventTypes.addToCart);
        p.variantinfo = (p.variants ? getVariantInfo(p.variants) : "");
        return p;
      });
      
      var productCardsMarkup = SwymUtils.renderTemplateString(productCardMarkup, {products: formattedWishlistedProducts});
      wishlistContentsContainer.innerHTML = productCardsMarkup;
      
      attachClickListeners();
      
    },
    window._swat.EventTypes.addToWishList
  );
}
if(!window.SwymCallbacks){
  window.SwymCallbacks = [];
}

window.SwymCallbacks.push(swymCallbackFn);


function onAddToCartClick(e){
  e.preventDefault();
  var productId = e.target.getAttribute("data-product-id");
  var variantId = e.target.getAttribute("data-variant-id");
  var du = e.target.getAttribute("data-url");
  e.target.innerHTML = "Adding..";
  window._swat.replayAddToCart(
   {empi: productId, du: du},
   variantId,
   function() {
     e.target.innerHTML = "Moved to cart";
     window.location.reload();
     console.log("Successfully added product to cart.");
   },
   function(e) {
     console.log(e);
   }
  );
}


function attachClickListeners(){
  var addToCartButtons = document.getElementsByClassName("add-to-cart");

  for (var i = 0; i < addToCartButtons.length; i++) {
    addToCartButtons[i].addEventListener('click', onAddToCartClick, false);
  }
}

Hello saumitra
Thanks for solution. How we can remove the product from wishlist's. Also how we can create popup similar to the app when click on that app.
Thanks for such a great solution.

Hello saumitra
Thanks for solution. How we can remove the product from wishlist's. Also how we can create popup similar to the app when click on that app.
Thanks for such a great solution.

Shekhar,

Please email us at [email protected] so we can assist. Thanks!

Hi Saumitra,

We are trying to customize wishlist plus on our store. (using Prestige them / shopify)
Can you please provide us with information on how to remove product from wishlist as it is not covered above

I also emailed you on [email protected]

Regards
Navid

this can be on collection page ?