Skip to main content
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

PropriedadeTipoObrigatóriaValor padrãoDescrição
highlightTypePaymentString❌'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ávelTipoDescrição
skuObjectSKU atualmente selecionado.
availabilityBooleanIndica se o SKU está disponível para compra.
warrantyStringTexto de garantia do produto.
priceObjectObjeto com todos os preços (promocional, PIX, boleto, parcelado).
selectedPriceStringTipo de preço em destaque conforme highlightTypePayment.
priceTextStringPreço formatado em texto para exibição.
loadingPricesBooleantrue enquanto os preços estão sendo calculados.

​
Mixins utilizados

MixinFinalidade
productMixinAcesso ao produto e SKU selecionado.
mobileMixinDetecção de dispositivo para variações de layout.