subscribeToCartAjaxRequests()

The subscribeToCartAjaxRequests function adds your callback function to the list of functions that will be called each time before another Shopify Cart API request is getting performed. The callback should be passed as the only parameter.

subscribeToCartAjaxRequests( myRequestCallback );

Two parameters will be passed to the callback function: requestState and subscribeToResult.

function myRequestCallback ( requestState, subscribeToResult ) {
  // callback code
}
subscribeToCartAjaxRequests( myRequestCallback );

requestState

The requestState parameter is the Request state object with information about the request. Since the request is not performed yet, not all the Request state properties will be available:

{
  "endpoint": "/cart/add.js",
  "requestBody": {},
  "requestType": "add",
  "info": {}
}
Mutate the request

You can mutate the requestBody and the info objects as they are references to the objects that will be used in the request. But if you assign a new object to them it will not work:

function myRequestCallback ( requestState, subscribeToResult ) {
  
  // Correct:
  if ( requestState.requestType === 'change' ) {
    if (requestState.requestBody instanceof FormData || requestState.requestBody instanceof URLSearchParams) {
      requestState.requestBody.set('quantity', 2); // Mutating the "requestBody" object is allowed
    } else {
      requestState.requestBody.quantity = 2; // Mutating the "requestBody" object is allowed
    }
  }

  // Wrong:
  if ( requestState.requestType === 'change' ) {
    requestState.requestBody = newRequestObject; // Assigning another object to the "requestBody" doesn't work
  }

  // Correct:
  requestState.info.my_parameter = 'value'; // Mutating the "info" object is allowed

  // Wrong:
  requestState.info = { my_parameter: 'value' }; // Assigning another object to the "info" doesn't work
}
Cancel the request

You can cancel the request by setting the info.cancel to true. The request will not be performed but all the request result subscribers will be called anyway.

function myRequestCallback ( requestState, subscribeToResult ) {
  requestState.info.cancel = true;
}

subscribeToResult

The subscribeToResult parameter is a function that adds your another callback to the list of functions that will be called after the current request is performed. Takes the result-callback as the only parameter:

function myRequestCallback ( requestState, subscribeToResult ) {
  console.log( 'Before request', requestState );
  
  const myResultCallback = function ( requestState ) {
    console.log( 'After request', requestState );
  }
  
  subscribeToResult( myResultCallback );
}
subscribeToCartAjaxRequests( myRequestCallback );

The result-callback will be called with the only parameter — the Request state object with information about the request.

Use with the state

The getCartState might be used within your callbacks:

<script type="module">
  import { subscribeToCartAjaxRequests, getCartState } from '{{ "liquid-ajax-cart-v1.10.1.js" | asset_url }}'

  // Calculate how cart item count has been changed after an "Add to cart" request
  
  subscribeToCartAjaxRequests(( data, subscribeToResult ) => {
    
    // calculate only for "Add to cart" requests
    if ( data.requestType === "add" ) {
  
      const state = getCartState();
      const itemCountBefore = state.status.cartStateSet ? state.cart.item_count : undefined;

      subscribeToResult( data => {
        if ( data.responseBody?.ok )
          const state = getCartState();
          const itemCountAfter = state.status.cartStateSet ? state.cart.item_count : undefined;
          // to get itemCountAfter after "Add to cart" request you can also use data.extraResponseData.body.item_count 

          if ( itemCountBefore !== undefined && itemCountAfter !== undefined ) {
            console.log(`Items quantity increased by ${ itemCountAfter - itemCountBefore } pcs`);
          }
        }
      })
    }
  })
</script>


Reference