If the funnel is completed, the results are displayed. The way Guided Selling results are displayed is a personal preference and above all, a UX question.
By default, Suggestions JS displays the products in a grid. Using the Plugin Studio Tile Editor, the product tiles can be configured as desired.
In addition, there are more scenario's after finishing a funnel.
Frequently used options are:
- Display products (recommended)
- Redirect to a product lister page
The twn.results.open event can be used to this end. The result from the API is passed as an argument to the function.
Display products
By default, the product results are displayed in a simple grid. The product tiles can be configured using Tile Editor.
If you are not using Tile Editor, sometimes the link to a product or the product image are not working. This is configuraton on our end. Please contact support, they can help you complete the configuration.
Redirect to lister page
In some cases, it makes sense to make the user land on a lister or search page.
The navigationurl in the Response is populated by us based on the answers provided. This can be used to generate a new URL to your search/lister page with filters already applied:
tweakwiseGuidedSelling({
// ...
on: {
// ...
'twn.results.open': function (event) {
// navigationUrl = ?tn_cid=100093&tn_fk_size=Small&tn_ft=6
const pairs = event.navigationurl.replace('?', '').split('&');
// the keys & values could be mapped to the platform URL structure
const transformed = pairs.map(o => {
const split = o.split('=');
return {
key: split[0].replace('tn_', '').replace('fk_', ''),
value: split[1]
};
})
// would result in /search?cid=100093&size=Small&ft=6
const url = '/search?' + transformed.map(o => o.key + '=' + o.value).join('&');
}
}
});
Saving results
In addition, it is recommended to "save" the result so the user can return back to the results once visiting a product from the selection. This could be done in many ways, a couple of frequently used options are:
- Saving the entire response in session state
- Saving the answers in hash or querystring (recommended)
Saving the entire response in session state
function restoreTweakwiseState() {
var savedState = sessionStorage.getItem('tweakwiseState');
if (savedState) {
document.querySelector('#tweakwise-guided-selling').innerHTML = savedState;
}
}
function saveTweakwiseState() {
var currentState = document.querySelector('#tweakwise-guided-selling').innerHTML;
sessionStorage.setItem('tweakwiseState', currentState);
}
tweakwiseGuidedSelling({
// ...
on: {
// ...
'twn.results.open': function (event) {
saveTweakwiseState();
}
}
});
restoreTweakwiseState();
Saving the answers in hash or querystring (recommended)
tweakwiseGuidedSelling({
// ...
on: {
// ...
'twn.results.open': function (event) {
const mapped = results.questions.map(o => {
const selected = o.answers.find(o => o.isselected);
if(selected){
return `q${o.questionid}=${selected.answerid}`;
}
return null;
}).filter(o => o != null);
// send user to correct location
location.hash = 'twn-gs:' + mapped.join('&');
}
}
});
if(location.hash.indexOf('twn-gs:') != -1)
{
// select questions using click triggers
}
Need more control? Consider integrating Guided Selling using API.