> For the complete documentation index, see [llms.txt](https://3merge.gitbook.io/q3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://3merge.gitbook.io/q3/client/q3-ui-cart.md).

# q3-ui-cart

Shopping cart plugin for q3-components

## Installation

```
yarn add q3-ui-cart
```

### Usage

#### Quick setup

The example below may render strangely, but it would setup the state enough to use the cart. Of course, you'll want to nest these components elsewhere to accommodate for custom layouts. So long as the hierarchy remains in place, you can move the internal cart components anywhere.

{% code title="Cart.jsx" %}

```jsx
import React from 'react';
import Provider, {
  AddToCart,
  Drawer,
  Launcher,
  LineItem,
} from 'q3-ui-cart';

export default (providerProps) => (
  <Provider {...providerProps}>
    <Launcher>
      {(close, isOpen) => (
        <Drawer
          checkoutPath="/checkout"
          close={close}
          isOpen={isOpen}
          shopPath="/shop"
          titleKey="title"                  
        >
          <LineItem />
        </Drawer>
      )}
    </Launcher>
    <AddToCart
      product="abc"
      size="small"
      variant="spread"          
    />
  </Provider>
);
```

{% endcode %}

The state magic happens in the provider props. This provider accepts several resolver functions for managing new, updated and removed items in the cart. Note that each gets re-assigned internally: if you're making modifications to the source code, check the `context` file for such mapping.

| Prop                | Description                                                                                     | Type       |
| ------------------- | ----------------------------------------------------------------------------------------------- | ---------- |
| `addItemToOrder`    | A promise for adding an item to the order state.                                                | `function` |
| `clear`             | A promise for deleting the active order. Successful calls drop the order ID from local storage. | `function` |
| `pollOrder`         | A promise for refreshing the state after an item call.                                          | `function` |
| `removeItemInOrder` | A promise for removing an item from the order.                                                  | `function` |
| `updateItemInOrder` | A promise for updating an item's quantity in the order.                                         | `function` |
| `updateOrder`       | A promise for patching the order, namely the title (see Drawer API for more information).       | `function` |