> ## 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.

# ProductCustomizations

> Gerencia a seleção de SKU, variações, botão de compra, quantidade, frete e carrinho na página de produto.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/product-customizations.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=33dc44db853da49b7bf4d8cff85999d5" alt="" width="520" height="357" data-path="images/componentes/product-customizations.png" />

O componente `ProductCustomizations` é o núcleo interativo da página de produto. Ele reúne a seleção de variações (SKU), customizações, seletor de quantidade, cálculo de frete, cashback e o botão de adicionar ao carrinho.

## Uso

```twig theme={"system"}
<product-customizations
  buy-button-text="Comprar agora"
  :show-quantity-selector="true"
  :show-shipping-form="true"
  :show-modal-after-purchase="false"
  :show-mobile-floating-button="true"
  cart-type="side_cart"
  variations-style="buttons"
  :cashbacks="{{ cashbacks | json_encode }}"
  :price="price"
/>
```

## Propriedades

| Propriedade                |    Tipo   | Obrigatória |  Valor padrão | Descrição                                                                  |
| :------------------------- | :-------: | :---------: | :-----------: | :------------------------------------------------------------------------- |
| `price`                    |  `Object` |      ✅      |       —       | Objeto com os dados de preço do produto atual.                             |
| `buyButtonText`            |  `String` |      ❌      |  `'Comprar'`  | Texto exibido no botão de compra.                                          |
| `showQuantitySelector`     | `Boolean` |      ❌      |    `false`    | Exibe o seletor de quantidade antes do botão de compra.                    |
| `showInventoryCountdown`   | `Boolean` |      ❌      |    `false`    | Exibe o contador de estoque disponível.                                    |
| `showShippingForm`         | `Boolean` |      ❌      |    `false`    | Exibe o formulário de cálculo de frete por CEP.                            |
| `showModalAfterPurchase`   | `Boolean` |      ❌      |    `false`    | Exibe um modal de confirmação após adicionar ao carrinho.                  |
| `showMobileFloatingButton` | `Boolean` |      ❌      |    `false`    | Exibe um botão de compra flutuante em dispositivos móveis.                 |
| `cartType`                 |  `String` |      ❌      | `'suspended'` | Tipo de carrinho após o clique. Valores: `'suspended'` ou `'side_cart'`.   |
| `variationsStyle`          |  `String` |      ❌      |    `'list'`   | Estilo de exibição das variações de SKU. Valores: `'list'` ou `'buttons'`. |
| `cashbacks`                |  `Array`  |      ❌      |      `[]`     | Lista de cashbacks ativos da loja para exibição junto ao produto.          |

## Mixins utilizados

| Mixin           | Finalidade                                                     |
| :-------------- | :------------------------------------------------------------- |
| `productMixin`  | Acesso ao produto atual, SKU selecionado e estado do carrinho. |
| `cashbackMixin` | Cálculo e validação de cashback para o SKU selecionado.        |