# CartDiscountInput

> Promo code input with Shopify discount validation for cart profiles. Supports auto-apply and multiple codes.

Canonical URL: https://fa7e86e3d553:3005/islands/cart/cart-discount-input

> Promo code input with Shopify discount validation for cart profiles. Supports auto-apply and multiple codes.

The effective Cart V2 profile creates this module. Do not embed it in page
source.

## Preview

**Category**: Commerce (Cart Profiles)

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| placeholder | string | No | "Discount code" | Input placeholder text |
| autoApply | boolean | No | false | Auto-apply code on type (debounced) |
| showRemove | boolean | No | true | Show remove button for applied codes |

## Profile module example

```json
{
  "placeholder": "Enter offer code",
  "autoApply": false,
  "showRemove": true
}
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| cart:discount:applied | Emits | `{code: string, type: string, value: number}` when code successfully applied |
| cart:discount:removed | Emits | `{code: string}` when code is removed |

## Tips

- Validates against Shopify discount API -- invalid codes show inline error
- Applied codes display as tags/chips below the input with remove buttons
- `autoApply` debounces at 500ms to avoid excessive API calls
- Supports multiple discount codes if the Shopify store allows stacking
- Place between CartLines and CartSummary for natural flow
- Applied discounts automatically reflect in [CartSummary](/islands/cart/cart-summary) totals

## Stylable Parts

| Part | Description |
|------|-------------|
| `root` | Outermost container |
| `form` | Discount form |
| `input` | Text input field |
| `button` | Apply/submit button |
| `applied-code` | Applied discount tag/chip |
| `applied-badge` | Applied-state badge |
| `remove-btn` | Remove code button (on each tag) |
| `error` | Error message text |

```css
/* Example: minimal input with underline style */
[data-lx-cart-profile] [data-part='input'] {
  border: none;
  border-bottom: 1px solid #d1d5db;
  border-radius: 0;
  padding: 0.5rem 0;
}
[data-lx-cart-profile] [data-part='applied-code'] {
  background: #ecfdf5;
  color: #065f46;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
}
```

## Related Islands

- [DrawerShell](/islands/cart/drawer-shell) -- Parent container
- [CartSummary](/islands/cart/cart-summary) -- Reflects applied discount in totals
- [CartLines](/islands/cart/cart-lines) -- Place discount input below line items
- [CartCheckoutButton](/islands/cart/cart-checkout-button) -- Checkout with discounts applied