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 {
  data: IApiNavigation;
}

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

interface RequestSuccessEvent {
  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 {
  data: IApiNavigation;
}

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

interface NavigationRequestSuccessEvent {
  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:

twn.product.visible

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

type ProductVisibleEvent {
  data: IApiProduct;
  target: HTMLElement;
}

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

type ProductVisibleEvent {
  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 {
  data: IApiProduct;
  target: HTMLElement;
}

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

type ProductClickEvent {
  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 {
  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 {
  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 {
  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 {
  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');
})