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); }); }