SCAYLE is built for brands running serious B2C and D2C operations, with B2B support in the same plat…
WEBSALE Storefront API + Laioutr: How the Connection Works
WEBSALE operates a proprietary REST-based Storefront API that forms the core of its headless setup. Laioutr sits as a Frontend Management Platform (FMP) directly on top of this API: no new backend, no data duplication, no WEBSALE-side configuration required. This article explains how the connection works technically and what marketing teams can control independently afterward.
What the WEBSALE Storefront API delivers
The WEBSALE Storefront API is a REST API that exposes all relevant commerce data:
- Product data - items, variants, images, prices, inventory
- Category structure - navigation, breadcrumb, category metadata
- Cart logic - add-to-cart, update, remove, vouchers, B2B price lists
- Customer accounts - login, registration, order history, addresses
- Checkout - multi-step checkout flow, payment connection, order confirmation
- Data also via S3/FTP - for product feed exports in CSV/JSON format
This API is the handover point. Laioutr consumes it; WEBSALE delivers. Data ownership stays entirely with WEBSALE.
How Laioutr builds the connection
Laioutr uses a configurable connect layer (Orchestr) that normalizes REST APIs and translates them into a unified frontend data model. For WEBSALE, this means:
Step 1 - Configure API endpoints
In the Laioutr Cockpit, the WEBSALE API endpoints are registered (base URL, auth token, version path). No custom code required; the connector profile is configured, not programmed.
Step 2 - Data mapping
The connect layer maps WEBSALE data structures to the internal Laioutr schema. A product array from WEBSALE becomes a standard product object that all frontend components understand. This mapping is done once and then stable - future WEBSALE API updates are absorbed in the connect layer without requiring component changes.
Step 3 - Component connection
Laioutr's 70+ e-commerce components (product list, product detail, cart drawer, checkout flow, account dashboard) are validated against the normalized schema. They run after mapping without custom development.
Step 4 - Preview and launch
Marketing teams see live previews in the Studio editor with real WEBSALE product data. What the editor shows is what gets delivered live.
Product data: live API vs. feed
Laioutr has two paths for product data:
Live API (default): Product queries go directly to the WEBSALE Storefront API on every request. Price changes, inventory changes and product status are immediately visible, without cache invalidation logic.
Feed mode (for catalog pages): For very large catalogs (10,000+ products), Laioutr can ingest the WEBSALE product feed via S3/FTP and hold it in an optimized cache layer. Category pages then load from cache; detail pages fetch live prices and inventory.
No data duplication in the sense of a separate database: Laioutr does not store commerce data persistently. The cache layer is a read-through cache, not a separate PIM.
Cart and checkout
Cart state is managed per session in WEBSALE. Laioutr displays the cart drawer and triggers add-to-cart, update and remove via the WEBSALE API. The actual cart state lives on the WEBSALE side.
For checkout, there are two options:
Option A - WEBSALE checkout: Laioutr guides the user through to the checkout step and then hands off to the native WEBSALE checkout. Zero-touch for order logic and payment.
Option B - Laioutr headless checkout: Laioutr operates its own headless checkout layer that calls WEBSALE's order submission API on the backend. Marketing has full control over UX and conversion optimization of the checkout flow.
Which option fits better depends on the scope of B2B logic (price lists, approval processes, customer group pricing) and the desired level of UX control.
Customer accounts
Login, registration, order history, address management and account settings are handled via the WEBSALE API. Laioutr delivers the UI components for the account dashboard; backend-side data ownership stays entirely with WEBSALE.
This means: WEBSALE operators using B2B customer groups, individual price lists or approval workflows lose nothing. This logic stays in the WEBSALE backend; Laioutr simply presents it in the new frontend layer.
What no data duplication means
A common misconception with headless setups: "Now I have two systems I need to keep in sync."
With Laioutr, that is incorrect. Laioutr is not a second backend. There is no second database for products, prices or orders. The only persistent storage on the Laioutr side is the visual page content (which components are on which page, how hero banners, landing pages and category pages are structured). Commerce data comes from WEBSALE on every request.
EU hosting and GDPR
Laioutr operates the frontend layer in EU data centers. No data transfer to US jurisdictions, no Schrems II risk for commerce data. The WEBSALE backend already runs in a German ISO-27001-certified data center. The overall setup is fully EU-side.
For DACH operators with enterprise customers or privacy-sensitive assortments (health, B2B negotiated prices), this is not a nice-to-have but a requirement.
Performance after connection
Laioutr delivers frontend performance as a platform property:
- LCP median 1.2 s in live frontends (Q2 2026 field data)
- Lighthouse 100 out of the box (SSR plus edge caching)
- WCAG 3.0 / accessibility-compliant base components - no manual accessibility work after connection
These performance properties do not come from WEBSALE and not from custom code - they are a platform-layer characteristic.
What marketing teams control after connection
After the connection is live, the marketing team operates independently in the Studio editor:
- Change hero banners without engineering tickets
- Compose new landing pages from components (live preview with real WEBSALE product data)
- Build campaign pages in hours instead of sprints
- Run A/B tests at the component level
- Maintain multi-locale content for different markets in parallel
Engineering defines the components and guardrails - marketing composes.
Internal links
FAQ
Does anything need to be configured on the WEBSALE side?
No. The WEBSALE Storefront API is the only touchpoint. No WEBSALE-side plugin installation, no webhook setup by WEBSALE.
How secure is the API connection?
API calls run via HTTPS; tokens are managed server-side in Laioutr, not exposed in the browser. Standard security best practice for API-first integrations.
Do I need my own Next.js or Nuxt team?
No. Laioutr provides the frontend layer, built on Nuxt. Your team configures and composes without needing framework expertise.
How many WEBSALE API calls does Laioutr make?
That depends on traffic and the chosen caching mode. With feed mode for catalog pages and live API for transactional endpoints (cart, checkout, account), API volume is predictable and optimized.
What happens when WEBSALE changes the API version?
Version updates are absorbed in the connect layer. Component code does not change. The connect layer is the single adaptation point for API version changes.