Cuttlefish Docs
  • English

    • spz-order-actions

    Supported layouts: container

    When to Use

    When you need to add items to an order, pay now, repurchase, cancel, and delete an order, typically used on the order list page.

    Code Demonstration

    Basic Usage

    Buttons performing various actions need to be configured with the corresponding role attribute value to empower the current button with the corresponding capabilities, supporting the following behaviors:

    ValueDescription
    pay_orderClick the button to jump to the checkout page
    repay_orderClick the button to request an interface to determine if it can jump to the checkout page; if not, refresh the current page
    add_to_cartClick the button, all products under the current order are added to the shopping cart
    delete_orderClick the button to open a warning dialog for deleting the current order; if the confirm button in the dialog is clicked, delete the current order
    cancel_orderClick the button to open a warning dialog for cancelling the current order; if the confirm button in the dialog is clicked, cancel the current order
    <spz-order-actions layout="container" order-id="xxx" data-source-id="xxx">
  <template>
    <div>
      <button role="add_to_cart">Add to cart</button>
      <button role="pay_order">Pay now</button>
      <button role="repay_order">Pay again</button>
      <button role="delete_order">Delete</button>
      <button role="cancel_order">Cancel</button>
    </div>
  </template>
</spz-order-actions>

    Properties

    Property NameDescriptionTypeDefault ValueRequired
    order-idOrder IDstring-Yes
    data-source-idData source ID, only supports the element ID of spz-render and spz-liststring-Yes
    
## AI Summary (LLM Ready)

- **Component ID**: `spz-order-actions`
- **One-line purpose**: Empower actions like adding items to an order, repurchasing, etc.
- **Detected attribute rows**: 0
- **Detected method subsections**: 0
- **Detected event subsections**: 0
- **Top attribute names**: none (needs manual completion)
- **Top method names**: none (needs manual completion)
- **Top event names**: none (needs manual completion)
- **Reading order**: start from usage/examples, then verify attributes, methods, and events.
- **Related docs**: [/en/guide/actions-and-events/](/en/guide/actions-and-events/) , [/en/guide/layouts/](/en/guide/layouts/)