liquidAjaxCart.change()

A method of the liquidAjaxCart object, which initiates an Ajax request to the Shopify Cart API POST /cart/change.js endpoint.

Structure

The method takes a request body object as the first parameter, and an object with the request options as the second parameter.

The request body object is passed to the Shopify Cart API endpoint as is, so read what data Shopify expects in the /cart/change.js documentation.

// Request body data you want to send to Shopify
const body = {
  id: '40934235668668:719bc4cb60310cbc4dee2ae38d8bf04c',
  quantity: 0
}

const options = {
  firstCallback: function(requestState) {
    /**
     * This callback function will be called first after the request is performed,
     * thus none of request subscribers knows the result of the request,
     * thus Cart state is not updated yet, sections are not updated yet,
     * everything is not updated yet.
     */
  },
  lastCallback: function(requestState) {
    /**
     * This callback-function will be called the latest
     * among request subscribers,
     * thus all the request subscribers are executed,
     * thus Cart state is updated, sections are updated,
     * everything is updated.
     */
  },
  info: {
    /**
     * Any additional data you want to attach to the Request state object.
     * Don't use the "initiator" and the "cancel" keys.
     */
    myParameter: 'value'
  },

  // whether the request should go to the beginning of the queue rather than to the end
  important: false
}

liquidAjaxCart.change(body, options);

Options

The options parameter is an object, and it might have the following properties:

firstCallback

The firstCallback parameter is a callback function that will be called first after the request is performed and before any other callback functions, that are subscribed to the request, are called. Thus, this function will be called before Liquid Ajax Cart starts updating the liquidAjaxCart.cart object, the data-ajax-cart-section elements, the data-ajax-cart-bind elements, the global CSS classes.

The firstCallback function will be called with the only parameter — the Request state object.

The detailed explanation on when the firstCallback function is called, and what exactly happens before and after the call, is in the “Lifecycle, events, API” guide.

lastCallback

The lastCallback parameter is a callback function that will be called last after the request is performed and after any other callback functions, that are subscribed to the request, are called. Thus, this function will be called after Liquid Ajax Cart updates the liquidAjaxCart.cart object, the data-ajax-cart-section elements, the data-ajax-cart-bind elements, the global CSS classes.

The lastCallback function will be called with the only parameter — the Request state object.

The detailed explanation on when the lastCallback function is called, and what exactly happens before and after the call, is in the “Lifecycle, events, API” guide.

info

The info parameter is a JavaScript object that will be attached to the Request state object of the request. You can add your custom properties to the Request state using the info parameter.

Don’t use the initiator and the cancel keys as they are reserved properties.

important

If you want a request to go to the beginning of the Queues or Requests rather than to the end in order to execute it as soon as possible, set the important property to true.

Explore the feature and the use cases on the Queues or Requests page.