Adding the CategoryPage to your site

The CategoryPage component

Like for the search page, we’re layering an SPA on top of your site to enable fast client side routing between the category pages. Set up and configure your product listing pages using the CategoryPage component and a PageReplacer as follows.

tsx

import { CategoryPage, SetupPageReplacer } from "@depict-ai/js-ui";

SetupPageReplacer({
    // this should return true for pages that are a category page
    isPageToReplace: url => url.pathname == "/category.html",
    // selector of the element that should be replaced with the CategoryPage
    selectorToReplace: `.replace-for-depict`,
    renderContent: () =>
      CategoryPage({
        categoryProvider, // The categoryProvider instance you created in the previous step
        productCard, // The productCard component you created in a previous step
      }),
  });

Review the types or reference for other configurable properties

Different layout possibilities

The default configuration displays the current category title above the product cards. If you want to render the title of the category yourself, do the following to remove the default title and also make the CategoryPage as compact as possible:

import { CategoryPage, SetupPageReplacer, EmbeddedNumProducts } from "@depict-ai/js-ui";

SetupPageReplacer({
    isPageToReplace: url => url.pathname == "/category.html",
    selectorToReplace: `.replace-for-depict`,
    renderContent: () =>
      CategoryPage({
        categoryTitlePlugin: EmbeddedNumProducts, // <- Add this
        categoryProvider,
        productCard,
      }),
  });

The CategoryPage in its most compact version, optimizing for the content being above the fold

Navigating to category pages without reloading the page

You can link to the category pages and then PageReplacer will only single-page-navigate between the different category pages. If you, however, want to replace the current page with a category page without a reload, you can do the following:

<a href="URL_OF_CATEGORY" data-category-id="CATEGORY-ID" class="category-link">CATEGORY_NAME</a>

import { onExistsObserver } from "@depict-ai/js-ui";

onExistsObserver("a.category-link", element => element.addEventListener("click", ev => {
  if (ev.button || ev.metaKey || ev.ctrlKey) return; // Still allow cmd-click to open in new tab
  const new_id = element.dataset.listingId!;
  history.pushState({ ...history.state }, "", element.href; // change URL to the product listing page
  categoryProvider.listingQuery = { type: "listingId", id: new_id }; // change what product listing is being displayed to the new product listing page
}));

​The CategoryPage component

​Different layout possibilities

​Navigating to category pages without reloading the page

The CategoryPage component

Different layout possibilities

Navigating to category pages without reloading the page