Adding “Add all to cart” button on your wishlist page

NOTE: We are currently in the process of migrating to a new version of our platform (V3). To learn how to figure out which version you are on, click here. This article is on a feature that is currently only on the older version of our platform (V2) and will be made available soon for our V3 users.

Introduction

This post walks you through the steps required to add all to cart button like shown below, on the wishlist page using Swym APIs.

Note: Overriding Swym UI components is a part of the Swym UI APIs which are currently in beta. This solution requires the Swym v2 JavaScript package. To try it out, please contact our support team using the “Submit a Ticket” menu on the top and they would be happy to provide you beta access to the APIs.

Setup

Let’s start by creating a new snippet called swymAddAllToCart.liquid . In this snippet, we will write all the code relevant to the solution. This solution involves four primary steps –

1. Create the “add all to cart” button in your wishlist page.
2. Create an event handler that will respond to clicks on the add all to cart button.
3. Perform the actual adding of the products to cart with an XHR call.
4. Put it all together

Let’s get started!

Writing the button markup

In this step, we will create the “add all to cart” button in our wishlist page. If you are using your own wishlist page, this step involves simply creating a button wherever you want it show up. Once you have written the markup for the button, you can directly skip to the “writing the add to cart API call” step.

If you are using the default wishlist popup or a hosted page, you will need to override the wishlist UI component. Let’s go into how that’s done.

All Swym UI components are written in JSX and can be overridden. The NotepadContent component is the parent container for all of the wishlist product cards. For the UI we have in the introduction section, we will need to create a floating “add all to cart” button inside this component. Below is the JSX markup for our override of the NotepadContent component –

function MyNotepadContent(props, getHandler){
  return (
    <ul id="swym-tabs-content" className="swym-tabs-content">
      {
        (props.activeTab == "interested" || props.activeTab == "wishlist" || props.activeTab == "product-details") ?
          <NotepadProductGrid {...props} />
        :
        (
          props.activeTab == "settings" ?
            <NotepadSettingsContainer {...props} />
          : ""
        )
      }
      <li className={"swym-add-all-to-cart" + ((props.activeTab == "interested" && props.interestedProducts.length > 0) ? " has-wishlist-items" : "")}>
        <button className="swym-all swym-button swym-background-color" onClick={getHandler("AddAllWishlistToCart")}>Add All To Cart</button>
      </li>
    </ul>
  );
}

ShellCopy

The code before the last list element is what comes by default. We have simply added one more list element and put in the “add all to cart” button in it. Now, we need to compile down JSX into JavaScript that the browser can understand. To perform this step, here are the substeps involved –

1. Go to this link – https://swymjsxcompiler.glitch.me/
2. Put in your JSX markup for the component shown above and hit Submit.
3. Please copy the contents of the output received and take them to the Shopify theme editor, into the file swymAddAllToCart.liquid .

Our markup is ready to go. In the button code, we have written an onclick listener called AddAllWishlistToCart . This listener will respond to clicks on the add all to cart button. Let’s write it up now.

Writing the event handler

Swym UI components have the ability to invoke any handler that they need for their functionality. Also, one can create new event handlers and invoke them from any component. For our current use-case, we will write a new event handler called AddAllWishlistToCart.

function swymCallbackFn(swat){
    SwymUiCore.registerComponent("NotepadContent", MyNotepadContent);  // registering our custom component written above with the Swym UI library
    
    //Handler function that fetches the state from the store and calls the redirect function
    SwymUiCore.addHandler("AddAllWishlistToCart",  function(store,props) {
      props.currentTarget.innerHTML = "Adding...";
      allProds = store.getState()["interestedProducts"];
      var epis=[];     // epi stands for variant id
      for (var i=0;i < allProds.length;i++) {
          if(!allProds[i].oos){
       	      epis.push(allProds[i]["epi"]); 
          }
      }
      swymAddMultipleToCartAndRedirect(epis, function(xhr) {}, function(xhr) {});
    });
  }

  if(!window.SwymCallbacks){
   window.SwymCallbacks = [];
  }
  window.SwymCallbacks.push(swymCallbackFn);

ShellCopy

There are several things to notice in this code. Let’s take it one by one –

