Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
25 lines (19 sloc) 1.15 KB
id title
storefront-cart-page
Build a cart page

This article is part of the Storefront UI Development Guide.

After a shopper has clicked "Add to Cart", they are going to want to now see their cart. This could be a sidebar component, a modal, or a full page. Either way, the data loading is similar. You will do one query for cart data, with pagination on the cart.items connection.

query anonymousCartByCartIdQuery($cartId: ID!, $token: String!, $itemsAfterCursor: ConnectionCursor) {
  cart: anonymousCartByCartId(cartId: $cartId, token: $token) {
    items(first: 20, after: $itemsAfterCursor) {
      ...CartItemConnectionFragment
    }
  }
}

Typically we recommend an infinite scrolling style pagination for cart items. When the user is scrolling and nears the bottom of the list, refetch this query with itemsAfterCursor variable set to the cursor from the last item's edge.

Next Task: Implement cart modification

You can’t perform that action at this time.