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:

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:

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:

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;