Sometimes it's important to segment end users before presenting the locator. A common example is between commercial and consumer audiences. The Interstitial Search container is designed to collect inputs from the visitor which are required before the locator is shown.
As shown below, a single category dropdown has been added to the Interstitial container:
When the input is marked as Required, it is used to determine whether the locator should be shown.
Once all required inputs in the Interstitial Container are complete, the locator is displayed as usual:
Multiple inputs can be added to the interstitial in this way. If they are marked as required, they will collectively control whether the locator should be shown.
Triggering a Search
The Interstitial logic simply controls the display of the locator, e.g. whether it is shown or hidden. To trigger a search action based on the user's interstitial choices, use the Live Search option found under Results > Live Search. Live Search causes searches to be performed instantly based on a user's input selections.
Advanced Topics
Changing Options based on Interstitial Choices
Since the Interstitial is used to segment audiences, sometimes the search and display requirements of those audiences can vary. There are a few options to consider:
Showing and hiding UI elements using CSS: When categories are chosen, MetaLocator sets classes on the
main.metalocatorcontainer. These can be leveraged to show or hide certain elements in the search form or results display using custom CSS. As shown below, the user has selected residential and the main.metalocator element was given a class of ml_selected_tag_200, which is a special class based on the ID of the Residential category.
This can be leveraged to show or hide elements. For example, to hide the following Custom CSS would hide the zip code search:
.ml_selected_tag_200 .form-group.postal{
display:none;
}Changing Interface Settings: In the example above, if the user chose Residential or Commercial a requirement might arise to enable or disable certain interface settings based on that choice. Common examples are enabling Territory search, or displaying a Buy Online option based on the user selection. For this type of search, modification of the Interstitial search input's Field Templates is required in order to leverage Dynamic Options. This requires HTML, Javascript and CSS skill and will require the support of a Web developer. To set options dynamically, the Interface must be reloaded based on the user's choices with the special _urlparams URL Parameter option set to a JSON-encoded object with the desired settings changes.
jqLocator(document).ready(function() {
var MetaLocatorOptionOverrides = {};
jqLocator('.ml_interstitial select[name="tags[]"]').on('change', function() {
if (jqLocator(this).val() != '') {
// Residential is category id 200
if (jqLocator(this).val() == '200') {
//Residential's primary color should be teal
MetaLocatorOptionOverrides['theme_color_primary'] = '#20af9b';
var newUrl = window.location.href;
//replace the new color
newUrl = replaceUrlParam(newUrl, '_urlparams', encodeURIComponent(JSON.stringify(MetaLocatorOptionOverrides)));
// ensure we preserve the user's category selection
newUrl = replaceUrlParam(newUrl, 'tags[]', jqLocator(this).val());
//reload the locator with the new option
window.location.href = newUrl;
}
}
});
});
Creating Multiple Interfaces: If the requirements for each audience vary widely or the options above require more technical capacity than available, creating the Interstitial choices on your Website may be a desirable option. In that case, the Interstitial contents would be created as required on the host Website by your Web team and the locators would be displayed simply by installing multiple locators on separate pages of the host website and linking to them as needed.
Deep Linking
Deep Linking can be used to set the interstitial input values and therefore create links which pre-select the Interstitial values. In the example above, if the locator was installed on a page called "locator.html", a deep link to "locator.html?ml___task=search_zip&ml___tags[]=200" would pre-select the Residential category and, since that would satisfy the "required" condition of the Interstitial container described above, the locator would also be displayed.
The special "ml_skip_interstitial" parameter can be used to skip the interstitial easily, as opposed to providing a value for each input in the interstitial. This is useful when there are duplicative values in the interstitial and the search form. When deep linking from an installation page, this would be ml___ml_skip_interstitial=1