salla-cart-coupons
A coupon section for the cart page: a text input to enter a coupon code, plus a slider of the store's available coupon cards that can be applied with one click.
A coupon section for the cart page: a text input to enter a coupon code, plus a slider of the store's available coupon cards that can be applied with one click.
It takes no props. It loads the available coupons from the store API, reads the cart total, and stays in sync with other coupon changes through the cart::updated, cart::coupon.added, cart::coupon.addition.failed and cart::coupon.deleted events.
Cards whose minimum cart amount is not met are not eligible. If the store has multiple coupons enabled (store.settings.cart.multi_coupon), several codes can be applied and applied coupons are shown in the card list marked as applied;
otherwise the input is disabled while one coupon is applied and the button turns into a remove button.
Pressing Enter in the input applies the code, the input and buttons have aria-labels, and the remove control on applied cards is labelled with the coupon code.
Fires the DOM event salla::cart-coupons.coupon.selected (bubbling, event.detail is the coupon object) after selectCoupon() applies a coupon successfully.
Use it
In HTML or JSX, use the tag <salla-cart-coupons> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaCartCoupons } from '@salla.sa/twilight-components-react/cart-coupons';Example
import { SallaCartCoupons } from '@salla.sa/twilight-components-react/cart-coupons';
export function Example() {
return (
<SallaCartCoupons />
);
}Methods
Call these on the element or a React ref.
selectCoupon(couponCode: string) => Promise<Coupon>
Applies one of the available coupons to the cart by its code, as if its card was clicked.
Throws an error if the coupon is not eligible (minimum cart amount not met) or if applying it fails.
Dispatches salla::cart-coupons.coupon.selected on success.
| Parameter | Type | Description |
|---|---|---|
couponCode | string | The code of a coupon from the loaded available coupons list. |
Returns Promise<Coupon>: A Promise that resolves to the matching coupon object, or undefined if no available coupon has that code (nothing is applied in that case).
Related
Renders: <salla-button>, <salla-slider>.