Developers Guide
In the following small documentation you will find helpful events which we fire to give you the ability for some extensions of our application. You can also place the application wherever you want with the following hooks.
DOM Hooks
- paste the following code snippet before/after the appropriated element to display the discount input:
<div class="discountz-widget-container"></div>
- repeat the steps for the element which represents your cart’s total price and add the following class to it:
discountz-subtotal
- Make sure you add class to the element, which holds the total price value.
Example for a subtotal calculation:
<span class="discountz-subtotal">{{ cart.total_price }}</span>
Styling
- discount element container class:
discountz-widget-container
- discount input element class:
discountz-widget__input
- discount submit element class:
discountz-widget__submit
Storefront Events
Discountz Widget
emits several events on window
object with discountz
event name.
Usage example:
window.addEventListener('discountz', (event) => {
if (!(event instanceof CustomEvent)) return;
switch (event.detail.type) {
case 'discount-cleared':
// handle Discount Cleared event
break;
case 'discount-submitted':
// handle Discount Submitted event
break;
case 'discount-evaluated':
// handle Discount Evaluated event
break;
}
});
Discount Cleared
Discount Cleared
event is fired when customer clears Discountz Widget
input after Discount Code has been evaluated.
Payload includes:
- Shopify Cart object
- Discount Code that was cleared
type DiscountClearedEvent = {
type: 'discount-cleared';
payload: {
cart: ShopifyCart;
discountCode: string;
};
};
Discount Submitted
Discount Submitted
event is fired when customer submits Discount Code for evaluation in Discountz Widget
.
Payload includes:
- Shopify Cart object
- Discount Code that was submitted
type DiscountSubmittedEvent = {
type: 'discount-submitted';
payload: {
cart: ShopifyCart;
discountCode: string;
};
};
Discount Evaluated
Discount Evaluated
event is fired when Discountz Widget
receives response from the backend after evaluating Discount Code.
Payload includes:
- Shopify Cart object
- Discount Code that was evaluated
- Discount Evaluation result
type DiscountEvaluatedEvent = {
type: 'discount-evaluated';
payload: DiscountEvaluationSuccess | DiscountEvaluationFail;
};
export type DiscountEvaluationSuccess = {
valid: true;
discount: number;
subtotal: number;
cart: ShopifyCart;
discountCode: string;
};
export type DiscountEvaluationFail = {
valid: false;
code: DiscountValidationCode;
data: DiscountValidationData;
cart: ShopifyCart;
discountCode: string;
};
enum DiscountValidationCode {
APP_DISABLED,
CART_EMPTY,
CUSTOMER_NOT_ELIGIBLE,
CUSTOMER_NOT_LOGGED_IN,
INVALID_TYPE,
MIN_QUANTITY,
MIN_SUBTOTAL,
NOT_ACTIVE,
NOT_FOUND_LIKE_GIFT_CARD,
NO_ELIGIBLE_PRODUCTS,
SUBSCRIPTION_LIMIT,
USED,
}
// additional information, related to the discount validation error
type DiscountValidationData = object;