# salla-order-edit-item (https://docs.salla.dev/twilight/react/web-components/salla-order-edit-item)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

<Callout title="Used inside salla-order-edit">
  [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit) renders this component for you. You rarely use it directly.
</Callout>

One editable item of an order: product image, name, price, a quantity input, the product options
(when the product has any) and a remove button. Used inside salla-order-edit, which renders one for
each order item and listens to its events; a theme rarely places it directly.

The remove button is a `salla-button` with an `aria-label`.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-order-edit-item>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaOrderEditItem } from '@salla.sa/twilight-components-react/order-edit-item';
```

## Example [#example]

```tsx
import { useEffect } from 'react';
import { SallaOrderEditItem } from '@salla.sa/twilight-components-react/order-edit-item';

export function Example() {
  useEffect(() => {
    document.getElementById('item').item = {
      id: 1,
      quantity: 2,
      product: { id: 10, name: 'T-shirt', price: 120, image: { url: '/t.jpg' } },
    };
  }, []);

  return (
    <SallaOrderEditItem id="item" />
  );
}
```

```html
<salla-order-edit-item id="item"></salla-order-edit-item>
<script>
  document.getElementById('item').item = {
    id: 1,
    quantity: 2,
    product: { id: 10, name: 'T-shirt', price: 120, image: { url: '/t.jpg' } },
  };
</script>
```

## Properties [#properties]

| Property  | Attribute  | Description                                                                                                                                                                                                    | Type               | Default |
| --------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- |
| `item`    | `item`     | The order item to edit: `{ id, quantity, name?, product }` where `product` has `id`, `name`, `price`, `image`, `url`, `options`, `weight_label` and `max_quantity_per_order`. Set it as a JavaScript property. | `OrderEditItem`    |         |
| `orderId` | `order-id` | Parent order ID (for API calls) **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version.                                                                  | `number \| string` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event              | Description                                                                                                                                                                                                                        | Detail                                                                                                              |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `orderItemRemoved` | Emitted when the remove button is clicked. `event.detail` is `{ itemId }`. The component does not remove itself; the parent decides. The event bubbles and is composed.                                                            | `{ itemId: string \| number; }`                                                                                     |
| `orderItemUpdated` | Emitted when the quantity or the selected options change. `event.detail` is `{ itemId, quantity }`, plus `options` (the selected options) and `optionDefinitions` when the product has options. The event bubbles and is composed. | `{ itemId: string \| number; quantity: number; options?: OrderEditSelectedOptions; optionDefinitions?: Option[]; }` |

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-quantity-input>`](https://docs.salla.dev/twilight/react/web-components/salla-quantity-input), [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options).

Used inside: [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit).