Just like we did for categories, we'll do the same for listing all categories.
Inside src/routes, create the directory categories, and a new file index.svelte.
As you can probably guess, it's here we will fetch all categories using Commerce.js.
<script context="module">
import commerce from "../../lib/commerce.js";
export async function preload() {
const { data: categories } = await commerce.categories.list();
return {
categories,
};
}
</script>
<script>
export let categories;
</script>
<h1>Categories</h1>
<ul>
{#each categories as category}
<li>
<a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
</li>
{/each}
</ul>
Before we continue, let's add a link to the /categories page on our root index page.
Above where we list categories, add the following:
<h3><a href="/categories">Categories</a></h3>
Top comments (0)