1. Swym loads asynchronously to ensure it does not lie in the site’s critical loading path. The swymCallbacks construct ensures that the Swym APIs are called only after they are ready. As soon as the Swym APIs are ready, the swymCallbackFn gets called.
2. The SwymUiCore.registerComponent API call overrides the default component with our custom component. Our custom implementation of the NotepadContent component includes the add all to cart button.
3. TheSwymUiCore.addHandler API call registers a new event handler that can be invoked from anywhere. Inside this handler, we will receive the complete application state as the first parameter and the event object as the second parameter. We will then get the variant ids of all the products in the wishlist currently so that we can add them to cart. Once we get these variant ids, we will pass them to a function called swymAddMultipleToCartAndRedirect that makes the XHR call and redirects the user to the cart page.

Writing the add to cart XHR call

The swymAddMultipleToCartAndRedirect function looks as below –

//This function directs to the cart on the button click after adding the items to the cart
function swymAddMultipleToCartAndRedirect(episOrVariantIds, successCallback, errorCallback) {
    var formData = new FormData();
    episOrVariantIds.forEach(function(epiOrVariantId) {
      formData.append("id[]", epiOrVariantId);
    });
    var request = new XMLHttpRequest();
    request.addEventListener("load", function() {
      if(this.status == 200) {
        window.location = "/cart";
        if(successCallback) successCallback(this);
      } else {
        if(errorCallback) errorCallback(this);
      }
    });
    request.open("POST", "/cart/add");
    request.send(formData);
  }

ShellCopy

This function creates the required form data to make the /cart/add XHR call and calls the appropriate callbacks.

Please note, if you are on a custom built wishlist page, you will need to call the fetchWrtEventTypeET API on click of your “add all to cart” button and pass all the variant ids of the wishlisted products to this function.

Putting it all together

Now that we have all the bits and pieces ready, lets put it all together in our swymAddAllToCart.liquid file.

swymAddAllToCart.liquid

<script>
// the compiled JSX markup received from the "writing the button markup" step. Please fill it in from the first step.
function MyNotepadContent(props, getHandler){

}

//This function directs to the cart on the button click after adding the items to the cart
function swymAddMultipleToCartAndRedirect(episOrVariantIds, successCallback, errorCallback) {
  var formData = new FormData();
  episOrVariantIds.forEach(function(epiOrVariantId) {
    formData.append("id[]", epiOrVariantId);
  });
  var request = new XMLHttpRequest();
  request.addEventListener("load", function() {
    if(this.status == 200) {
      window.location = "/cart";
      if(successCallback) successCallback(this);
    } else {
      if(errorCallback) errorCallback(this);
    }
  });
  request.open("POST", "/cart/add");
  request.send(formData);
}

function swymCallbackFn(swat){
  SwymUiCore.registerComponent("NotepadContent", MyNotepadContent); 
  //Handler function that fetches the state from the store and calls the redirect function
  SwymUiCore.addHandler("AddAllWishlistToCart", function(store,props) {
    props.currentTarget.innerHTML = "Adding...";
    allProds = store.getState()["interestedProducts"];
    var epis=[];
    for (var i=0;i < allProds.length;i++) {
        if(!allProds[i].oos){
       	    epis.push(allProds[i]["epi"]); 
         }
    }
    swymAddMultipleToCartAndRedirect(epis, function(xhr) {}, function(xhr) {});
  });
}

if(!window.SwymCallbacks){
 window.SwymCallbacks = [];
}
window.SwymCallbacks.push(swymCallbackFn);
</script>

{%  comment %}  Use following CSS if you use Wishlist as a popup. If you use Wishlist as a page, use CSS below  {%  endcomment %}
<style id="swym-all">
li#swym-items-container + li.swym-add-all-to-cart.has-wishlist-items {
  display: block;
}

li.swym-add-all-to-cart {
  display: none;
  position: fixed;
  bottom: 15px;
  right: 15px;
}
.swym-all.swym-button {
  color: white;
  box-shadow: 1px 1px #999, 0 0 1px 0px #555;
  z-index: 1;
}
</style>

{%  comment %}  Use following CSS if you use Wishlist as a page.  {%  endcomment %}
<style id="swym-all">
li#swym-items-container + li.swym-add-all-to-cart.has-wishlist-items {
  display: block;
}

li.swym-add-all-to-cart {
  display: none;
  margin: 50px 0 0 0;
}
.swym-all.swym-button {
  color: white;
  box-shadow: 1px 1px #999, 0 0 1px 0px #555;
  z-index: 1;
  margin: auto;
  display: block;
}
</style>

ShellCopy

Lastly, we will include this file in our theme.liquid file like so –

{% include 'swymAddAllToCart' %}

ShellCopy

And that’s it! On saving your changes, you should see the “add all to cart” button floating at the bottom right of your wishlist widget. Please contact support if this doesn’t work for you as expected and we would be happy to help!