Creating product detail page

When you want to render the Product Detail component instead of the Category component you have to add the following configuration into the website before the bundle is initialized (before .initVueBundle() is called).

<script>
  Apicart
  .configure({
    // ...
    vueComponents: {
      productDetail: {
        dataUrl: 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json'
      }
    }
  })
</script>

In case you want have a link on your product detail from your category, you have to change the structure of product inside the category configuration from url to an object containing dataUrl and pageUrl. You can do it like this.

<script>
  Apicart.configure({
  vueComponents: {
    category: {
      products: {
        list: [
          {
            dataUrl: 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
            pageUrl: '/green-t-shirt/'
          }
        ]
      }
    }
  },
  // ...
});
</script>

You can find the configuration above integrated in our JAMstack sandbox website. The repository for this page is public, so feel free to inspect it to get more details :).

In addition to payment methods, categories and products, every e-commerce needs specific settings such as currency and language. So let's start configuring.

Create E-commerce in 5 minutes

Try it. It is for free.