loading...
Cover image for 3. Create homepage of categories and products - Create a Commerce.js store with Svelte
Commerce.js

3. Create homepage of categories and products - Create a Commerce.js store with Svelte

notrab profile image Jamie Barton ・1 min read

Let's first create an index page of all the data we need to build our store with Svelte.



Inside /src/routes/index.svelte we'll doing the following:

  • Fetch all merchant information using commerce.merchants.about()
  • Fetch all categories using commerce.categories.list()
  • Fetch all products using commerce.products.list()
  • List our merchant business name
  • List all categories, and products, with dynamic links to both
<script context="module">
import commerce from "../lib/commerce.js";

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

  return {
    merchant,
    categories,
    products,
  };
}
</script>

<script>
export let merchant;
export let categories;
export let products;
</script>

<h1>{merchant.business_name}</h1>

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

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

Discussion

pic
Editor guide