swym-custom-wishlist-page-css.liquid

<style class="custom-swym-wishlist-css">
  #wishlist-items-container {
    max-width: 1180px;
    margin: auto;
  }
  #wishlist-items-container .swym-wishlist-grid {
    max-width: 900px;
    margin: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
  }
  .swym-wishlist-grid .swym-is-anchor {
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    touch-action: manipulation;
  }
  .swym-wishlist-grid * {
    font-size: 100%;
    font: inherit;
    font-family: "HelveticaNeue",Helvetica,Verdana,Arial,sans-serif;
    line-height: 1.4em;
    vertical-align: baseline;
    box-sizing: border-box;
    border: 0;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-transform: none;
  }
  a.swym-wishlist-item.swym-is-anchor {
    background: #fff;
    border: 1px solid #333;
    width: 21%;
    margin: 0 4% 4% 0;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    cursor: pointer;
  }
  button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 25px;
    height: 25PX;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .swym-wishlist-grid .swym-wishlist-image-wrapper {
    overflow: hidden !important;
    height: 180px;
  }
  .swym-wishlist-grid .swym-wishlist-image-wrapper img {
    max-width: 100%;
  }
  .swym-wishlist-grid .swym-is-button {
    text-align: left;
    background: inherit;
    height: auto;
    width: auto;
    z-index: auto;
    display: inline-block;
    background: 0;
    border: 0;
    text-transform: none;
    bottom: auto;
    box-shadow: none;
    clear: none;
    cursor: pointer;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    left: auto;
    letter-spacing: normal;
    line-height: normal;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    padding: 0;
    position: static;
    right: auto;
    text-align: inherit;
    text-decoration: none;
    text-transform: none;
    top: auto;
    transform: none;
    visibility: visible;
  }
  .swym-wishlist-grid .swym-wishlist-item .swym-delete-btn ::before {
    color: #000;
    content: "X";
    font-size: 16px;
  }
  button.swym-add-to-cart-btn.swym-button.swym-button-1.swym-is-button.swym-is-button {
    z-index : 1000;
  }
  button.swym-delete-btn.swym-nav.swym-nav-1.swym-is-button {
    z-index : 1000;
  }
  .swym-is-button .swym-title.swym-title-1 {
    font-weight: bold;
    font-size: 16px;
    color: #4f4f4f;
    margin: 12px 15px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .swym-wishlist-grid .swym-wishlist-item .swym-variant-title {
    font-size: 14px;
    line-height: 16px;
    color: #333;
    margin: 0 15px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .swym-wishlist-grid .swym-wishlist-item .swym-product-price {
    color: #333;
    font-weight: bold;
    font-size: 18px;
    padding: 0 15px 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .swym-wishlist-grid .swym-product-price .swym-product-final-price {
    display: inline-block;
    margin-right: .4em;
  }
  .swym-wishlist-grid .swym-wishlist-item .swym-add-to-cart-btn {
    background: #dc3b1a;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    padding: 6px;
    display: block;
    color: #fff;
  }
  /*   Mobile Screens   */
  @media only screen and (max-width: 900px){
    #wishlist-items-container .swym-wishlist-grid .swym-wishlist-item {
      width: 48%;
      max-width: none;
      margin: 0 4% 4% 0;
    }
    #wishlist-items-container .swym-wishlist-grid .swym-wishlist-item {
      width: auto ;
      margin: 0 0 4% 0;
      padding: 0px;
    }
    #wishlist-items-container .swym-wishlist-grid {
      justify-content: center;
    }
  }
  /*   Ipad   */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 1) {
      .swym-wishlist-grid .swym-wishlist-image-wrapper {
        overflow: hidden !important;
        height: 280px;
      }
    }
  /* Landscape */
  @media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) {
      .swym-wishlist-grid .swym-wishlist-image-wrapper {
        overflow: hidden !important;
        height: 100px;
      }
    }
  button#swym-custom-add-toCartBtn[data-state-cart="swym-added"]{
    background : green;
  }
  
  /* Add your own CSS here */
  .page-width>.grid:nth-child(4){
    border: 1px solid black;
  }
</style>

swym-custom-wishlist.js

