Docs
Architecture
Pages
Collection

Collection page

Show collection details

Use useCollection() hook to show various details about the collection.

import {useCollection} from "builderoo";
 
const {title, image, products} = useCollection()

Learn more about the useCollection() hook.

Show product pagination

Use the usePagination() to implement product 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 CollectionDetail() {
  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 collection filters

Use useSearch() hook to show and apply filters on the products of the collection.

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

Learn more about the useSearch() hook.

ProductCart