Appearance

Error events ​

These events are dispatched when something goes wrong.

theme:product:error:add-to-cart ​

Dispatched when a product could not be added to cart.

Event detail ​

  • productRootEl: the product root element containing the form where the error originated (can be null if there isn’t one, for example, if the error originated in a Quick Buy component)
  • formEl: the form element where the error originated
  • sourceId: the ID of the form element where the error originated
  • variantId: the ID of the variant that couldn’t be added to the cart
  • errors: the errors property from the API response, an object of errors and corresponding fields for gift card recipient forms, the fallback value if absent is usually a localized error message; falls back to the description property
  • message: the description property from the API response, usually the localized error message; falls back to the message property

Example ​

JavaScript
document.addEventListener(
  'theme:product:error:add-to-cart',
  (e) => {
    const {
      productRootEl,
      formEl,
      sourceId,
      variantId,
      errors,
      message,
    } = e.detail;
  }
);
document.addEventListener(
  'theme:product:error:add-to-cart',
  (e) => {
    const {
      productRootEl,
      formEl,
      sourceId,
      variantId,
      errors,
      message,
    } = e.detail;
  }
);

theme:line-item:error ​

Dispatched when an error occurred updating the line item.

Event detail: ​

  • message: the localized error message from the API response
  • itemsRootEl: the cart items’ container
  • lineItemEl: the cart item element
  • variantId: the ID of the variant that has just been added
  • key: the key of the line item
  • quantity: the quantity of the line item

Example ​

JavaScript
document.addEventListener('theme:line-item:error', (e) => {
  const {
    message,
    itemsRootEl,
    lineItemEl,
    variantId,
    key,
    quantity,
  } = e.detail;
});
document.addEventListener('theme:line-item:error', (e) => {
  const {
    message,
    itemsRootEl,
    lineItemEl,
    variantId,
    key,
    quantity,
  } = e.detail;
});

theme:cart:error:other ​

Dispatched when an unknown error occurred while updating the cart.

Event detail ​

  • message: the theme’s default localized cart error message
  • error: the underlying error object that was caught

Example ​

JavaScript
document.addEventListener('theme:cart:error:other', (e) => {
  const { message, error } = e.detail;
});
document.addEventListener('theme:cart:error:other', (e) => {
  const { message, error } = e.detail;
});

theme:cart:error ​

This is a general event that is dispatched when the more specific theme:product:error:add-to-cart, theme:line-item:error or theme:cart:error:other have been dispatched.

Event detail ​

  • type: the event type of the underlying event (theme:product:error:add-to-cart, theme:line-item:error or theme:cart:error:other)
  • message: the error message from the underlying event
  • originalDetail: the detail object of the underlying event (see above for details)

Example ​

JavaScript
document.addEventListener('theme:cart:error', (e) => {
  const { type, message, originalDetail } = e.detail;

  switch (type) {
    case 'theme:product:error:add-to-cart':
      const {
        productRootEl,
        formEl,
        sourceId,
        variantId,
        errors,
        message,
      } = originalDetail;
      break;
    case 'theme:line-item:error':
      const {
        message,
        itemsRootEl,
        lineItemEl,
        variantId,
        key,
        quantity,
      } = originalDetail;
      break;
    case 'theme:cart:error:other':
      const { message, error } = originalDetail;
      break;
  }
});
document.addEventListener('theme:cart:error', (e) => {
  const { type, message, originalDetail } = e.detail;

  switch (type) {
    case 'theme:product:error:add-to-cart':
      const {
        productRootEl,
        formEl,
        sourceId,
        variantId,
        errors,
        message,
      } = originalDetail;
      break;
    case 'theme:line-item:error':
      const {
        message,
        itemsRootEl,
        lineItemEl,
        variantId,
        key,
        quantity,
      } = originalDetail;
      break;
    case 'theme:cart:error:other':
      const { message, error } = originalDetail;
      break;
  }
});