Search

Search functionality in Vactory provides powerful content discovery capabilities including full-text search, faceted filtering, and autocomplete suggestions. This guide covers the complete setup and customization process.

Installation

Step 1: Setup Search API Index

Commence by following the guidelines outlined in the Vactory8 documentation to establish the search API index.

Reference: https://voidagency.gitbook.io/factory/modules-vactory/untitled/search

Step 2: Enable Search Module

Enable the following module: vactory_decoupled_search

The Vactory Decoupled Search module provides the /api/search endpoint which exposes the search indexed results.

Frontend Implementation

Search Results

To modify the search component, you can make changes to the file located at:

./pages/search.jsx

This file handles the display of search results and pagination.

Search Facets

Enable Facets Module

Enable the following module: vactory_decoupled_facets

Configure Facets

For every index created, a facet source is available. You can use this source to create filters.

1. Visit /admin/config/search/facets and click on Add facet

2. Under Facet source, select the server created above

3. For Field, select the field to filter on and save

4. Edit the facet and make sure JSON:API Search API is selected under widget

Customize Facets Display

To modify the search facets, you can make changes to the file located at:

./pages/advanced-search.jsx

This file handles the advanced search interface with filtering options.

Search Input Autocomplete

Enable Autocomplete Module

Enable the following module:

search_api_autocomplete

Implementation Example

The following example demonstrates the process of constructing an autocomplete input for a search API:

import { AutocompleteApi, Button } from "@/ui"
import { useForm } from "react-hook-form"
import { useRouter } from "next/compat/router"
import { SYSTEM_ROUTES } from "@vactorynext/core/lib"

export const AutocompleteSearchInput = () => {
    const router = useRouter()
    const locale = router.locale
    const {
        handleSubmit,
        register,
        control,
        formState: { errors },
    } = useForm({
        defaultValues: {
            keyword: "",
        },
    })

    const onSubmit = (data) => {
        router.push({
            pathname: `${SYSTEM_ROUTES.search.path}`,
            query: { q: data?.keyword },
        })
    }

    return (
        <form
                className="max-w-screen-md w-full mx-auto"
                onSubmit={handleSubmit(onSubmit)}
            >
                <AutocompleteApi
                    {...register("keyword", {})}
                    endpoint={`${locale}/search_api_autocomplete/your_search_api_index`}
                    hasError={errors?.keyword}
                    control={control}
                    placeholder="What are you searching for ?"
                    queryName="q"
                    keyValue="value"
                    minLength="3"
                    errorMessage={errors?.keyword?.message}
                    label="What are you searching for ?"
                />
                <Button type="submit" variant="primary" className="mt-2">
                    Submit
                </Button>
            </form>
    )
}

Configuration Summary

Your search implementation now includes:

• Search Results: Full-text search with pagination
• Faceted Search: Advanced filtering capabilities
• Autocomplete: Real-time search suggestions

All components work together to provide a comprehensive search experience for your users.