TC Widget Callbacks
- Oleksandr Samarin
- Oleksii Pashuta
- Artem Samoilyk
Â
- 1 Usage
- 2 Event
- 3 Common events for Tire Widgets
- 4 Order form
- 5 Appointment Request Form
- 6 Widget Locator
- 7 POS Widget
- 8 Service appointment widget
- 9 Wheel Widget
- 9.1 onResultsReviseClicked
- 9.2 onTireSelect
- 9.3 onWheelSelect
- 9.4 onWheelSearchResults
- 9.5 onSummaryInitiated
- 9.6 Appointment Request Form
- 9.6.1 onAppointmentClick
- 9.6.2 onAppointmentInitiated
- 9.6.3 onAppointmentSubmitted
- 9.7 Date & time selection events
- 9.7.1 onDateFieldClicked
- 9.7.2 onDateFieldSelected
- 9.8 Order form
- 9.8.1 onOrderClick
- 9.8.2 onOrderInitiated
- 9.8.3 onOrderSubmitted
Demo page with Standard widget
Demo page with POS widget(PIN: 416905)
Demo page with Automotive Services widget
Usage
User should call method .on for TCWidget, passing an event name and a callback handler as arguments. Method can be called before and/or after the .init method. User is able to add as many callbacks as he needs.
Â
Sample of adding a callback handler:
<script>
var widget
TCWidget.init({
apikey: '[your apikey]',
container: 'content',
}).then(function(widget) {
widget.on('onOrderClick', function(event) {
log('onOrderClick', event);
event.resolve()
});
});
function log(eventId, event) {
console.log(eventId, event);
}
</script>Â
Full usage example might look like this:
<div id="content"></div>
<script>
var widget
TCWidget.init({
apikey: '[your apikey]',
container: 'content',
}).then(function(widget) {
widget.on('onOrderClick', function(event) {
log('onOrderClick', event);
event.resolve()
});
});
function log(eventId, event) {
console.log(eventId, event);
}
</script>NOTE: Some exceptions might be occasions where data is still unknown, so empty objects or fields will be provided.
Â
Event
Event object, that is passed inside every callback has a structure:
{
data: {}, // can be empty object, or contain other data
resolve: function() { ... },
reject: function() { ... },
}Â
Where data field is an immutable object possibly containing some data inside. It's read-only, and attempts to write inside it will not succeed.
resolveis a method that signals that event has succeded, and application should continue it's execution flow. It can be used to pass additional/modified data inside the application.rejectis a method that prevents usual application execution flow. Can be used to block some user-interactions or any other proceeses related to a particular event.
Effects of all those fields for particular occasions will be covered in more detail for every event below.
Â
Common events for Tire Widgets
onResultsReviseClicked
Â
Description
Gets triggered when user clicks on Revise search button or Find your tires button in breadcrumbs. Works for all widget types
Properties
Type | Effect |
|---|---|
resolvable | Search page will be opened as usual |
rejectable | Prevents page from opening |
Example
Data example (vary according to search method)
onTireSearchResults
Description
Gets triggered when user clicks on Find your Tires now and there was a search. Works for all widget types
Properties
Type | Effect |
|---|---|
resolvable | Results page will be opened as usual and user will see all matching tires |
Example
Data example (vary according to search method)
onTireSelect
Description
Gets triggered when user clicks on Select tire (See out-the-door-price) button. Works for all widget types
Properties
Type | Effect |
|---|---|
resolvable | Summary page will be opened as usual |
rejectable | Prevents page from opening |
Example
Data example
Â
Â
Order form
Pretty much all order events share the same data structure, as provided below
onOrderClick
Description
Gets triggered when user clicks on Order button, on summary page
Properties
Type | Effect |
|---|---|
rejectable | prevents page from opening |
onOrderInitiated
Description
Gets triggered when page gets initiated.
onOrder_DateClicked
Description
Gets triggered when user clicks on Order button, on summary page
Properties
Type | Effect |
|---|---|
resolvable | Opens calendar, but user can inject custom |
rejectable | Pevents calendar from opening, user also can inject custom |
Â
Example
onOrder_DateSelected
Description
Gets triggered when user clicks on Order button, on summary page
Properties
Type | Effect |
|---|---|
resolvable | User can inject custom |
Â
Example
onOrderSubmitted
Description
Gets triggered when user clicks on Order button, on summary page
Properties
None
Â
Appointment Request Form
Same as with orders, all appointment events share the same data structure, as provided below
NOTE: Some exceptions might be occasions where data is still unknown, so empty objects or fields will be provided.
onAppointmentClick
Description
Gets triggered when user clicks on Appointment button, on summary page
Properties
Type | Effect |
|---|---|
rejectable | prevents page from opening |
onAppointmentInitiated
Description
Gets triggered when page gets initiated.
onAppointment_DateClicked
Description
Gets triggered when user clicks on preferred date field on the form.
Properties
Type | Effect |
|---|---|
resolvable | Opens calendar, but user can inject custom |
rejectable | Pevents calendar from opening, user also can inject custom |
Example
onAppointment_DateSelected
Description
Gets triggered when user selected a date in preferred date field.
Properties
Type | Effect |
|---|---|
resolvable | User can inject custom |
Â
Example
onAppointmentSubmitted
Description
Gets triggered when user selected a date in preferred date field.
Properties
None
Widget Locator
onLocationChanged
Description
Gets triggered when user selects a location in wiget locator.
Properties
None
Data example
Â
POS Widget
onSummaryInitiated
Description
Gets triggered when page gets initiated.
Properties
None
Â
Data example
onSupplierOrderSubmitted
Description
Gets triggered when supplier order submitted. Works both for successful and failed order.
Properties
None
Data example
Â
Service appointment widget
Â
Full usage example might look like this:
Â
onLocationChanged
Description
Gets triggered when user select/change location.Â
Response of this event different that for other events. Please see an example of event response below.
Data example
Â
Main events
Has different response structure that onLocationChanged event. An example you can find below.
Pretty much all service events share the same data structure, as provided below
onVehicleSelected
Description
Gets triggered when user select/change Year, Make & Model of vehicle
onAppointmentServicesUpdated
Description
Gets triggered when user select/change services
onAppointmentLightsUpdated
Description
Gets triggered when user select/change My Lights are On in symptoms widget under Tell us the symptoms categoryÂ
onAppointmentSymptomsUpdated
Description
Gets triggered when user select/change My Car Symptoms in symptoms widget under Tell us the symptoms categoryÂ
onAppointmentDateSelected
Description
Gets triggered when user selected a date in preferred date/time field
onAppointmentContinue
Description
Gets triggered when user click on Continue button on services page
onAppointmentSubmitted
Description
Gets triggered when user click on Request Appointment button on summary page
Â
Wheel Widget
onResultsReviseClicked
Â
Description
Gets triggered when user clicks on Revise search button.
Properties
Type | Effect |
|---|---|
resolvable | Search page will be opened as usual |
rejectable | Prevents page from opening |
Example
Data example (vary according to search method)
onTireSelect
Description
Gets triggered when user clicks on Add to package button.
Properties
Type | Effect |
|---|---|
resolvable | Summary page will be opened as usual |
rejectable | Prevents page from opening |
Example
Data example
onWheelSelect
Description
Gets triggered when user clicks on View Details button.
Properties
Type | Effect |
|---|---|
resolvable | Summary page will be opened as usual |
rejectable | Prevents page from opening |
Example
Data example
onWheelSearchResults
Description
Gets triggered when user clicks on Find your Wheels now and there was a search.
Properties
Type | Effect |
|---|---|
resolvable | Results page will be opened as usual and user will see all matching tires |
Example
Data example
onSummaryInitiated
Description
Gets triggered when page gets initiated.
Properties
None
Â
Data example
Note: tires can be empty array in case it’s no tire in quote
Appointment Request Form
Same as with orders, all appointment events share the same data structure, as provided below
onAppointmentClick
Description
Gets triggered when user clicks on Appointment button, on summary page
Properties
Type | Effect |
|---|---|
rejectable | prevents page from opening |
onAppointmentInitiated
Description
Gets triggered when page gets initiated.
onAppointmentSubmitted
Description
Gets triggered when user submits an appointment
Properties
None
Date & time selection events
It will be same structure for Date & Time selection on Appointment and Order forms
onDateFieldClicked
Description
Gets triggered when user clicks on preferred date field on the form.
Properties
Type | Effect |
|---|---|
resolvable | Opens calendar, but user can inject custom |
rejectable | Pevents calendar from opening, user also can inject custom |
Example
onDateFieldSelected
Description
Gets triggered when user selected a date in preferred date field.
Properties
Type | Effect |
|---|---|
resolvable | User can inject custom |
Order form
Pretty much all order events share the same data structure, as provided below
onOrderClick
Description
Gets triggered when user clicks on Order button, on summary page
Properties
Type | Effect |
|---|---|
rejectable | prevents page from opening |
onOrderInitiated
Description
Gets triggered when page gets initiated.
onOrderSubmitted
Description
Gets triggered when user submits an order
Properties
None