Feature

Shop

A catalogue, a basket and a checkout, with orders, stock and discount codes behind them. Payments run through a fake provider here, so you can buy a book end to end without a card.

Things to try

Buy a book

Pick a format, add it to the basket, check out as a guest and press Pay on the fake payment page. The order email is printed to the server log.

Open Pride and Prejudice

Use a discount code

Type READ10 into the basket: ten per cent comes off the goods and shows as its own row.

Open the basket

Try to buy the last one

The signed Middlemarch has two copies and The Big Sleep has none. Stock is held from the moment checkout starts.

Open the signed Middlemarch

The latest products

A Product grid block set to Latest: every active product, newest first. Each card opens the product page, which comes from one template for every product. A book has Hardback, Paperback and Ebook variants, and the ebook has no delivery charge.

One category

The same block set to Category, here Classics and then Gifts (a tote bag and a gift voucher with three prices), in a different shape: four to a row, cropped to a landscape box.

Basket and checkout

The basket page lists the lines with thumbnails, stepped quantities and a field for a discount code. Checkout takes an email and a delivery address, then hands over to the payment provider. Guests do not need an account.

Discount codes and delivery

Discount codes are made under Catalog. READ10 is a public code for ten per cent off the goods. Delivery is a flat charge per item, set under Settings → Shop, and a product, or one of its variants such as an ebook, can override it; nothing is charged until you set one.

After the order

A paid order emails the customer and you, appears under Orders to accept or dispatch, and can be cancelled or refunded with the items returned to stock. Customers see their orders under their account.

How this page is built

  1. Turn the shop on in site.config.ts with shop({ payments, currency, taxRate }).
  2. Add products and variants under Catalog, with a category, images, stock and a price.
  3. Put a Product grid block on any page and pick Latest or a category.
  4. Edit Content → Templates → Product to change every product page at once.
  5. Make a code under Catalog → Discount codes, then try it in the basket.
  6. Set delivery and open or close the shop under Settings → Shop.