DEV Community

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

Posted on


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

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 {

export let merchant;
export let categories;
export let products;


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

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

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!