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
inventoryAvailableToSell
isBackorder
isLowQuantity
isSoldOut
imageURLs {
thumbnail
}
price {
displayAmount
}
priceWhenAdded {
displayAmount
}
quantity
subtotal {
displayAmount
}
title
productVendor
variantTitle
optionTitle
}
}
}
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