# GroupedProduct

Grouped Product component

# Most common usage scenario

<template>
  <SfGroupedProduct
    :settings="settings"
    :has-carousel="hasCarousel"
    :style="{ maxWidth: '500px' }"
  >
    <SfGroupedProductItem
      :qty="productQty"
      @input="productQty = $event"
      :image="image"
      :image-width="imageWidth"
      :image-height="imageHeight"
      :image-lazy="imageLazy"
      :title="title"
      :price-regular="priceRegular"
      :price-special="priceSpecial"
    >
      <template #details>
        <div :style="{ color: '#72757E', fontSize: '12px' }">MSD23-345-324</div>
        <SfProperty
          name="Color"
          value="White"
          :style="{ margin: 'auto 0 0 0' }"
        />
      </template>
    </SfGroupedProductItem>
  </SfGroupedProduct>
</template>
<script>
import { SfGroupedProduct } from "@storefront-ui/vue";
import { SfProperty } from "@storefront-ui/vue";
export default {
  components: {
    SfGroupedProduct,
    SfProperty,
  },
  data() {
    return {
      productQty: 1,
      settings: { type: "slider" },
      hasCarousel: false,
      image: {
        mobile: { url: "/assets/storybook/SfGroupedProduct/product-white.png" },
        desktop: {
          url: "/assets/storybook/SfGroupedProduct/product-white.png",
        },
      },
      imageWidth: 328,
      imageHeight: 448,
      imageLazy: true,
      title: "Leave white brooch",
      priceRegular: "$10,99",
      priceSpecial: "$5,09",
    };
  },
};
</script>

# Props

  • settings

    • type: object
    • defaultValue: {}
  • hasCarousel

    • type: boolean
    • defaultValue: true

# Slots

  • default
    • Slot for Grouped Product Items

# Events

None.

# CSS modifiers

  • .glide__slide--clone
  • .sf-grouped-product--without-carousel
  • .sf-grouped-product--without-quantity

# CSS custom properties (variables)

  • --grouped-product-item-display
  • --grouped-product-item-padding
  • --grouped-product-item-border
  • --grouped-product-item-border-width
  • --grouped-product-item-font
  • --grouped-product-item-font-weight
  • --grouped-product-item-font-size
  • --grouped-product-item-font-line-height
  • --grouped-product-item-font-family
  • --grouped-product-item-aside-position
  • --grouped-product-item-flex
  • --grouped-product-item-image-background
  • --grouped-product-item-quantity-selector-display
  • --grouped-product-item-quantity-selector-bottom
  • --grouped-product-item-quantity-selector-left
  • --grouped-product-item-quantity-selector-right
  • --grouped-product-item-quantity-selector-transfrom
  • --grouped-product-item-quantity-selector-margin
  • --grouped-product-item-description-margin
  • --grouped-product-item-info-margin
  • --grouped-product-item-title-margin
  • --grouped-product-item-title-font
  • --grouped-product-item-title-font-weight
  • --grouped-product-item-title-font-size
  • --grouped-product-item-title-font-line-height
  • --grouped-product-item-title-font-family
  • --grouped-product-item-price-margin

# Overridden other components CSS variables

  • --quantity-selector-height
  • --quantity-selector-background
  • --link-text-decoration

You can override CSS variables values bound to this component.

# Internal components

# GroupedProductItem

# Props

  • image

    • Product image
    • type: string|object
    • defaultValue: ""
  • imageWidth

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

    • Product image height, without unit
    • type: string|number
    • defaultValue: 448
  • imagePlaceholder

    • Product image placeholder
    • type: string
    • defaultValue: ""
  • imageLazy

    • Product image lazy loading
    • type: boolean
    • defaultValue: true
  • imagePictureBreakpoint

    • Product image picture breakpoint
    • type: number
    • defaultValue: 576
  • title

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

    • Product regular price
    • type: number|string
    • defaultValue: ""
  • priceSpecial

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

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

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

# Slots

  • image

    • Custom image markup
    • bindings: image, title, imagePlaceholder, imageLazy, imagePictureBreakpoint
  • title

    • Custom title markup
    • bindings: title
  • details

    • Custom details markup
  • configuration

    • Custom configuration markup
  • price

    • Custom price markup
    • bindings: priceSpecial, priceRegular
  • input

    • Custom input markup
    • bindings: qty

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

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