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

# ProductInfo

> Exibe as principais informações do produto — nome, preço, avaliação e disponibilidade — com suporte a slot para customização.

<img src="https://mintcdn.com/yampi/aVuas9YGYMYd9zGw/images/componentes/product-info.png?fit=max&auto=format&n=aVuas9YGYMYd9zGw&q=85&s=6aa7916d400f7ca0d85522e95b45375a" alt="" width="1257" height="705" data-path="images/componentes/product-info.png" />

O componente `ProductInfo` centraliza as informações essenciais do produto e expõe um **slot** com escopo para que você acesse e customize a exibição dos dados sem precisar reescrever a lógica de negócio.

## Uso

```twig theme={"system"}
<product-info highlight-type-payment="pix">
  <template v-slot="{ sku, availability, price, selectedPrice, priceText, loadingPrices }">
    <h1>{{ product.name }}</h1>
    <p>{{ priceText }}</p>
    <span v-if="!availability">Produto indisponível</span>
  </template>
</product-info>
```

## Propriedades

| Propriedade            |   Tipo   | Obrigatória |   Valor padrão  | Descrição                                                                            |
| :--------------------- | :------: | :---------: | :-------------: | :----------------------------------------------------------------------------------- |
| `highlightTypePayment` | `String` |      ❌      | `'promotional'` | Define o tipo de preço em destaque. Valores: `'pix'`, `'boleto'` ou `'promotional'`. |

## Slot padrão

O slot padrão expõe as seguintes variáveis via `v-slot`:

| Variável        |    Tipo   | Descrição                                                         |
| :-------------- | :-------: | :---------------------------------------------------------------- |
| `sku`           |  `Object` | SKU atualmente selecionado.                                       |
| `availability`  | `Boolean` | Indica se o SKU está disponível para compra.                      |
| `warranty`      |  `String` | Texto de garantia do produto.                                     |
| `price`         |  `Object` | Objeto com todos os preços (promocional, PIX, boleto, parcelado). |
| `selectedPrice` |  `String` | Tipo de preço em destaque conforme `highlightTypePayment`.        |
| `priceText`     |  `String` | Preço formatado em texto para exibição.                           |
| `loadingPrices` | `Boolean` | `true` enquanto os preços estão sendo calculados.                 |

## Mixins utilizados

| Mixin          | Finalidade                                        |
| :------------- | :------------------------------------------------ |
| `productMixin` | Acesso ao produto e SKU selecionado.              |
| `mobileMixin`  | Detecção de dispositivo para variações de layout. |