New Drupal 10 Module for Decoupled Search Experiences
Let's face it, search is hard. But nearly every site needs it.
There are so many aspects to doing your site search well. Backend configuration, using search technology like Apache Solr, Algolia, Meili, Coveo, etc., making it easy for editors to add and leverage search around the site, and most importantly — making search fast and usable for your site’s visitors.
We’ve spent time this year improving search across the board internally for developers, content editors, and site visitors.
During Drupalcon 2023, our senior Drupal developer Ron Pearl gave a talk on improving the search experience in websites leveraging Acquia Site Studio. He demonstrated how you can develop a custom component that content editors can place on the page that renders a configured search experience. This allows editors to add different search interfaces on pages sourced from a single component, some with facets, some with no facets, some acting as simple listings, and others acting as pre-canned section search experiences.
In case you missed it, here is a quick recap:
“At the Acquia booth, our senior Drupal developer Ron Pearl presented how we integrate custom components in Acquia Site Studio using ReactJS. These Site Studio components are wired into a headless View in Drupal that uses the Solr search backend. The result is a full client-side search that is extremely fast and responsive, so audiences find what they are looking for faster. This makes them more likely to convert and complete your KPIs (key performance indicators).
On the Drupal side, we created a module that added more serialization output from a View that helps JavaScript developers build the peripheral UI around search, like sorters, facets, pagination, result counts, and labels right in the JSON output and configurable all at the Views layer. This plugin allows us to create several Views and use the same process on different projects with the same familiar interface and result.”
We also promised to create a release of the module that allows editors to add different search interfaces from a single component. We added a new module for Drupal that makes it easier for developers to build these experiences with React, Vue, or other JS libraries by creating a wrapper for Views that adds all applicable metadata needed to build the interface.
The Views REST Serializer Extra module enhances the stock response from a Drupal View to include the following data:
- Result items
- Total results
- Total pages
- Items per page
- Items per page options
- Current page number
- Typeahead path for autocomplete inputs (full-text search)
- Available search filters
- Available search sorts
- Available Facets (from the Facets module)
This means that when a developer writes JavaScript that calls a backend API, instead of getting results only as a response:
They receive this instead:
With this output, developers have all the information needed to build an entire search experience using only JavaScript. Doing this enables you to create dozens of search and/or content listings around your site using one View in Drupal. This promotes code re-use on the backend and frontend — you won’t need to write the handling of this search more than once in JavaScript, and creating extra displays in Views is easy as point and click. The HTTP response never changes, so no matter how many Views you create, it all looks the same to JavaScript — the only difference is the URL used to access it.
We have included some configuration options as well. Sometimes there needs to be an agreement on the API contract between the backend and frontend – usually, this happens on the “naming” of items in the response. While the default property names are in place, you can override them to match up with any frontend JavaScript code:
For instance, if you needed to adjust the “results” property name to say, “data” — you can do that right in the Drupal admin interface. No code change is required. If you have the Facets module enabled, you can optionally toggle their inclusion on or off for extra flexibility in component use.
Download the module for Drupal 9 and 10 today.
Earlier in the post I mentioned how we can build several kinds of search experiences on a site using one Drupal View, code re-use, and a single component. How are content editors able to do that? I will get into that in my next set of articles, so stay tuned.
Get the Drupal 10 Development Cookbook
Are you curious about how to develop modules, themes, and plugins or how to be a great site builder for Drupal 10?
The "Drupal 10 Development Cookbook" is co-authored by Matt Glaman and me. We cover a wide variety of topics with hands-on examples so you can get up and running with Drupal 10 in no time. These topics include running Drupal locally with Docker-based tools, content modeling, creating custom modules, how to do automated testing, and migrating data into Drupal from various data sources. The book will help you understand how to develop and build modules just like the ones we talk about often at Velir.
You can pick up the book on Amazon as a physical copy or for Kindle.
Need help using our Views REST Serializer Extra module for Drupal 10? Reach out. Our Drupal experts would be happy to walk you through it and help you configure it so you can make the most of its features.