dev-resources.site

for different kinds of informations.

Build your next commerce store with SvelteKit

Published at

7/13/2021

Storefront Index Page

Then all that's left to do inside of your .svelte files (such as index.svelte) is import the client and call the usual Commerce.js methods to get your products, categories, etc.

If we wanted to get all of our categories and products, it would look something like:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load() {
    const { data: categories } = await client.categories.list();
    const { data: products } = await client.products.list();

    return {
      props: {
        categories,
        products
      }
    };
  }
</script>

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

If you've used Sapper with Svelte before the above will look somewhat familiar, and if you've used other frontend frameworks like Next.js then returning your props will look even more so.

Then using the variables categories and products we'll output the values to a list.

<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="/product/{product.permalink}">{category.name}</a>
    </li>
  {/each}
</ul>

Category Pages

Now we'll create the page for each of our categories.

Inside of a new file src/routes/categories/[slug].svelte we'll add the following script module:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { slug } = page?.params;

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

    const { data: products } = await client.products.list({ category_slug: [slug] });

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

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

You'll notice above we're fetching the slug from the page params.

We then use this slug to retrieve the category from Commerce.js:

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

The same slug is used when fetching products from Commerce.js, but it is used as a filter:

const { data: products } = await client.products.list({ category_slug: [slug] });

Then all that's left to do on this page is return our category.name and list out the products belonging to that category:

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

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

That's it! You'll notice here we're returning a list of links to our products, so we'll create those pages next!

Product Pages

Similar to how we created the individual category pages, we'll do the same for products. But this time we'll call the file [permalink].svelte since we're linking to the product permalink from the index and category pages.

Add the following code to src/routes/products/[permalink].svelte:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { permalink } = page?.params;

    const product = await client.products.retrieve(permalink, {
      type: 'permalink'
    });

    return {
      props: {
        product
      }
    };
  }
</script>

<script>
  export let product;
</script>

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

<p>{product.price.formatted_with_symbol}</p>

That it for our product! You now can link users to your individual product pages 😅

commerce Article's

30 articles in total