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>
Top comments (0)