Connect database rows to lists and item pages

Prepare the table and route field #

Start with fields the card and detail page actually need: title, summary, image, body, category, published state and a stable slug. A slug should be unique, lowercase, readable, and independent from a database row ID.

Decide how empty optional values should render. A missing image should not leave a broken icon; a missing price should not render an unexplained zero; an unpublished row should not become a discoverable public item by accident.

Bind a repeated component #

1. Design one complete card using realistic content.
2. Connect the repeated component to the intended table.
3. Map each visual element to the corresponding field: heading to title, image to image, link text to the label, and destination to the item route.
4. Apply filters and ordering deliberately. Record what an empty result should say instead of leaving a blank section.
5. Preview with short, long and missing values and at a narrow width.

Create one page design for every row #

Configure an item-page template and choose the field that supplies the route slug. Bind the template's title, body, images and links just as you did for the card. Two seed rows should produce two different stable URLs using the same design.

Bind item-specific title, description and primary image where the editor exposes those controls. The hosting layer can render dynamic item metadata, but discovery and rendering are different concerns: current customer-site sitemaps do not enumerate every parameterized item route.

Plan for slug changes and deleted rows #

Changing a published slug changes the public address. Update links and arrange a redirect outside Fronty if the old URL already has traffic or backlinks. Before deleting a related row, inspect pages that display it.

Route collisions must be resolved before publish: an item route cannot safely claim the same address as a normal page or another item. Prefer a collection prefix such as /products/slug rather than placing every item at the site root.

Verify list and detail behavior #