Showing wish-listed products on cart page

Introduction

Back in 2006, Amazon reported that 35% of its revenue was direct results from up-sell and cross-sell efforts. Since then, many e-commerce sites are reporting similar results. The cart page is a great place to show products that the user might be interested in buying since a user generally would be in the process of moving to checkout while they are on the cart page. Wishlist contains products that the user has explicitly shown interest in and so, showing a user’s wishlist products on the cart page can unravel powerful up-sell opportunities. This creates a better experience for the shopper as well since they might be trying to find the products that the wishlist widget surfaces.

In this blog post, we will go through the steps required to add a Wishlist widget to the cart page using Swym APIs. By the end of this post, you will have a native-looking Wishlist widget with an “Add to cart” CTA on the cart page. Let’s get started!

Setup

1. Identify the file that renders the cart page and add a div in that file wherever you want the Wishlist widget to surface. For my implementation, I created an empty div at the end of the cart-template.liquid file like so –

<div id="wishlist-items" class="grid grid--uniform grid--view-items">
    <h3>Your Wishlist</h3>
</div>

ShellCopy

1. Create a new asset file called cart-wishlist-widget.js and include it in your theme.liquid file like so –

<script src="{{ 'cart-wishlist-widget.js' | asset_url }}" ></script>

ShellCopy

We are now ready to start adding code to our newly created file.

Widget code

Please add the following code to the file cart-wishlist-widget.js –

$(document).ready(function(){

  // your product card markup
  var productTileMarkup = `
	<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}}</div>
        <dl class="price" data-price="">
          <span class="price-item price-item--sale" data-sale-price="">
            Rs.{{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>
  `;
  
  function swymCallbackFn(){
    var wishlistItemsContainer = document.getElementById("wishlist-items");
    if(wishlistItemsContainer){
      window._swat.fetchWrtEventTypeET(
        function(wishlistProducts) {
          wishlistProducts.forEach(function(wishlistProduct){
            wishlistProduct.isInCart = _swat.platform.isInDeviceCart(wishlistProduct.epi);
            var renderedProductTile = SwymUtils.renderTemplateString(productTileMarkup, wishlistProduct);
			wishlistItemsContainer.insertAdjacentHTML( 'beforeend', renderedProductTile );
          });
          
          attachClickListeners();
        },
        window._swat.EventTypes.addToWishList
      );
    } else {
      attachClickListeners(); 
    }
  }
  if(!window.SwymCallbacks){
    window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);
  
  
  function attachClickListeners(){
   $(".add-to-cart").on("click", function(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 = "Moving..";
     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);
       }
     );
   }); 
  }
});

ShellCopy

This code does primarily three things –

1. Creates a string that has the product grid markup for the widget. Note that the markup for the card includes certain dependencies (CSS classes) that are valid for the theme (Debut) that we created this sample widget on. For your store, you’ll need to suitably alter the markup and its associated styling.
2. Once Swym is ready and available, we fetch all the Wishlist products using the fetchWrtEventTypeET API .
3. In the API callback, we loop through the results and render the product tiles using Swym’s rendering utils. Swym JS package includes Mustache, a popular templating library. We are rendering the product markup by rendering the string created above with the wishlist product data. You can learn more about the fetchWrtEventTypeET API response here.
4. Lastly, once the widget is rendered, we attach click listeners for the “Move to cart” button present on each card. This uses the Swym replayAddToCart API.

Result

That should be it! Save your changes and add some products to your Wishlist. You should start seeing these products on the cart page like shown below.

We hope this post enables you to create a powerful, customer-centric feature to your cart page. Check out our API documentation for more details on APIs used here. As always, please reach out to us if you are running into problem and we would be happy to help!

Note : Every theme has a different cart file. So please identify your cart file or reach out to your theme developer to ask them which file to edit.