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

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

notrab profile image Jamie Barton ・1 min read

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

Discussion

pic
Editor guide