Edit

Add a way to add an item to a cart

This article is part of the Storefront UI Development Guide.

• Previous Task: Build navigation menus
• Next Task: Build a cart page

In Reaction, there are anonymous carts and account carts. For more information, refer to Concepts: Carts. Since we haven't added a way to log in to the storefront yet, we're going to work only with anonymous carts in this section.

In your UI, on product list items, the product detail page, or both, you will add a button, which usually says something like "Add to Cart". This button must invoke logic that decides which GraphQL mutation to use:

• If you already have an anonymous cart ID and token in your application state, call the addCartItems mutation.
• If you do not have an anonymous cart ID and token in your application state, call the createCart mutation.

Defining these mutations looks something like this:

mutation createCartMutation($input: CreateCartInput!) {
  createCart(input: $input) {
    cart {
     ...CartFragment
    }
    incorrectPriceFailures {
      ...IncorrectPriceFailuresFragment
    }
    minOrderQuantityFailures {
      ...MinOrderQuantityFailuresFragment
    }
    token
  }
}

mutation addCartItemsMutation($input: AddCartItemsInput!) {
  addCartItems(input: $input) {
    cart {
      ...CartFragment
    }
    incorrectPriceFailures {
      ...IncorrectPriceFailuresFragment
    }
    minOrderQuantityFailures {
      ...MinOrderQuantityFailuresFragment
    }
  }
}

fragment CartFragment on Cart {
  _id
  email
  items {
    ...CartItemConnectionFragment
  }
  totalItemQuantity
}

fragment CartItemConnectionFragment on CartItemConnection {
  pageInfo {
    hasNextPage
    endCursor
  }
  edges {
    node {
      _id
      productConfiguration {
        productId
        productVariantId
      }
      attributes {
        label
        value
      }
      createdAt
      isBackorder
      isLowQuantity
      isSoldOut
      imageURLs {
        thumbnail
      }
      price {
        displayAmount
      }
      priceWhenAdded {
        displayAmount
      }
      quantity
      subtotal {
        displayAmount
      }
      title
      productVendor
      variantTitle
      optionTitle
      currentQuantity
    }
  }
}

fragment IncorrectPriceFailuresFragment on IncorrectPriceFailureDetails {
  currentPrice {
    displayAmount
  }
  providedPrice {
    displayAmount
  }
}

fragment MinOrderQuantityFailuresFragment on MinOrderQuantityFailureDetails {
  minOrderQuantity
  quantity
}

If you call the createCart mutation and get a success response, store the cart._id and token from the response in persistent app state tied to the browser or device, for example, localStorage or a cookie. Then the next time "Add to Cart" is clicked, your logic will see the cart ID and token and choose to call the addCartItems mutation.

Regardless of whether you are creating a new cart with items or adding items to an existing cart, you must check for incorrectPriceFailures and minOrderQuantityFailures in the response. The server may have added only some items to the cart but been unable to add other items. If any items could not be added because you tried to add them at an incorrect price, there will be data in incorrectPriceFailures that you can use to show a message to the shopper. This can happen if a price changed after the page was loaded. If any items could not be added because you tried to add fewer than the minimum purchase quantity to the cart, there will be data in minOrderQuantityFailures that you can use to show a message to the shopper. They can then increment the quantity and attempt to add it again.

Next Task: Build a cart page