Adding “Add all to cart” button in your Engage UI

Introduction

This post walks you through the steps required to add all to cart button like shown below, in the Engage UI using Swym 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 SAHeader component has the header of the Engage UI. For the UI we have in the introduction section, we will need to add another row to the SAHeader component with the “Add all to cart” button inside it. Below is the JSX markup for our override of the SAHeader component –

function SAHeader(props, getHandler){
  return (
    <header selector="#swym-sa-header" className="App-header">
      <div className="headerActions">
        <div className="searchActWrap">
        	<Button btnType="unstyled">
        	</Button>
        </div>
        <div className="titleWrap">
        	<h1 className="swym_color_text-contrast">{props.Strings.SATitle}</h1>
        	<p className="swym_color_text-contrast">{props.Strings.SASubtitle}</p>
        </div>
        <div className="closeActWrap">
        	<Button onClick={getHandler("closeSaHandler")} btnType="unstyled">
        		X
        	</Button>
        </div>
      </div>
      {props.showSearch ? <Search /> : ""}
      {
        (props.interestedProducts && props.interestedProducts.length > 1 && (props.activeTab == "wishlist" || props.activeTab == "interested")) ?
        (
          <div className="add-all-to-cart">
            <Button onClick={getHandler("AddAllWishlistToCart")}
              className="Swym-PrimaryTextColor primaryAct" btnType="elevated_twoTone" icon="addtocart">
              Add all to cart
            </Button>
          </div>
        ) : ""
      }
    </header>
  );
}

ShellCopy

The code before the last div with the class name “add-all-to-cart” is what comes by default. We have simply added one more div and put in the “add all to cart” button in it, if the user is on the interested products tab or the wishlist tab and if the products on the current screen are greater than 1. 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.liquidinside a script tag .

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("SAHeader", SAHeader);  // 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++) {
      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 SAHeader component includes the add all to cart button.
3. The SwymUiCore.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 SAHeader(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("SAHeader", SAHeader); 
  //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++) {
      epis.push(allProds[i]["epi"]);
    }
    swymAddMultipleToCartAndRedirect(epis, function(xhr) {}, function(xhr) {});
  });
}

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

<style id="swym-all">
.add-all-to-cart {
  padding: 8px;
  text-align: right;
}
</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!