6. Create a individual category page - Create a Commerce.js store with Svelte

Now that we've pages for all products and categories, it's time to create the individual pages for categories.

---

---

Using Sappers dynamic routes, we can create a new file inside src/routes/categories called [slug].svelte that works just like Nuxt and Next.js by passing this down as page params.

Inside src/routes/categories/[slug].svelte, we can use Commerce.js to:

• Fetch the individual category by slug
• Fetch all products that belong to this category

We'll perform the requests inside the exported async function preload, and return those to the page.

const category = await commerce.categories.retrieve(slug, {
  type: "slug",
});

const { data: products } = await commerce.products.list({
  category_slug: slug,
});

It's important we export both of these inside the page <script /> tag so we can access it in the template.

Then on the page we will display the category name, followed by all products with links to the individual pages.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { slug } = params;

    const category = await commerce.categories.retrieve(slug, {
      type: "slug",
    });
    const { data: products } = await commerce.products.list({
      category_slug: slug,
    });

    return {
      category,
      products,
    };
  }
</script>

<script>
  export let category;
  export let products;
</script>

<h1>{category.name}</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

Comments

[Brad Mehder]

I'm stuck on this one. When I try to go to a category page, I expect to see a list of products from that category. Instead I get the following error showing on the screen instead: "500
Unsuccessful response (422: ) received

undefined"

Any help would be appreciated.

[Gelle Matthieu]

Hi ! I had the same problem the tutorial is not up to date now we pass an array of slug and no longer a single slug here :

//behind
const { data: products } = await commerce.products.list({
      category_slug: slug,
    });
//after
const { data: products } = await commerce.products.list({
      category_slug: [slug],
    });

[Jamie Barton]

Thanks for the update @matthieugll