ProductCard - Yampi Developer Portal

Componente de card de produto pronto para uso em grades. Exibe imagem com lazy loading, nome, marca, preços e botão de adicionar ao carrinho. É o bloco base de qualquer listagem de produtos.

Uso

<ProductCard :product="product" image-size="medium" />

Dentro de um slot de Grid ou Collection:

<Collection :collection-id="1" :total-products="8">
  <template v-slot="{ product }">
    <ProductCard :product="product" />
  </template>
</Collection>

Propriedades

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`product`	`Object`	✅	—	Objeto do produto com todos os dados (nome, preços, imagens, etc.).
`imageSize`	`String`	❌	`'default'`	Tamanho da imagem do card. Valores: `'default'` ou `'medium'`.