Configuring your site's user experience - Bloomreach Experience - Headless Digital Experience Platform

Configuring your site's user experience

The functionality in this page's use cases improve the user experience of your client-side integration. We encourage you to implement all of these use cases.

Storing the original page state

This code sample stores the original state of the page before users run a search. After the search results are displayed, users can press their brower's back button to return to the original state of the page.

Store original page state for restoration

var originalState = {};

Customizing HTML page transition

This code sample customizes the HTML5 page transition. Use it to take a snapshot of the original search page before the replaceState function changes it.

Customizing HTML page transition for search

/* Custom HTML5 page transition for Bloomreach Search */
var onHashChangeDisabled = false,
    onPopStateDisabled = false,
    hashChangeTimeout = 200,
function changePage(event) {
  if (onHashChangeDisabled) {
  if (location.hash.indexOf('brm-search') === 1) {
    /* Store the baseURI of the document before we change it with replaceState */
    var $head = $('head'),
        $base = $head.children('base');
    if (!$base.length) {
      $('<base>', {href: location.pathname +}).prependTo($head);
    originalState.results = originalState.results || $('#main');
    /* Search. */
  } else {
    originalState = {};
$(window).on('hashchange', changePage);

Configuring back and forward buttons

This code sample configures how to render results when users click the back and forward buttons on their browsers.

Configure back and forward buttons

$(window).on('popstate', function(event) {
  if (onPopStateDisabled) {
// if we get two pop states in under hashChangeTimeout
  // make sure to clear any timer set for the previous change
  clearTimeout( hashChangeEnableTimer );
  // make sure to enable hash handling for the changePage call
  onHashChangeDisabled = false;
  // prevent any hashchange in the next hashChangeTimeout
  onHashChangeDisabled = true;
  // re-enable hashchange handling after swallowing a possible hashchange
  // event that comes on all popstates courtesy of browsers like Android
  hashChangeEnableTimer = setTimeout(function() {
    onHashChangeDisabled = false;
  }, hashChangeTimeout);


Searching with URLs

This code sample configures the Bloomreach search plugin to do a URL-based search and display the results.

URL-Based Search

function showBrmSearch() {
   * When the results have been rendered:
   * - Show the plug-in's rendered results.
   * - Hide the original results.
   */'brm-rendered', function(event) {
    var resultsContainer = $('#brm-results');
  /* Call the search plug-in.  The 'search' method performs a search based on the location in the address bar. */


Restoring the page

This code sample restores the page to its original state before the search plugin modified the page.

Restore the original state

/* Restore the page back to what it was before the search plug-in modified it. */
function hideBrmSearch() {
  var resultsContainer = $('#brm-results');
  if (originalState.results) {


Searching from a Bloomreach Commerce Search URL

This code sample allows users to start a search from a Bloomreach Commerce Search URL. 

Search from a Commerce Search URL

 * This block of code runs once if the visitor lands on a Bloomreach Commerce Search URL.
 * - Trigger a popstate event to kick off the search.
if (location.hash.indexOf('brm-search') === 1) {
  $(document).ready(function() {
    // Chrome fires an extraneous popstate on page load.  Squash it before it triggers a duplicate search.
    setTimeout(function() {onPopStateDisabled = true;}, 0);
  $(window).on('load', function() {
    setTimeout(function() {
      onPopStateDisabled = false;
    }, hashChangeTimeout);
Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?