Arlind Musliu
February 16, 2024 · 3 min read · 100 views
February 16, 2024 · 3 min read · 100 views
Statamic is a very cool CMS that lets you build and manage websites. Adding a search feature to your Statamic site is super easy. You can set it up just how you like, and it's also a snap to hook it up with other powerful search tools like Algolia, Elasticsearch, Meilisearch, or Fuse.js.
Generate a file named search.antlers.html for the search within the root directory of the view folder. Now go to the web.php file and add the following route to access the search results.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::statamic('search', 'search');First things first, you need a place for people to type what they're looking for. This is your search form. Just a simple box on your site where visitors can enter words.
<form action="/search">
<input type="search" name="q" placeholder="Search">
<button type="submit">Search</button>
</form>After someone searches, they want to see what you found. That's where the search:results tag comes in. It takes the search words and shows all the matching stuff on your site.
{{ search:results index="default" }}
{{ if no_results }}
<h2>Sorry, no results for: {{ get:q }}</h2>
{{ else }}
<a href="{{ url }}">
<img src="{{ image }}" alt="{{ filename }}">
<h2>{{ title }}</h2>
</a>
{{ /if }}
{{ /search:results }}Indexes help your search work fast. They're like shortcuts to find things on your site. You can make as many as you need for different stuff, like blog posts or product pages. In the example below, we want to search only the posts collection for the fields: title, categories and tags. We will need to modify the config/statamic/search.php file.
<?php
return [
/*
|--------------------------------------------------------------------------
| Default search index
|--------------------------------------------------------------------------
|
| This option controls the search index that gets queried when performing
| search functions without explicitly selecting another index.
|
*/
'default' => env('STATAMIC_DEFAULT_SEARCH_INDEX', 'default'),
/*
|--------------------------------------------------------------------------
| Search Indexes
|--------------------------------------------------------------------------
|
| Here you can define all of the available search indexes.
|
*/
'indexes' => [
'default' => [
'driver' => 'local',
'searchables' => ['collection:posts'],
'fields' => ['title', 'categories', 'tags'],
],
],
/*
|--------------------------------------------------------------------------
| Driver Defaults
|--------------------------------------------------------------------------
|
| Here you can specify default configuration to be applied to all indexes
| that use the corresponding driver. For instance, if you have two
| indexes that use the "local" driver, both of them can have the
| same base configuration. You may override for each index.
|
*/
'drivers' => [
'local' => [
'path' => storage_path('statamic/search'),
],
],
/*
|--------------------------------------------------------------------------
| Search Defaults
|--------------------------------------------------------------------------
|
| Here you can specify default configuration to be applied to all indexes
| regardless of the driver. You can override these per driver or per index.
|
*/
'defaults' => [
'fields' => ['title'],
],
];To keep your indexes fresh when you add new things, run this command:
php please search:updateNote: The please command is part of Statamic's configuration. It's an alias for php artisan statamic:
Here's what your final search file will look like if you want to have the search form and the results on the same page.
<form action="/search">
<input type="search" name="q" placeholder="Search">
<button type="submit">Search</button>
</form>
{{ search:results index="default" }}
{{ if no_results }}
<h2>Sorry, no results for: {{ get:q }}</h2>
{{ else }}
<a href="{{ url }}">
<img src="{{ image }}" alt="{{ filename }}">
<h2>{{ title }}</h2>
</a>
{{ /if }}
{{ /search:results }}Or, you could put the search form in your navigation, and when users search and hit enter, they'll be taken to our search page to see both the form and the results.
Fuzzy searching allows for matches that are similar but not exactly the same as the search term, which can be useful for catching typos or variations in spelling. If you want more power, you can connect to other powerful search solutions like Algolia, Elasticsearch, Meilisearch, or Fuse.js. They're all different but can make your search even better.
The local driver may not support all fuzzy search capabilities, but let's give it a try. Configure Statamic Search to use some of the fuzzy searching techniques:
<?php
return [
/*
|--------------------------------------------------------------------------
| Default search index
|--------------------------------------------------------------------------
|
| This option controls the search index that gets queried when performing
| search functions without explicitly selecting another index.
|
*/
'default' => env('STATAMIC_DEFAULT_SEARCH_INDEX', 'default'),
/*
|--------------------------------------------------------------------------
| Search Indexes
|--------------------------------------------------------------------------
|
| Here you can define all of the available search indexes.
|
*/
'indexes' => [
'default' => [
'driver' => 'local',
'searchables' => ['collection:posts'],
'fields' => ['title', 'categories', 'tags'],
'min_characters' => 3,
'min_word_characters' => 3,
'query_mode' => 'any',
'use_stemming' => true, // e.g. "running" matches "run"
'use_alternates' => true, // Find alternate spellings
'sort_by_score' => true,
],
],
/*
|--------------------------------------------------------------------------
| Driver Defaults
|--------------------------------------------------------------------------
|
| Here you can specify default configuration to be applied to all indexes
| that use the corresponding driver. For instance, if you have two
| indexes that use the "local" driver, both of them can have the
| same base configuration. You may override for each index.
|
*/
'drivers' => [
'local' => [
'path' => storage_path('statamic/search'),
],
],
/*
|--------------------------------------------------------------------------
| Search Defaults
|--------------------------------------------------------------------------
|
| Here you can specify default configuration to be applied to all indexes
| regardless of the driver. You can override these per driver or per index.
|
*/
'defaults' => [
'fields' => ['title'],
],
];The built-in search driver offers a variety of options that you can customize.
Keep your indexes lean. Only include what's necessary for the search.
Update your indexes regularly so they know about new content.
Choose the best driver for your needs. You can start with the local one and try others as you go.
Adjust your search settings to fit what your site offers.
And that's all there is to it! You're now ready to add a smooth search feature to your Statamic site.
Are you planning a new Statamic project or thinking about migrating your WordPress site to Statamic? Learn more about our expertise as a renowned Statamic development agency.
Technologies:
Related Posts
Stay up to date
Be updated with all news, products and tips we share!