Mixed Layout

This demo shows some result groups as a grid and the rest as a list, with the result group tabs on the left. Search for chocolate, then open the Recipes and Articles tabs to compare. View the ss360Config to check the configuration.

• type: 'mixed' combines both layouts. gridContentGroups lists the result groups shown as a grid, here Recipes and Grocery Products. All other groups are shown as a list.
• layout.navigation.position places the result group tabs 'top' (default), 'left', or hides them with 'none'.

See Layout for all layout options and Result Groups for setting up groups.

window.ss360Config = {
   siteId: 'spoonacular.com', /* Replace with your site id */
   searchBox: {
      selector: '#searchBox' /* 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 */
      }
   },
   layout: {
      mobile: {
         type: 'mixed',
         gridContentGroups: ['Recipes', 'Grocery Products']
      },
      desktop: {
         type: 'mixed',
         gridContentGroups: ['Recipes', 'Grocery Products']
      },
      navigation: {
         position: 'left'
      }
   }
};

{"siteId":"spoonacular.com","searchBox":{"selector":"#searchBox"},"results":{"embedConfig":{"contentBlock":".example__page-content-block"}},"layout":{"mobile":{"type":"mixed","gridContentGroups":["Recipes","Grocery Products"]},"desktop":{"type":"mixed","gridContentGroups":["Recipes","Grocery Products"]},"navigation":{"position":"left"}}}