Build-a-box Cart Redirect

Note: this requires some technical expertise and we'd advise that you ask an experienced theme developer to implement the changes. If this is not done correctly the build-a-box discounts and UX can break.

Some merchant like to open a slide-out cart or modal after the customer has clicked the Add to Cart button in the build-a-box UI. You can achieve this by overriding the default behavior. This article explains the basic steps to get started but assumes that you know how to add JS to your theme.

Steps

1. Override the addToCartRedirect behavior by updating the build-a-box settings found on the window.
2. Write your function to implement the new, desired behavior
3. Full example

1. Override the addToCartRedirect behavior by updating the build-a-box settings found on the window.

In your theme.liquid add a <script> tag with the following snippet to override the default behavior. You can update the function name (redirectOverride) as its only an example but you will need the name of the function in the next step.

<script> window.bundleapp = window.bundleapp || {};
window.bundleapp.settings = Object.assign(
  {},
  window.bundleapp.settings || {},
  {
    bab: {
      addToCartRedirect: redirectOverride
    }
  },
);
</script>

2. Write your function to implement the new, desired behavior

How you implement the new behavior will be up to you. This function is called after the build-a-box items have successfully been added to the cart. The addToCartRedirect function is passed an object with two fields:

• cartItems: this is the array that was passed to the POST /{locale}/cart/add.js endpoint in order to add the items to the cart
• discount: this is a string and is only passed for dynamic build-a-box's that have box-size discounts

IMPORTANT: If you are provided a value in the discount argument it is your responsibility to add that discount to the cart. One method of doing this is:

window.location.assign(`/discount/${discountCode}?redirect=/cart`);

3. Full example

This is just an example and should not be used on your theme directly. Every theme's cart and UI is different and you will have to implement this based on what's required for your specific theme. The Awtomic support team is not familiar with your theme code so if you need assistance opening your slide-out cart or other theme related questions please contact your theme developer (generally this contact information can be found where you purchased the theme).

<script>
function redirectOverride ({cartItems, discountCode}) { 
  const openCartEvent = new Event( "reloadCartAndOpen", { cartItems, discountCode } );
  window.dispatchEvent(openCartEvent);
}
window.bundleapp = window.bundleapp || {};
window.bundleapp.settings = Object.assign(
  {},
  window.bundleapp.settings || {},
  { 
    bab: { 
      addToCartRedirect: redirectOverride 
    } 
  }, 
);
</script>