Sylius API

How FrontWing communicates with Sylius API

FrontWing is a headless frontend built with React + Remix. It connects to the Sylius backend using the Sylius Shop API v2 (e.g. http://127.0.0.1:8000/api/v2/).

You can test and browse the API using the built-in API Platform Swagger interface.

Main API endpoints used

Purpose	Method	Endpoint Example
Product listing	GET	/api/v2/shop/products?channel=...&locale=...
Product details	GET	/api/v2/shop/products/:code
Add to cart	POST	/api/v2/shop/orders/:token/items
Get current order	GET	/api/v2/shop/orders/:token
Create empty cart	POST	/api/v2/shop/orders
Remove item from cart	DELETE	/api/v2/shop/orders/:token/items/:itemId
Taxon tree	GET	/api/v2/shop/taxon-tree/MENU_CATEGORY/branch
Reviews	GET	/api/v2/shop/products/:code/reviews
Create review	POST	/api/v2/shop/products/:code/reviews
Auth (login)	POST	/api/v2/shop/customers/token
Customer profile	GET	/api/v2/shop/customers/me

Server-side rendering & Remix loaders

FrontWing uses Remix loaders to prefetch data before hydration. For example, on the product page, it loads:

• Product data

• Variants

• Associations

• Reviews

• Attributes

It uses Promise.all or defer() + <Await> to lazy-load parts of the data in parallel, improving Time to First Byte (TTFB).

Client-side logic and React context

Once the page is hydrated in the browser, FrontWing manages API interactions using React context:

• OrderContext is responsible for:

  • Creating and storing the order token (cookie-based)

  • Reusing it across sessions

  • Syncing it with the Sylius backend

• All cart and order requests are sent with the token

• Actions like adding/removing items use fetch with appropriate headers

🔧 Testing & debug tips

• Open http://127.0.0.1:8000/api/v2/ or API Docs for the full Swagger documentation.

• Use curl or Postman to try endpoints manually.

• Common headers:

Accept: application/ld+json
Content-Type: application/ld+json