Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/PloutusLab/krafta-web/llms.txt

Use this file to discover all available pages before exploring further.

Krafta’s storefront gives you a curated view of every printable product available — from everyday basics to stationery and drinkware. Each product card shows the key information you need to decide before committing to a design, and navigating from catalog to detail page to the customization editor takes no more than a few clicks.

Catalog page (/catalog)

The catalog page loads all active products from the store. Products that are inactive are hidden from the storefront automatically — you will never see an unavailable product. Each product card displays:
FieldDescription
ThumbnailThe primary mockup image for the product
Category labele.g. Camisetas, Libretas, Tazas
Product nameThe full product name
Short descriptionOne or two sentences about the item
Base priceStarting price in USD, shown as $XX.XX
The data is loaded from GET /api/catalog?summary=1, which returns a lightweight payload optimised for grid display.

Filtering by category

Above the product grid, Krafta renders a pill-shaped filter bar listing every category present in the current catalog. The first pill is always Todos (all products). Clicking any category pill instantly narrows the grid to that category without a page reload. Categories are derived dynamically from the products themselves, so the filter bar always reflects exactly what is in stock. Common built-in categories include:
  • Camisetas — T-shirts and apparel
  • Libretas — Notebooks and stationery
  • Tazas — Mugs and drinkware
Admins can configure additional categories from the admin panel, and they will appear in this bar automatically once at least one active product belongs to them.

Bulk pricing for apparel

For apparel products (camisetas and hoodies), the catalog card shows a secondary green price label indicating the wholesale unit price that applies when you order 6 or more units. For example:
Base price: $12.00
Al mayor:   $7.00  (6+ units)
This discount is applied automatically on the product detail page when you set a quantity of 6 or more.

Product detail page (/product/[id])

Clicking Personalizar on any catalog card takes you to the product detail page at /product/[id]. This page loads the full product record from /api/catalog?id=[id], including all active variants and their attributes. The page opens with the product’s primary image displayed in a large container. If the product has multiple images, a thumbnail strip appears below the main image — click any thumbnail to make it the active view.

Variant selector

The right panel shows all configurable attributes for the product. Attribute types depend on the product category:
AttributeExample valuesApplies to
Color (color)Blanco, Negro, Amarillo, Morado, GrisCamisetas, Hoodies
Talla (talla)S, M, L, XL, XXLCamisetas, Hoodies
Material / ModeloEstándarLibretas, Tazas, and other non-apparel
Attributes are stored as a JSON object on each variant. Only variant attributes that are present in the product’s data are rendered — if a product has no color attribute, no color picker appears. Selecting a color renders a circular swatch with a focus ring for the active selection. Selecting a size highlights the talla button in dark. Both selections are saved when you proceed to the editor.

Pricing and quantity

The pricing card updates in real time as you change quantity:
  • 1–5 units — full unit price
  • 6+ units — discounted wholesale price (apparel only)
A running Total estimado is shown alongside the quantity selector so you can see the full order cost before proceeding.

Proceeding to the editor

When you click ✦ Personalizar diseño, Krafta saves your selections (product ID, color, size, quantity, and pricing) to localStorage under the key krafta-order-specs, then redirects you to /editor?productId=[id] where the design canvas opens for that product.

Build docs developers (and LLMs) love