# ProductCard

Product card component with image, description and rating.

# Most common usage scenario

<template>
  <SfProductCard
    :image="image"
    :image-width="imageWidth"
    :image-height="imageHeight"
    :badge-label="badgeLabel"
    :badge-color="badgeColor"
    :title="title"
    :link="link"
    :link-tag="linkTag"
    :score-rating="scoreRating"
    :max-rating="maxRating"
    :reviews-count="reviewsCount"
    :regular-price="regularPrice"
    :special-price="specialPrice"
    :wishlist-icon="wishlistIcon"
    :is-on-wishlist-icon="isOnWishlistIcon"
    :is-on-wishlist="isOnWishlist"
    :show-add-to-cart-button="showAddToCartButton"
    :add-to-cart-disabled="addToCartDisabled"
    :is-added-to-cart="isAddedToCart"
    @click:is-added-to-cart="alert('@click:is-added-to-cart')"
    @click:wishlist="alert('@click:wishlist')"
    @click:reviews="alert('@click:reviews')"
  />
</template>
<script>
import { SfProductCard } from "@storefront-ui/vue";
export default {
  components: {
    SfProductCard,
  },
  data() {
    return {
      image: {
        mobile: { url: "/assets/storybook/Home/productB.jpg" },
        desktop: { url: "/assets/storybook/Home/productB.jpg" },
      },
      imageWidth: 216,
      imageHeight: 326,
      badgeLabel: "-50%",
      badgeColor: "color-primary",
      title: "Cotton Sweater",
      link: "",
      linkTag: "",
      scoreRating: 4,
      maxRating: 5,
      reviewsCount: 7,
      regularPrice: "$10.99",
      specialPrice: "$5.09",
      wishlistIcon: "heart",
      isOnWishlistIcon: "heart_fill",
      isOnWishlist: false,
      showAddToCartButton: true,
      isAddedToCart: false,
      addToCartDisabled: false,
    };
  },
};
</script>

# Props

  • image

    • Product image. It should be an url of the product
    • type: array|object|string
    • defaultValue: ""
  • imageWidth

    • Product image width, without unit
    • type: string|number
    • defaultValue: 216
  • imageHeight

    • Product image height, without unit
    • type: string|number
    • defaultValue: 326
  • badgeLabel

    • Badge label
    • type: string
    • defaultValue: ""
  • badgeColor

    • Badge color. It can be according to our standard colors, or legitimate CSS color such as #fff, rgb(255,255,255)), and lightgray or nothing. Standard colors: primary, secondary, white, black, accent, green-primary, green-secondary, gray-primary, gray-secondary, light-primary, light-secondary, pink-primary, pink-secondary, yellow-primary, yellow-secondary, blue-primary, blue-secondary.
    • type: string
    • defaultValue: ""
  • title

    • Product title
    • type: string
    • defaultValue: ""
  • link

    • Link to product page
    • type: string|object
    • defaultValue: ""
  • linkTag

    • Link element tag
    • type: string
    • defaultValue: undefined
  • scoreRating

    • Product rating
    • type: number|boolean
    • defaultValue: false
  • reviewsCount

    • Product reviews count
    • type: number|boolean
    • defaultValue: false
  • maxRating

    • Maximum product rating
    • type: number|string
    • defaultValue: 5
  • regularPrice

    • Product regular price
    • type: number|string
    • defaultValue: null
  • specialPrice

    • Product special price
    • type: number|string
    • defaultValue: null
  • wishlistIcon

    • Wish list icon. This is the default icon for product not yet added to wish list. It can be a icon name from our icons list, or array or string as SVG path(s).
    • type: string|array|boolean
    • defaultValue: "heart"
  • isOnWishlistIcon

    • Wish list icon for product which has been added to wish list. This is the icon for product added to wish list. Default visible on mobile. Visible only on hover on desktop. It can be a icon name from our icons list, or array or string as SVG path(s).
    • type: string|array
    • defaultValue: "heart_fill"
  • isOnWishlist

    • Status of whether product is on wish list or not
    • type: boolean
    • defaultValue: false
  • showAddToCartButton

    • Status of showing add to cart button
    • type: boolean
    • defaultValue: false
  • isAddedToCart

    • isAddedToCart status of whether button is showed, product is added or not
    • type: boolean
  • addToCartDisabled

    • addToCartDisabled status of whether button is disabled when out of stock
    • type: boolean
    • defaultValue: false

# Slots

  • image

    • bindings: image, title, link, imageHeight, imageWidth
  • badge

    • bindings: badgeLabel, badgeColor
  • wishlist-icon

    • bindings: currentWishlistIcon
  • add-to-cart

    • bindings: isAddedToCart, showAddedToCartBadge, isAddingToCart, title
  • add-to-cart-icon

  • title

    • bindings: title, link
  • price

    • bindings: specialPrice, regularPrice
  • reviews

    • bindings: maxRating, scoreRating

# Events

  • click:wishlist

  • click:add-to-cart

# CSS modifiers

  • .sf-product-card--on-wishlist

# CSS custom properties (variables)

  • --product-card-z-index
  • --product-card-max-width
  • --product-card-height
  • --product-card-padding
  • --product-card-background
  • --product-card-transition
  • --product-card-box-shadow
  • --product-card-title-margin
  • --product-card-title-font
  • --product-card-title-font-weight
  • --product-card-title-font-size
  • --product-card-title-font-line-height
  • --product-card-title-font-family
  • --product-card-image-transition
  • --product-card-image-opacity
  • --product-card-image-even-opacity
  • --product-card-badge-top
  • --product-card-badge-left
  • --product-card-add-button-right
  • --product-card-add-button-bottom
  • --product-card-add-button-display
  • --product-card-add-button-transform
  • --product-card-add-button-opacity
  • --product-card-margin
  • --product-card-reviews-count-margin
  • --product-card-reviews-count-color
  • --product-card-wishlist-icon-top
  • --product-card-wishlist-icon-right
  • --product-card-wishlist-icon-padding
  • --product-card-wishlist-icon-opacity
  • --product-card-wishlist-icon-transition

# Overridden other components CSS variables

  • --circle-icon-position
  • --button-box-shadow
  • --icon-color

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.