# Adding products

> Define a product page and add a product to the cart.

## Create a new page page

Create a new page in the Panel and select *Product* as the template. Set a price for your product, and a [stock](https://merx2.wagnerwagner.de/guide/getting-started/stock.md) if the product has limited availability.

## Customize the product blueprint

Merx comes with a [product blueprint](https://merx2.wagnerwagner.de/reference/blueprints/pages/product.md) with some predefined fields. You can [extend](https://getkirby.com/docs/guide/blueprints/extending-blueprints) this blueprint or create your very own. Just make sure your blueprint has at least a [price field](https://merx2.wagnerwagner.de/reference/blueprints/fields/price.md).

```yml title="/site/blueprints/pages/product.yml"
extends: wagnerwagner.merx.pages/product

tabs:
  content:
    fields:
      - price
      - taxRule
      - stock
      - name: cover
        type: filepicker
        max: 1
```

> [!NOTE]
> The product page blueprint is registered as `pages/product` and `wagnerwagner.merx.pages/product`. Extend the namespaced one to avoid infinite loops.

## Build the template

You’re completely free to build your own template for your product. Most likely you’ll want to show the price and a button to add the product to the cart. [`$page->price()`](https://merx2.wagnerwagner.de/reference/classes/product-page/price.md) gives you the formatted price, with currency symbol.

```php title="/site/templates/product.php"
<?php
/** @var Wagnerwagner\Merx\ProductPage $page */
?>
…
<span class="price"><?= $page->price() ?></span>
<form id="product-form" action="<?= url('api/shop/cart') ?>" method="post">
  <input type="hidden" name="page" value="<?= $page->uuid() ?>">
  <input type="number" name="quantity" min="1" value="1">
  <button>Add to cart</button>
</form>
…
```

> [!NOTE]
> By default the page model of *product* templates is [`Wagnerwagner\Merx\ProductPage`](https://merx2.wagnerwagner.de/reference/classes/product-page.md). If you want to, you can create your own page model and extend the default [`Wagnerwagner\Merx\ProductPage`](https://merx2.wagnerwagner.de/reference/classes/product-page.md) model.

## Add the product to the cart

Submitting the product form sends a POST request to the [Merx API endpoint](https://merx2.wagnerwagner.de/reference/api/routes/shop-cart-post.md), which answers with JSON. Let’s intercept the submit event and log the response to the console for now.

```js title="script.js"
const productForm = document.getElementById('product-form');
productForm.addEventListener('submit', async (event) => {
  event.preventDefault();
  const response = await fetch(productForm.action, {
    method: 'post',
    body: new FormData(productForm),
  });
  const json = await response.json();
  console.log(json.data);
});
```

Continue with [Showing the cart](https://merx2.wagnerwagner.de/guide/getting-started/showing-the-cart.md) and learn how to use JavaScript to show the cart to the customer.

If you don’t want to use JavaScript continue with [Using the API with PHP](https://merx2.wagnerwagner.de/guide/api/using-api-with-php.md).