Search & Merchandising JS supports a couple of events to hook into the specific moments.

Search Lifecycle events

General

For full API response, see Search API structure.

twn.request.started

Request to fetch search results started.

twn.request.success

Request to fetch search results succeeded.

interface RequestSuccessEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiNavigation;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.request.success': function (event: RequestSuccessEvent) {
      // do something
    }
	}
})

interface RequestSuccessEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiNavigation;
}

window["twn-starter-config"].on = {
  // ...
  'twn.request.success': function (event: RequestSuccessEvent) {
  	// do something
  }
});

Examples:

Realtime pricing

twn.request.failed

Request to fetch search results failed.

twn.request.completed

Request to fetch search results completed. This executes for both success and failed requests.

twn.container.open

Search results container is opened.

twn.container.close

Search results container is closed.

Navigation Lifecycle events

Note: these event only works with window["twn-starter-config"].auto = true;

twn.request.navigation.started

Request to fetch navigation results started.

interface NavigationRequestSuccessEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiNavigation;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.request.navigation.success': function (event: NavigationRequestSuccessEvent) {
      
      const products = event.data.items.map(o => o.itemno);
			// do something
      
    }
	}
})

interface NavigationRequestSuccessEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiNavigation;
}

window["twn-starter-config"].on = {
  // ...
  'twn.request.navigation.success': function (event: NavigationRequestSuccessEvent) {
    
		const products = event.data.items.map(o => o.itemno);
    // do something

  }
});

twn.request.navigation.success

Request to fetch navigation results succeeded.

twn.request.navigation.failed

Request to fetch navigation results failed.

twn.request.navigation.completed

Request to fetch navigation results completed. This executes for both success and failed requests.

twn.container.navigation.open

Navigation results container is opened.

twn.container.navigation.close

Navigationresults container is closed.

Functional events

twn.selection.change

Selection in search hash changed.
For example when a filter is added, removed or changed.

twn.selection.navigation.change

Selection in navigation hash changed.
For example when a filter is added, removed or changed.

Product specific events

After default results are displayed, these regular product events can be used.

Detailed examples:

Push a product to Google Tag Manager when it is visible.
Push a product to Google Tag Manager when it is clicked

twn.product.visible

Product tile is visible on the screen (at least 50%).

type ProductVisibleEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  target: HTMLElement;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.product.visible': function (event: ProductVisibleEvent) {
      const item = event.data;
      // do something
    }
	}
})

type ProductVisibleEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  target: HTMLElement;
}

window["twn-starter-config"].on = {
  // ...
  'twn.product.visible': function (event: ProductVisibleEvent) {
  	const item = event.data;
    // do something
  }
});

For a detailed example, see Push a product to Google Tag Manager when it is visible.

twn.product.click

A link on a product tile has been hit.

type ProductClickEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  target: HTMLElement;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.product.click': function (event: ProductClickEvent) {
      const item = event.data;
      // do something
    }
	}
})

type ProductClickEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  target: HTMLElement;
}

window["twn-starter-config"].on = {
  // ...
  'twn.product.click': function (event: ProductClickEvent) {
  	const item = event.data;
    // do something
  }
});

For a detailed example, see Push a product to Google Tag Manager when it is clicked

twn.add-to-cart

Add to cart button is clicked.

type AddToCartEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  quantity: number;
  target: HTMLElement;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.add-to-cart': function (event: AddToCartEvent) {
      const item = event.data;
      // add item to cart
    }
	}
})

type AddToCartEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  quantity: number;
  target: HTMLElement;
}

window["twn-starter-config"].on = {
  // ...
  'twn.add-to-cart': function (event: AddToCartEvent) {
  	const item = event.data;
    // add item to cart
  }
});

For detailed example, see Add to cart.

twn.add-to-favorites

Add to favorites button is clicked.

type AddToFavoritesEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  quantity: number;
  target: HTMLElement;
}

tweakwiseListerPage({
  // ...
	on: {
    'twn.add-to-favorites': function (event: AddToFavoritesEvent) {
      const item = event.data;
      // add item to cart
    }
	}
})

type AddToFavoritesEvent {
  // see https://docs.tweakwise.com/reference/tweakwise-js-typescript for full object typings
  data: IApiProduct;
  target: HTMLElement;
}

window["twn-starter-config"].on = {
  // ...
  'twn.add-to-favorites': function (event: AddToFavoritesEvent) {
  	const item = event.data;
    // add item to favorites/wishlist
  }
});

For detailed example, see Add to favorites.

Window bubbling

Every event is also dispatched to the window object. In code, you can listen safely via the pattern: window.addEventListener('twn.<hook>.event', (event) => { ... })

tweakwiseListerPage({
  // ...
  on: {
    'twn.add-to-cart': function (event) {
      console.log('do something on add to cart');
  }
})
 
// also possible

window.addEventListener('twn.add-to-cart.event', function(event){   
	console.log('do something else on add to cart');
})