DocsArchitecturePagesCollection

Collection page

It is mandatory to include a collection.json file in the pages directory. You can create additional variations such as collection.spring.json, collection.minimal.json etc. Within the Merchant panel, theme users can choose which variation to apply to each collection.

Additionally, the collection page features a unique data hook, useCollection(), which automatically retrieves the specific collection based on the URL.

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