Twilight
EngineWeb components

salla-order-edit-item

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

<salla-order-edit> renders this component for you. You rarely use it directly.

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

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).

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

Example

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" />
  );
}

Properties

PropertyAttributeDescriptionTypeDefault
itemitemThe 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
orderIdorder-idParent 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

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

EventDescriptionDetail
orderItemRemovedEmitted 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; }
orderItemUpdatedEmitted 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[]; }

Renders: <salla-button>, <salla-quantity-input>, <salla-product-options>.

Used inside: <salla-order-edit>.

On this page

Use itExamplePropertiesEventsRelated