Category Navigation with Embedded V7 Layers

Introduction

The purpose of this article is to provide some guidelines to integrate an Embedded V7 layer, so it can replace category navigation on a site.

For a successful implementation, the following must be taken into account:

• The layer must be autoloaded, so it’s opened without explicit user interaction apart from the obvious site navigation to access the category URL.
• The layer must display proper results for the category.

Let’s dive into them.

Embedded Layer Autoloading

How do we know when the layer must be displayed? How do we know we are in a category page? That kind of information depends on the website’s implementation:

• Some sites may have well-known category URLs, like in /category/whatever.
• Others may populate some kind of hidden field with the category name.
• etc;

There’s no fixed rule, so the person in charge of the integration must analyze each particular case separately.

Once you know how to obtain the category name, you have to launch the layer and make it display the right data for the current context .

To do so you can use the loaded() callback function:

 callbacks: {
    loaded: function(instance) {
       const category = getCategoryFromPageContext(); 
       if (typeof category !== 'undefined') {
       // launch the layer here
     } 
   }
  }
}

Display proper results for the category

Basically this implies performing a search and the implementation can use different approaches, mainly two:

• Filter by category
• Custom results

Filter by category

This is the fastest approach: the layer is invoked with an empty query and filtered by the category name.

 callbacks: {
       loaded: function(instance) {
         const category = getCategoryFromPageContext(); 
         if (typeof category !== 'undefined') {
         // launch the layer here
        instance.layer.launch(null, {
         filter: {
           categories: [category]
         },
         query_name: "match_all"
       })
      } 
    }
  } 
}

In this approach the category may appear mixed with the rest of categories if the categories field is added to the displayed facets.

Custom Results

Instead of providing the category as a filter, it can be provided as the search query. Combined with a custom result, it gives great control over the search results.

   callbacks: {
       loaded: function(instance) {
         const category = getCategoryFromPageContext();
         if (typeof category !== 'undefined') {
         // launch the layer here
        instance.layer.launch(category)
     }
   } 
  }
}

The custom results approach requires a lot of work for sites with tons of categories.