# GroupedProduct

Grouped Product component

# Most common usage scenario

<template>
  <div style="max-width: 509px">
    <SfGroupedProduct :settings="settings">
      <SfGroupedProductItem
        v-model="productQty"
        :image="image"
        :image-width="imageWidth"
        :image-height="imageHeight"
        :title="title"
        :price-special="priceSpecial"
        :price-regular="priceRegular"
        :qty-min="qtyMin"
      >
        <template #details>
          <div style="color: #a3a5ad">MSD23-345-324</div>
        </template>
        <template #configuration>
          <div style="margin-left: auto;">
            <div v-for="(attribute, key) in attributes" :key="key">
              {{ attribute.value }}
            </div>
          </div>
        </template>
      </SfGroupedProductItem>
    </SfGroupedProduct>
  </div>
</template>

<script>
import { SfGroupedProduct } from "@storefront-ui/vue";

export default {
  components: {
    SfGroupedProduct
  },
  data() {
    return {
      productQty: 1,
      settings: { type: "slider" },
      image: "/assets/storybook/SfGroupedProduct/product-white.png",
      imageWidth: 246,
      imageHeight: 336,
      title: "Leave white brooch",
      priceSpecial: "",
      priceRegular: "$10,99",
      qtyMin: 1,
      attributes: [{ name: "color", value: "White" }]
    };
  }
};
</script>

# Props

  • settings
    • type: object
    • defaultValue: {}

# Slots

  • default
    • Slot for Grouped Product Items

# Events

None.

# CSS modifiers

  • .glide__slide--clone

# SCSS variables

$grouped-product-max-width: 7.8125rem !default;
$grouped-product-max-width-desktop: 5.125rem !default;
$grouped-product-font-family: $body-font-family-secondary !default;
$grouped-product-font-size: $font-size-regular-mobile !default;
$grouped-product-font-size-desktop: $font-size-extra-small-desktop !default;
$grouped-product-font-weight: $body-font-weight-secondary !default;
$grouped-product-line-height: 1.6 !default;
$grouped-product__select-quantity-width: 3.125rem !default;
$grouped-product__select-quantity-height: 1.875rem !default;
$grouped-product-item__image-background-color: $c-light !default;

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

# Internal components

# GroupedProductItem

# Props

  • image

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

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

    • Product image height, without unit
    • type: string|number
    • defaultValue: 336
  • 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
  • qtyMin

    • Minimum product quantity
    • type: number
    • defaultValue: 1

# Slots

  • image

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

    • Custom input markup
    • bindings: qty
  • title

    • Custom title markup
    • bindings: title
  • details

    • Custom details markup
  • configuration

    • Custom configuration markup
  • price

    • Custom price markup
    • bindings: priceSpecial, priceRegular

# Events

None.

# CSS modifiers

None.

# SCSS variables

None.

# 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/SfGroupedProduct/SfGroupedProduct.html"></template>
<script src="@storefront-ui/vue/src/components/organisms/SfGroupedProduct/SfGroupedProduct.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfGroupedProduct.scss";
</style>

You can read about using component partials here

# Play with this component

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