Search

Installation

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

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

Enable the following module : vactory_decoupled_search

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

Client Side

Search Results

To modify the search component, you can make changes to the file located at ./pages/search.jsx.

Search Facets

Enable the following module : vactory_decoupled_facets

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

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

Under Facet source, select the server created above. For Field, select the field to filter on. Save.

Next, edit the facet and make sure JSON:API Search API is selected under widget.

To modify the search facets, you can make changes to the file located at ./pages/advanced-search.jsx.

Search Input Autocomplete

Enable the following module : search_api_autocomplete

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>
    )
}
Please ensure that you replace the placeholder `your_search_api_index` with the actual value of your search API index in the `endpoint` property.
WebFormCustom errors page