Multiple search boxes

This page shows how to use more than one search box on the same page. Each search box can return results from specific content groups, depending on how it’s configured.

You can check the configuration in the zSearchConfig.

How multiple search boxes work

Each search box uses the data-zoovu-include attribute to define which content groups it should search in.

• An empty array [] means the search box includes all content groups.
• A specific value like ['Tools'] limits results to only that group.

This is how you can offer targeted searches in different areas of your site.

To see how each search box is configured, open your browser’s developer tools and inspect the HTML of the demo page.

Example

Try searching for "power drill":

• The left search box uses data-zoovu-include="[]". It searches across all content groups and may return products, articles, or help content.
• The right search box uses data-zoovu-include="['Tools']". It returns only tool-related results, such as “Bosch Cordless Power Drill.”

Example

Try searching for "power drill":

• The left search box searches across all content groups and may return results like product listings or support articles related to power drills.
• The right search box is limited to the "Tools" content group and returns only products labeled as tools, e.g. “Bosch Cordless Power Drill.”

window.zSearchConfig = {
    siteId: 'spoonacular.com', /* Replace with your site id */
   searchBox: {
      selector: '.ss360-search-box' /* Replace with the css selector of your search box */
   },
   results: {
      embedConfig: {
         contentBlock: '.example__page-content-block'  /* Replace with the css selector of the DOM element you want to use */
      }
   }
};

{"siteId":"spoonacular.com","searchBox":{"selector":".ss360-search-box"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}}}