Hiweb Developers

# Listen to an event

Property $event is injected to all components by default.

<!-- Your component -->
<template>
  <div>

  </div>
</template>

<script>
export default {

  created() {

    // Listen to an event
    this.$event.$on('event-name', eventPayload => {

      // Your logic here...

    })

  }
}
</script>

It's also possible to listen to an event from global context via window.$hiweb.event object, this is useful in case you're writing custom Codes

<html>
  <head>

    <!-- Example -->
    <script>
    document.addEventListener('DOMContentLoaded', e => {

      // Listen to cart-loaded event
      window.$hiweb.event.$on('cart-loaded', cartDocument => {
        alert('Cart loaded, total price: ' + cartDocument.getData().getAttribute('total_price'));
      });
        
    });
    </script>

  </head>
  <body>
    <!-- ... -->
  </body>
</html>

# Event list

Below is the list of all events:

# Post events

Event name Payload Description
view-post postDocument Trigger when post data is loaded
view-posts postsDocument Trigger when posts are loaded

# Page events

Event name Payload Description
view-page pageDocument Trigger when page data is loaded
view-pages pagesDocument Trigger when pages are loaded

# Product events

Event name Payload Description
view-product productDocument Trigger when product data is loaded
view-products productsDocument Trigger when products are loaded

# Collection events

Event name Payload Description
view-collection collectionDocument Trigger when collection data is loaded
view-collection-products productsDocument Trigger when collection products are loaded
view-collections collectionsDocument Trigger when collections are loaded

# Cart events

Event name Payload Description
cart-loaded cartDocument Trigger when cart is loaded
cart-item-created cartItemDocument Trigger when a cart item is created / updated
cart-item-create-failed Exception object Trigger when failed to create cart item
cart-item-deleted cartItemResource Trigger when an item is removed from cart
delete-cart-item-failed Exception object Trigger when failed to remove item from cart
discount-applied cartDocument Trigger when a discount is applied successfully
apply-discount-failed Exception object Trigger when failed to apply discount
discount-removed cartDocument Trigger when a discount is removed
remove-discount-failed Exception object trigger when failed to remove discount from cart

# Checkout events

Event name Payload Description
view-checkout cartDocument Trigger when checkout page is loaded
shippings-loaded shippingsDocument Trigger when shippings are loaded
payment-gateways-loaded paymentGatewaysDocument Trigger when payment gateways are loaded
address-saved addressDocument Trigger when an address is saved successfully
save-address-failed Exception object Trigger if failed to save address
invoice-loaded invoiceDocument Trigger when invoice is loaded
invoice-saved invoiceDocument Trigger when invoice is saved/updated successfully
save-invoice-failed Exception object Trigger when failed to save invoice
init-invoice-payment paymentGatewayDocument Trigger when a payment request for an invoice is initialized
payment-successful invoiceDocument Trigger on thank you page (payment successful)

← Hooks →