DEV Community

Cover image for 7. Create individual product pages - Create a Commerce.js store with Svelte
Jamie Barton for Commerce.js

Posted on

2 2

7. Create individual product pages - Create a Commerce.js store with Svelte

Now we've individual pages for categories, it's now time to create the important pages for products.



We can do this by creating a new file with the name [permalink].svelte inside the src/routes/products directory.

The file is called [permalink] because we'll be fetching Commerce.js products by their permalink. You could alternatively use the product id, but the permalink when customized is a bit more friendly.

Inside this file we'll make a call to commerce.products.retrieve() and pass into the first argument the permalink (from params), and then in the 2nd argument, we'll tell it the type is permalink.

Once we've retrieved the product by permalink, we'll export the necessary variables, and return the product name, and formatted price to the page.

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

  export async function preload({ params }) {
    const { permalink } = params;

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

    return {
      product,
    };
  }
</script>

<script>
  export let product;
</script>

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

<p>{product.price.formatted_with_symbol}</p>
Enter fullscreen mode Exit fullscreen mode

🎉 Great!

You should see after running npm run dev all of what we've built so far at http://localhost:3000.


We'll next explore using Commerce.js to add products to cart, and checkout.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay