Merx

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 if the product has limited availability.

Customize the product blueprint

Merx comes with a product blueprint with some predefined fields. You can extend this blueprint or create your very own. Just make sure your blueprint has at least a price field.

/site/blueprints/pages/product.yml
extends: wagnerwagner.merx.pages/product

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

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() gives you the formatted price, with currency symbol.

/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>
…

By default the page model of product templates is Wagnerwagner\Merx\ProductPage. If you want to, you can create your own page model and extend the default Wagnerwagner\Merx\ProductPage model.

Add the product to the cart

Submitting the product form sends a POST request to the Merx API endpoint, which answers with JSON. Let’s intercept the submit event and log the response to the console for now.

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 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.