spz-coupon-code#

#When to use

spz-coupon-code provides a full coupon code workflow — input, apply, display active / expired codes, recommend available codes, and copy to clipboard.

#Supported layout

• container

#Example

<spz-coupon-code id="coupon" layout="container" cart-id="cart">
  <input role="input" placeholder="Enter coupon code" />
  <button role="apply">Apply</button>
  <button role="clear">Clear invalid</button>
  <spz-render role="recommend" layout="container" src="...">
    <template><!-- recommend list --></template>
  </spz-render>
  <div role="applied"><!-- applied codes --></div>
  <div role="unavailable"><!-- expired codes --></div>
  <div role="result"><!-- result message --></div>
</spz-coupon-code>

#Attributes

#DOM role convention

The component locates child elements by their role attribute:

#Status attributes

These boolean attributes are automatically set on the component element to reflect state:

#Actions

#cancel

Cancel (remove) an applied coupon code.

Parameters:

• code (string): The code to cancel

Example:

<button @tap="coupon.cancel(code='SAVE10')">Remove SAVE10</button>

#clear

Clear all expired or unavailable codes from the list.

#copy

Copy a coupon code to the clipboard. If auto-apply is enabled, also applies the code automatically.

Parameters:

• code (string): The code to copy

#setDiscountId

Cache the current discount ID for later reference.

#Events

#Public API

#Notes

• The component fetches its configuration from the backend on build; if the coupon feature is disabled, the component will not render.
• Auto-apply behavior (copy → apply) depends on the backend auto_apply_switch configuration.
• The component listens to cart change events and automatically re-validates applied codes.