# Creating a Cart There are two different options for managing cart state. If you want to keep track of cart state on the front end, you can use client-side code to keep track of the cart. However, we also offer APIs that enable you to push cart state to the server. ## Unmanaged Carts You will need to create and store a representation of the customer's shopping cart as they browse your menu and add items. We would suggest that you store the cart state in [localstorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) or a [cookie](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) so that it will persist if the customer refreshes their browser or leaves the site and comes back. As you will need to eventually submit the shopping cart to our embedded checkout via a `postMessage`, we recommend using the following format for your representation. ``` products: [ { productId: 2089, priceId: 'eighth_ounce', count: 2, }, { productId: 1, priceId: 'eighth_ounce', count: 1, }, ] ``` Each product will need a `productId`, a `priceId`, and a `count`. For information on what you eventually do with this cart data, see the section on [Embedding Checkout](/jane-docs/implementing-roots/embedding-checkout.md) ## Managed Carts An HTTP API is provided as an alternative to implement carts that offloads managing the state of the cart to [Cart API](https://www.iheartjane.com/api/jane-api-docs/index.html?urls.primaryName=Carts%20API%20V1%20Docs). The API is public and as such, requires no authentication to be used, to allow "guest carts" (carts for non-authenticated users. It's of utmost importance to **keep track of the cart UUID at all time**, since losing it would make the cart unrecoverable. If an authentication token is provided, the cart will be assigned to the authenticated user and will only be accessible through the API when the authentication token for that user is provided.\ Authentication is handled through Cognito and to authenticate with Cart API, the Cognito Token must be attached to the request through the `Authorization` header as [bearer token](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#bearer). A traditional Cart API flow looks like the following:

Cart API flow

#### Cart API Usage First, the user authenticates/proceeds as guest (`Authorization` header set/not set). For the purpose of this document, the user will be authenticated. A cart is created using the endpoint `POST /carts`. It's possible to supply a UUID to use for this cart, or none, in which case it's necessary to inspect the response to collect the cart UUID. For the purpose of this document, a cart UUID will be provided in the request, according to the following example: ``` POST /roots/carts_api/v1/carts Authorization: Bearer COGNITOTOKENHERE Content-Type: application/json Body: (must be provided in json format) { "store_id": 1, "cart_uuid": "ec093945-a2be-4ffa-9bab-63b420132d62" } ``` At this point it's necessary to identify the **PVID** to add an item to the cart. The PVID is a string with the following format: `"+"` as retrieved from the menu products endpoints in [Store Operations API](https://www.iheartjane.com/api/jane-api-docs/index.html?urls.primaryName=Store%20Operations%20API%20V1%20Docs), [Menu Products API](https://www.iheartjane.com/api/jane-api-docs/index.html?urls.primaryName=Menu%20API%20V1%20Docs) or from Algolia. For example, the PVID for a menu product with product id 123 and price id "gram" would look like the following: ``` "123+gram" ``` Keep in mind that this API uses **product\_id** field, not menu\_product\_id. An item is added to the cart using `POST /carts/:uuid/items`, the request looks like the following: ``` POST /roots/carts_api/v1/carts/ec093945-a2be-4ffa-9bab-63b420132d62/items Authorization: Bearer COGNITOTOKENHERE Content-Type: application/json Body: (must be provided in json format) { "pvid": "123+gram", "quantity": 3 } ``` The quantity of the item can be changed using `UPDATE /carts/:uuid/items/:pvid`, the request looks like the following: ``` PUT /roots/carts_api/v1/carts/ec093945-a2be-4ffa-9bab-63b420132d62/items/123+gram Authorization: Bearer COGNITOTOKENHERE Content-Type: application/json Body: (must be provided in json format) { "quantity": 2 } ``` Once the cart is ready, it's possible to proceed to checkout according to [Embedding Checkout](/jane-docs/implementing-roots/embedding-checkout.md#checkout-with-a-pre-existing-cart). Other endpoints are available to control the cart lifecycle, refer to the [Cart API Reference](https://www.iheartjane.com/api/jane-api-docs/index.html?urls.primaryName=Carts%20API%20V1%20Docs) to learn all the available ones. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.iheartjane.com/jane-docs/implementing-roots/building-your-menu/creating-a-cart.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.