ProductImage

Component

Storybook

Figma Demo

Guidelines

Usage

Use the ProductImage component to display product images.

Component Specs

API

• containerType: string | Default: undefined
  The type of container the product is in.
• materialType: string | Default: undefined The type of material the product is made of.
• packagingDetail: boolean | Default: false Whether the product has packaging details.
• sku: string | Default: undefined The SKU of the product.
• stockStatus: 'in' | 'out' | Default: 'in' The stock status of the product.
• variant: 'stack' | 'row' | Default: 'stack' Whether the badges should be displayed in a stack or row.

Example

<script>
	import { ProductDetailBadges } from '@getprovi/craft-svelte';
</script>

<ProductDetailBadges containerType="keg" sku="123456789" packagingDetail stockStatus="in" />
<ProductDetailBadges
	variant="row"
	containerType="can"
	sku="123456789"
	packagingDetail
	stockStatus="out"
/>

Types

interface Props {
	containerType?: 'can' | 'bottle' | 'keg' | 'other';
	materialType?: 'aluminum' | 'glass' | 'plastic' | 'ceramic';
	packagingDetail?: boolean;
	sku?: string;
	stockStatus?: 'in' | 'out';
	variant?: 'stack' | 'row';
}