Cuttlefish Docs
  • English

    • spz-action

    When to use

    spz-action listens to internal SPZ actions and forwards the payload to one or more target actions.

    Use it when you need to decouple:

    • event producer (for example spz-product-form)
    • event consumer (for example a render or UI update component)

    Supported layout

    • logic

    Usage

    Use spz-action to subscribe to one or more internal actions and execute target actions when events are received.

    <spz-action
  action-name="productChange"
  action-scope="#product-section"
  target-action="product-info.update(data=event)">
</spz-action>

    Example

    Basic usage

    <spz-action
  action-name="productChange"
  target-action="product-info.update(data=event)">
</spz-action>

    With scope filtering

    <spz-action
  action-name="productChange"
  action-scope="#product-section"
  target-action="product-info.update(data=event)">
</spz-action>

    Multiple action names

    <spz-action
  action-name="productChange;variantChange"
  target-action="product-info.update(data=event);cart-summary.refresh()">
</spz-action>

    Attributes

    AttributeDescriptionTypeRequired
    action-nameSemicolon-separated SPZ action names to listen to. Example: productChange;variantChangestringYes
    action-scopeCSS selector used to limit where the source action event can be captured. Example: #product-sectionstringNo
    target-actionTarget action expression executed when a listened action is triggered. Example: product-info.update(data=event). If omitted, spz-action only listens and does not execute follow-up actionsstringNo

    Action expression examples

    <!-- single target -->
<spz-action target-action="product-info.update(data=event)"></spz-action>

<!-- multiple targets -->
<spz-action
  target-action="product-info.update(data=event);cart-summary.refresh()">
</spz-action>

<!-- map event fields -->
<spz-action
  target-action="quantity-input.update(value=event.quantity,max=event.max)">
</spz-action>

    Behavior

    1. During build, the component reads action-name, action-scope, and target-action.
    2. It subscribes to each action name in action-name.
    3. When an action is fired, event.detail is forwarded as the data context.
    4. target-action is executed through SPZ action service.

    End-to-end example

    <spz-product-form id="product-form-main"></spz-product-form>

<spz-action
  action-name="productChange;variantChange"
  action-scope="#product-section"
  target-action="product-display.update(data=event);price-block.update(data=event)">
</spz-action>

    Notes

    • This component itself does not expose custom actions.
    • This component itself does not emit new custom events.
    • Keep action names stable and avoid ambiguous naming across large pages.