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