DEV Community

Cover image for 5. Create a categories index page - Create a Commerce.js store with Svelte
Commerce.js profile image Jamie Barton
Jamie Barton for Commerce.js

Posted on

5. Create a categories index page - Create a Commerce.js store with Svelte

#javascript #svelte #sapper #commerce

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)