Implementation Overview

You're building a connector app that plugs a commerce backend into Laioutr. The canonical types in @laioutr-core/canonical-types define the full contract between your connector and the frontend. The API reference documents every action, query, link, and entity in detail. This page adds what the reference does not: which parts of that contract matter most, what constitutes a minimum viable connector, and how far existing connectors go.

Priority tiers

Not every canonical type needs an implementation on day one. The tiers below reflect how the standard Laioutr UI sections, blocks, and page types use each token.

Required items power core storefront pages (product detail, product listing, cart, navigation). Without them, those pages break or render empty.

Expected items enable common features like login, checkout redirect, customer account, category navigation, and search autocomplete. Omitting them disables the feature but does not break the storefront.

Optional items power specific add-ons: blog, reviews, wishlist, newsletter, analytics. Implement them when your project needs them.

Queries

Actions

Links

Entity components

Your connector resolves entity data through component resolvers. Each entity is split into components that resolvers provide independently. The entity reference documents every component. Below is the priority breakdown for the two most complex entities.

Product: base, description, media, prices, and defaultVariant are required. seo, info, and flags are expected. brand, rating, and analytics are optional.

ProductVariant: base, prices, and options are required. availability and info are expected. quantityPrices, quantityRule, and shipping are optional.

For Cart, CartItem, Category, MenuItem, and BreadcrumbItem, implement at least the base component (plus cost for Cart and CartItem).

Minimum viable connector

If you are building a new connector and want the standard Laioutr UI to work, start here:

Queries (5):product/by-slug, product/by-category-slug, category/by-slug, cart/get-current, menu/by-alias

Actions (3):cart/add-items, cart/remove-items, cart/update-items

Links (4):product/variants, product/breadcrumb, cart/cart-items, cart/cart-item-product-variant

Entity resolvers: Product (base, description, media, prices, defaultVariant), ProductVariant (base, prices, options), Category (base), Cart (base, cost), CartItem (base, cost), MenuItem (base), BreadcrumbItem (base)

This gives you working product pages, category listing pages, navigation, cart, and breadcrumbs. From there, add auth, customer, search, and other features as your project requires.

Related