Search page

This page is optional but recommended to have. The recommended file name for this page is search.json.

Show search results

Use useSearch() hook to show search results, show and apply filters on search.

import {useSearch} from "builderoo";
 
const {loading, results, filters, setQuery, searchAgain, toggleFilter} = useSearch({types: ["product"]})

Learn more about the useSearch() hook.

Show result pagination

Use the usePagination() to implement pagination.

Use currentPage and totalPages properties to show page information. Use gotoPage function to navigate to a specific page. And urlForPage function to get a link to a specific page (this function cannot be used to navigate to pages).

import React from 'react';
import {usePagination} from "builderoo";
 
export default function SearchResults() {
  const {currentPage, gotoPage, totalPages, urlForPage} = usePagination()
  return (
    <section className="px-20 py-10 my-10">
      <div className="mt-20 flex justify-center gap-8">
        <a
          className="cursor-pointer underline text-blue-500"
          href={urlForPage(currentPage - 1)}
          onClick={(e) => gotoPage(currentPage - 1, e)}
        >
          Previous Page
        </a>
        <a
          href={urlForPage(currentPage + 1)}
          className="cursor-pointer underline text-blue-500"
          onClick={(e) => gotoPage(currentPage + 1, e)}
        >
          Next Page
        </a>
      </div>
    </section>
  );
}

Learn more about the usePagination() hook.

Show search filters

The useSearch() hook returns filters, toggleFilter properties that can be used to show and apply one or more filters.

import { useSearch } from "builderoo";
 
// Component
const {filters, toggleFilter} = useSearch()