# AddToCart

Add-to-cart button and quantity input field with maximum stock validation.

# Most common usage scenario

<template>
  <div style="max-width: 21.25rem;">
    <SfAddToCart v-model="qty" :disabled="disabled" @click="() => {}" />
  </div>
</template>
<script>
import { SfAddToCart } from "@storefront-ui/vue";
export default {
  components: {
    SfAddToCart,
  },
  data() {
    return {
      qty: 1,
      disabled: false,
    };
  },
};
</script>

# Props

  • disabled

    • Boolean to indicate whether product. can be added to cart
    • type: boolean
    • defaultValue: false
  • qty

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

# Slots

  • quantity-select-input

    • bindings: qty
  • add-to-cart-btn

# Events

None.

# CSS modifiers

None.

# CSS custom properties (variables)

  • --add-to-cart-select-quantity-margin

# Overridden other components CSS variables

  • --button-font
  • --font-semibold
  • --button-width
  • --add-to-cart-select-quantity-display

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.