/* Product Tile Markup - You can play around with this to change the
information that appears on the Wishlisted Product tiles  */
var productCardMarkup = 
  `<div class="swym-wishlist-grid">
		{{#products}} 
	<a href="{{du}}"aria-label="{{dt}}" class="swym-wishlist-item swym-is-anchor"><button id="swym-remove-productBtn" aria-label="Delete" data-variant-id="{{epi}}" data-product-id="{{empi}}" class="swym-delete-btn swym-nav swym-nav-1 swym-is-button"><span class="swym-icon"></span></button>
		<div class="swym-wishlist-image-wrapper"><img alt="" class="swym-wishlist-image" src="{{iu}}"></div><button class="swym-is-button">
		<div class="swym-title swym-title-1">
			{{dt}}
		</div></button>
		<div class="swym-variant-title swym-text swym-title-2 swym-variant-title-spacer">
			{{variantinfo}}
		</div>
		<div class="swym-product-price swym-text swym-text-1">
			<div class="swym-product-final-price swym-value">
				{{cu}}{{pr}}
			</div>
        </div>
		<button id="swym-custom-add-toCartBtn" data-state-cart="{{#isInCart}}swym-added{{/isInCart}}"data-product-url="{{du}}" data-variant-id="{{epi}}" data-product-id="{{empi}}"class="swym-add-to-cart-btn swym-button swym-button-1 swym-is-button swym-is-button">
			{{#isInCart}}Added to cart{{/isInCart}}{{^isInCart}}Add to cart{{/isInCart}}
		</button>
    </a> 
       {{/products}}
	</div>`;

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 swymRenderWishlist(swat) {
	// Get wishlist items
	swat.fetch(function(products) {
		console.log(products)
		var wishlistContentsContainer = document.getElementById("wishlist-items-container");
		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.vi ? getVariantInfo(p.vi) : "");
			return p;
		});
		var productCardsMarkup = SwymUtils.renderTemplateString(productCardMarkup, {
			products: formattedWishlistedProducts
		});
		if(wishlistContentsContainer){
			wishlistContentsContainer.innerHTML = productCardsMarkup;
			attachClickListeners();
		} else{
		  console.log("Container not found, Wishlist Page element not found");
		}
	});
}

function onAddToCartClick(e) {
	e.preventDefault();
	var productId = e.currentTarget.getAttribute("data-product-id");
	var variantId = e.currentTarget.getAttribute("data-variant-id");
	var du = e.target.getAttribute("data-product-url");
	e.target.innerHTML = "Adding..";
	window._swat.replayAddToCart({
		empi: productId,
		du: du
	}, variantId, function(c) {
		e.target.innerHTML = "Added to Cart";
		e.target.setAttribute("data-state-cart", "swym-added");
		console.log("Successfully added product to cart.", c);
	}, function(e) {
		console.log(e);
	});
}

function attachClickListeners() {
	var addToCartButtons = document.querySelectorAll("#swym-custom-add-toCartBtn");
	var removeBtns = document.querySelectorAll("#swym-remove-productBtn");
	//   Add to cart Btns
	for (var i = 0; i < addToCartButtons.length; i++) {
		addToCartButtons[i].addEventListener('click', onAddToCartClick, false);
	}
	//   Remove Buttons
	for (var k = 0; k < removeBtns.length; k++) {
		removeBtns[k].addEventListener('click', onRemoveBtnClick, false);
	}
	console.log("Events attached!");
}

function onRemoveBtnClick(e) {
	e.preventDefault();
	var epi = +e.currentTarget.getAttribute("data-variant-id");
	var empi = +e.currentTarget.getAttribute("data-product-id");
	window._swat.fetch(function(products) {
		products.forEach(function(product) {
			if (epi && empi && product.epi == epi && product.empi == empi) {
				window._swat.removeFromWishList(product, function() {
					if (!window.SwymCallbacks) {
						window.SwymCallbacks = [];
					}
					window.SwymCallbacks.push(swymRenderWishlist);
				});
			}
		});
	})
}

if (!window.SwymCallbacks) {
	window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymRenderWishlist); /* Init Here */

Wishlist on an Existing Page

These are the files created while enabled the custom Wishlist on an existing page in your Store