How to Render a Custom Wishlist on an Existing Page

Giving shopperss access to their wishlist on pages that aren’t a dedicated wishlist page is simple. You can do so by following these steps.

How to Render Custom Wishlists on Existing Pages

Step 1: Open the page template (example: /customers/account.liquid)

We’ll use the Accounts page as an example here. This will allow you to place a wishlist on the existing Accounts page as shown in the GIF above. 

You can do this for any page on your site. If you have trouble finding the right backend file for the page you want to include a wishlist on, please consult the developer of your theme.

Step 2: Add the wishlist render code

Once you decide which page you want a wishlist on, you’ll need to add the wishlist render code to it. 

<!-- Swym Wishlist on Existing Page -->
<br>
<div class="grid">
  <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      
<!-- Section Heading →
    <div class="section-header text-center">
      <h1>My Wishlist</h1>
    </div>

<!-- Render Wishlisted Products -->
    <div class="rte">
      {{ page.content }}
      <div id="wishlist-items-container"></div>
    </div>
  </div>
</div>

<!-- Swym Wishlist render JS + CSS -->
<script src="{{ 'swym-custom-wishlist.js' | asset_url }}" async="async"></script>
<!-- Swym Custom Page CSS  -->
{% include 'swym-custom-wishlist-page-css'%}

Step 3: Add the wishlist rendering JS

With the wishlist render code in place, you’re one step closer. To make the wishlist function, you’ll need to add some JavaScript. 

Add a new asset: “swym-custom-wishlist.js”

Keep in mind that any JavaScript code or Swym API calls required for the wishlist can be added in this file.

Add the following code to your new .js file

/* 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 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 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);
				});
			}
		});
	})
}

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 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!");
}

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

Here is a brief explanation of each function used:

  • productCardMarkup – This is the HTML template that will be used to display each product in the wishlist section
  • getVariantInfo – This function gets variant information for each product
  • onAddToCartClick – This function adds a product to the cart from the wishlist
  • onRemoveBtnClick – This function is used to remove a product from the wishlist
  • swymRenderWishlist – This function renders the wishlist on the existing page
  • attachClickListeners – This function adds events to the “Add to Cart” and “Remove buttons” to make them work when the customer clicks on them
  • Initialize the render function

Step 4: Add the wishlist section CSS

With the functionality of your wishlist in place, it’s time to make it look nice. Here you’ll add the CSS that makes your wishlist section appealing to customers.

Create a new snippet called: “swym-custom-wishlist-page-css”

Add the following CSS in your new file


<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 */

</style>

After adding this CSS snippet, your wishlist should be ready to render on any page in your store!  

You can download the two example files used in this guide here.

While these steps should make it simple to enable custom wishlists on existing pages, certain themes could cause issues. If you find yourself having trouble or have a question, please email us and we’d be happy to help.

Save for Later - Early Access

Let's discuss your needs!

Let's discuss your needs!

Let's discuss your needs!