Customize results

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.

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.