Product Card
Product Cards contain content and actions about a single subject.
setup
Import the ProductCard component in a script tag.
Svelte Copy
import { ProductCard } from "@mgisolutions/design-system/svelte";
basic usage
Basic usage Product Card
Demonstrate
Best Seller
Limited Time Deal
Regular price $48.65
Save 36.30%
Special price $30.99
Best Seller
Limited Time Deal
Regular price $48.65
Save 36.30%
Special price $30.99
Svelte Copy
let product = {
mainImage: "https://drberg-dam.imgix.net/product-images/electrolyte-powder-strawberry-lemonade-02.png",
altText: "Electrolyte Powder Strawberry Lemonade | Dr. Berg",
isAutoship: false,
name: "Electrolyte Powder Strawberry Lemonade",
description:
"{List_Mode_description_from_pim}Dr. Berg 60 Billion Probiotic is a powerful combination of high-quality ingredients that delivers a daily dose of ten unique strains of friendly bacteria and a blend of four carefully-selected prebiotics.",
quantity: 3365,
regularPrice: 48.65,
specialPrice: 30.99,
sku: "ep-sl-50",
badge: ["Best Seller", "Limited Time Deal"],
stockIndicator: StockIndicator.IN_STOCK,
featureAttribute: "Capsule · Fiber · Herbal · FeaturedDetail · detail2 · detail3 · 2lines",
};
<ProductCard
cardType="vertical"
data={product}
/>
custom
Demonstrate
Best Seller
Limited Time Deal
Regular price $48.65
Save 36.30%
Special price $30.99
Best Seller
Limited Time Deal
Regular price $48.65
Save 36.30%
Special price $30.99
Stock Indicator
Type
Svelte Copy
<ProductCard
cardType="vertical"
isMobile={false}
hideWishlistIcon={false}
isSmall={false}
isShowQuantity={true}
isShowCheckbox={false}
disabled={false}
digital={false}
lazyLoad="false"
data={{
"mainImage": "https://drberg-dam.imgix.net/product-images/electrolyte-powder-strawberry-lemonade-02.png",
"altText": "Electrolyte Powder Strawberry Lemonade | Dr. Berg",
"isAutoship": false,
"name": "Electrolyte Powder Strawberry Lemonade",
"description": "{List_Mode_description_from_pim}Dr. Berg 60 Billion Probiotic is a powerful combination of high-quality ingredients that delivers a daily dose of ten unique strains of friendly bacteria and a blend of four carefully-selected prebiotics.",
"quantity": 3365,
"regularPrice": 48.65,
"specialPrice": 30.99,
"sku": "ep-sl-50",
"badge": [
"Best Seller",
"Limited Time Deal"
],
"stockIndicator": "In stock",
"featureAttribute": "Capsule · Fiber · Herbal · FeaturedDetail · detail2 · detail3 · 2lines"
}}
imageProperties={{
"sizes": "(min-width: 0) 300px, 300px",
"srcset": "https://drberg-dam.imgix.net/product-images/electrolyte-powder-strawberry-lemonade-02.png?w=300&h=100%&auto=compress,format 300w",
"srcDefault": "?w=300&h=100%&auto=compress,format 300w"
}}
isBVLoaded={false}
{handleImageError}
{onRedirectToDetailPage}
/>
Component Data
- props
- methods
| Name | Description | Type | Default |
|---|---|---|---|
| cardType | Either vertical or horizontal | string | horizontal |
| data | JSON object of the product | object | |
| imageProperties | imageProperties object | object | |
| isMobile | To set whether the current device is mobile or desktop. | Boolean | false |
| hideWishlistIcon | Hidden add to wishlist icon. | Boolean | false |
| isBVLoaded | Bazaarvoice's loading status | Boolean | false |
| isSmall | To get small size of horizontal card. | Boolean | false |
| isShowCheckbox | To get small size of horizontal card with checkbox. | Boolean | false |
| isShowQuantity | To Hide/Show Quantity div | Boolean | false |
| disable | disable or enable add to cart button | Boolean | false |
| digital | To Hide/Show stock indicate | Boolean | false |
| imageSize | Set default width and height for product card image | Object | { width: 180, height: 180, } |
| lazyLoadImage | To either lazy load image or not | boolean | false |