4. Create a products index page - Create a Commerce.js store with Svelte

Let's now create a dedicated page just for listing, and linking to product pages.

Inside the src/routes directory, create a the directory products, and file index.svelte.

This file will serve /products in the browser.

Just like we did before on the root index page, we can import the commerce.js instance, and fetch our products.

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

  export async function preload() {
    const { data: products } = await commerce.products.list();

    return {
      products,
    };
  }
</script>

<script>
  export let products;
</script>

<h1>Products</h1>

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

Since Sapper code splits your project per route, the special rel="prefetch" tells Sapper to start prefetching the data before navigating for the page.

Before we continue, let's add a link to the /products page on our root index page.

Above where we list products, add the following:

<h3><a href="/products">Products</a></h3>