Guided Selling JS supports a couple of events to hook into the specific moments in the funnel.

Lifecycle events

twn.request.started

Request to fetch Guided Selling started.

tweakwiseGuidedSelling({
  // ...
  on: {
    // ...
    'twn.request.started': function (event) {
    	// handle event
    }
  }
});

twn.request.success

Request to fetch guided selling succeeded.

twn.request.failed

Request to fetch guided selling failed.

twn.request.completed

Request to fetch guided selling completed. This executes for both success and failed requests.

Functional events

twn.question.open

Fired when a question is displayed.

 // see types tab
interface QuestionOpenEvent { 
  question: IApiFilterwizardQuestion;
  data: IApiFilterwizard;
}

tweakwiseGuidedSelling({
  // ...
  on: {
    // ...
    'twn.question.open': function (event: QuestionOpenEvent) {
    	// handle event
    }
  }
});

interface IApiFilterwizard {
    code?: string;
    name?: string;
    count?: number;
    navigationurl?: string;
    filtertemplateid?: number;
    questions?: IApiFilterwizardQuestion[];
    items?: IApiProduct[];
}

interface IApiFilterwizardQuestion {
    questionid?: number;
    question?: string;
    explanation?: string;
    ismultiselect?: boolean;
    imageurl?: string;
    current?: boolean;
    skippable?: boolean;
    skiplabel?: string;
    answers?: IApiFilterwizardAnswer[];
}

interface IApiFilterwizardAnswer {
    answerid?: number;
    answer?: string;
    caption?: string;
    summary?: string;
    imageurl?: string;
    count?: number;
    isselected?: boolean;
    nextquestionid?: number;
}

twn.results.open

Fired when the funnel is considered complete. Can be used to hook into the display of results.
The first event parameter is the data that is returned from the api.

tweakwiseGuidedSelling({
  // ...
  on: {
    // ...
    'twn.results.open': function (event) {
    	// handle event
    }
  }
});

For detailed examples how to use this, See Customize results.

Product specific events

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

Event Name	Description
twn.add-to-cart	Add to cart button was clicked
twn.add-to-favorites	Add to favorites button was clicked
twn.product.visible	Product tile is visible on a screen
twn.product.click	A link on a product tile has been clicked

For detailed examples, see Product specific events on Search & Merchandising.

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) => { ... })

tweakwiseGuidedSelling({
  // ...
	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');
})