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,
    hashChangeEnableTimer;
   
function changePage(event) {
  if (onHashChangeDisabled) {
    return;
  }
   
  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 + location.search}).prependTo($head);
    }
   
    originalState.results = originalState.results || $('#main');
   
    /* Search. */
    showBrmSearch();
  } else {
    hideBrmSearch();
    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) {
    return;
  }
// 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;
  changePage(event);
   
  // 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.
   */
  brmSearchContainer.one('brm-rendered', function(event) {
    var resultsContainer = $('#brm-results');
   
    resultsContainer.insertBefore(originalState.results);
    originalState.results.hide();
  });
   
  /* Call the search plug-in.  The 'search' method performs a search based on the location in the address bar. */
  brmSearchContainer.brm_search('search');
}

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) {
    location.reload();
  }
}

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() {
    $(window).triggerHandler('popstate');
    // 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);
  });
}