# ProductCard

# Most common usage scenario


This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.

# Props

  • image

    • Product image. It should be an url of the product
    • type: array|object|string
    • defaultValue: "assets/storybook/product_thumb.png"
  • title

    • Product title
    • type: string
    • required: true
  • link

    • Link to product page
    • type: string
  • 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

# Slots

  • wishlist-icon

    • bindings: currentWishlistIcon
  • image

    • bindings: image, title
  • title

    • bindings: title
  • price

    • bindings: specialPrice, regularPrice
  • reviews

    • bindings: maxRating, scoreRating

# Events

  • click:wishlist

# CSS modifiers

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

# SCSS variables

$product-card-max-width: 200px !default;
$product-card-max-width-desktop: 240px !default;
$product-card-padding: $spacer-small !default;
$product-card-padding-desktop: $spacer-big !default;
$product-card-hover-box-shadow: 0px 4px 35px rgba(168, 172, 176, 0.19) !default;
$product-card__image-background-color: $c-bg-primary !default;
$product-card__image-blend-mode: darken !default;
$product-card__pictures-height: 180px !default;
$product-card__pictures-height-desktop: 250px !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/organisms/SfProductCard/SfProductCard.html"></template>
<script src="@storefront-ui/vue/src/components/organisms/SfProductCard/SfProductCard.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfProductCard.scss";

You can read about using component partials here

# Play with this component

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