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 category & collection pages using the CategoryPage component and a PageReplacer as follows.
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
}),
});
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.categoryId!;
history.pushState({ ...history.state }, "", element.href; // change URL to the category page
categoryProvider.categoryId = new_id; // change what category is being displayed to the new category
}));
Was this page helpful?