# CollectedProduct

Tile component with image, descriptions and actions for collected product.

# Most common usage scenario

<template>
  <SfCollectedProduct
    :qty="productQty"
    :class="customClass"
    @input="productQty = $event"
    :image="image"
    :image-width="imageWidth"
    :image-height="imageHeight"
    :title="title"
    :regular-price="regularPrice"
    :special-price="specialPrice"
  >
    <template #configuration>
      <div :style="{ margin: '1rem 0 0 0' }">
        <SfProperty name="Size" value="XS" />
        <SfProperty name="Color" value="white" />
      </div>
    </template>
    <template #actions>
      <SfButton class="sf-button--text desktop-only">Save for later</SfButton>
    </template>
  </SfCollectedProduct>
</template>
<script>
import { SfCollectedProduct } from "@storefront-ui/vue";
import { SfProperty } from "@storefront-ui/vue";
import { SfButton } from "@storefront-ui/vue";
export default {
  components: {
    SfCollectedProduct,
    SfProperty,
    SfButton,
  },
  data() {
    return {
      productQty: 1,
      image: {
        mobile: { url: "/assets/storybook/Home/productB.jpg" },
        desktop: { url: "/assets/storybook/Home/productB.jpg" },
      },
      imageWidth: 140,
      imageHeight: 200,
      title: "Cotton Sweater",
      regularPrice: "$10,99",
      specialPrice: "$5,09",
    };
  },
};
</script>

# Props

  • image

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

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

    • Product image height, without unit
    • type: string|number
    • defaultValue: 200
  • title

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

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

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

    • Selected quantity
    • type: number|string
    • defaultValue: 1
  • link

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

# Slots

  • title

    • bindings: title
  • price

    • bindings: specialPrice, regularPrice
  • configuration

  • actions

  • image

    • bindings: image, title
  • input

  • remove

    • bindings: removeHandler
  • more-actions

# Events

  • click:remove

# CSS modifiers

  • .sf-collected-product__remove--circle-icon
  • .sf-collected-product__remove--text
  • .sf-collected-product--detailed

# CSS custom properties (variables)

  • --collected-product-width
  • --collected-product-padding
  • --collected-product-background
  • --collected-product-z-index
  • --collected-product-remove-opacity
  • --collected-product-remove-right
  • --collected-product-remove-transition
  • --collected-product-remove-top
  • --collected-product-remove-circle-icon-display
  • --collected-product-remove-circle-icon-transform
  • --collected-product-remove-bottom
  • --collected-product-remove-text-display
  • --collected-product-image-background
  • --collected-product-main-margin
  • --collected-product-main-flex-direction
  • --collected-product-title-margin
  • --collected-product-title-font
  • --collected-product-title-font-weight
  • --collected-product-title-font-size
  • --collected-product-title-font-line-height
  • --collected-product-title-font-family
  • --collected-product-box-shadow
  • --collected-product-actions-justify-content
  • --collected-product-actions-align-items

# Overridden other components CSS variables

  • --quantity-selector-background
  • --quantity-selector-width
  • --quantity-selector-height
  • --link-text-decoration
  • --collected-product-transition

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.