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).
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)
They receive this instead:
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.
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.