ProductInfo - Yampi Developer Portal

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.

⌘I