> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Carrinho

> Gerencia o estado do carrinho de compras, incluindo adição, remoção e atualização de itens via API do checkout.

Módulo Vuex responsável por todas as operações do carrinho. Comunica-se com a API do checkout Yampi e dispara eventos de pixels após cada operação.

## Getters

| Getter     |   Tipo   | Descrição                                                             |
| :--------- | :------: | :-------------------------------------------------------------------- |
| `cart`     | `Object` | Objeto completo do carrinho, retornado pela API do checkout.          |
| `cartType` | `String` | Tipo do carrinho: `'suspended'` (padrão) ou outros tipos do checkout. |

## Actions

| Action               | Parâmetros                                                    | Descrição                                                                        |
| :------------------- | :------------------------------------------------------------ | :------------------------------------------------------------------------------- |
| `redirectToCart`     | —                                                             | Redireciona o usuário para o checkout (inclui UTMs e tokens).                    |
| `addProductsToCart`  | `{ skus, products, value, quantities?, extras?, showModal? }` | Adiciona um ou mais SKUs ao carrinho. Dispara evento de pixel após sucesso.      |
| `loadCart`           | —                                                             | Carrega o estado atual do carrinho da API. Em preview, usa dados de placeholder. |
| `updateItemQuantity` | `{ item, quantity, extras? }`                                 | Atualiza a quantidade de um item no carrinho.                                    |
| `removeItem`         | `{ item, items?, totalPrice }`                                | Remove um item do carrinho. Dispara evento GA4 após sucesso.                     |

## Uso

```js theme={"system"}
// Em um componente Vue
this.$store.dispatch('cart/addProductsToCart', {
    skus: this.selectedSku,
    products: this.product,
    value: this.selectedSku.price,
    quantities: 1,
    showModal: true,
});

// Ler o carrinho
this.$store.getters['cart/cart'];
```

```js theme={"system"}
// Via mixin (acesso direto ao Vuex)
import { mapGetters, mapActions } from 'vuex';

export default {
    computed: {
        ...mapGetters('cart', ['cart']),
    },
    methods: {
        ...mapActions('cart', ['addProductsToCart', 'redirectToCart']),
    },
};
```