Hooks allow you to add your own logic to modify/change data flow. For example, you can register a hook to add note, change quantity... when people add items to cart.

Syntax

Hook can be registered from theme context:

{
  created() {

    // Register a hook
    // The first argument is "hook name"
    // The second argument is your defined callback name (string)
    // The last argument is a callback function, which will receive only one param (usually an object) and MUST return it later
    this.$hook.register('add-to-cart', 'my-example-hook', data => {

      // Add note
      data.note = 'test...';

      // Return data
      return data;
    });
  }
}

Hook can also be registered in global context:

<script>
document.addEventListener('DOMContentLoaded', e => {
  
  window.$hiweb.hook.register('add-to-cart', 'test-hook-global-context', data => {

    // Add note
    data.note = 'abcd1234';

    // Change quantity
    data.quantity += 2;

    // Return data
    return data;

  });

});
</script>

Available hooks

Below is the list of available hooks

Hook name	Callback param
add-to-cart	An object of 3 elements: variantId, quantity and note