Svelte Commerce × Sylius
Svelte Commerce on Sylius
Solid core coverage: cart, checkout and sign-in are wired against Sylius’s shop API. Sylius picks the channel from the request’s host, so the URL you give the connector decides which channel the storefront sells from.
- 24/43 services wired
- @misiki/sylius-connector 0.4.0
- Cart wired
- Checkout wired
- Sign-in (auth) wired
What works on Sylius today
Cart, checkout and sign-in are wired; wishlist, vendors and CMS pages are not.
Cart
Wired: issues a real request to Sylius.
Checkout
Wired: issues a real request to Sylius.
Sign-in (auth)
Wired: issues a real request to Sylius.
Known gaps: wishlist, vendor, page
24 of 43 services wired, read from CONNECTORS.md on ; npm may carry a newer patch. How coverage is measured.
What the connector calls on Sylius
The connector calls the Sylius 2.1 shop API, a REST API in Hydra JSON-LD under /api/v2/shop, with Accept: application/ld+json on every request.
A shopper signs in with POST /api/v2/shop/customers/token, and the returned JWT goes out as Authorization: Bearer; the customer IRI from that response is kept in memory, localStorage and a cookie, because Sylius has no /customers/me, and with no refresh token in Sylius core a 401 means signing in again.
| Service | What it requests |
|---|---|
product | GET /api/v2/shop/products with translations.name, taxon (a taxon IRI), page, itemsPerPage and order[...]; a product page reads GET /products-by-slug/{slug}, then /product-variants?product=<IRI>, /product-options and /product-option-values |
category | GET /api/v2/shop/taxons, and GET /taxons/{code} or GET /taxons-by-slug/{slug} for one category |
cart | POST /api/v2/shop/orders with an empty object creates the cart; lines go through POST, PATCH and DELETE /orders/{tokenValue}/items, and a coupon through PUT /orders/{tokenValue} with couponCode |
checkout | GET /orders/{tokenValue}/payments/{id}/methods, then PATCH /orders/{tokenValue}/payments/{id} with the method IRI, then PATCH /orders/{tokenValue}/complete with notes |
order | GET /api/v2/shop/orders for the signed-in customer, GET /orders/{tokenValue} for one order, and GET /orders/{tokenValue}/shipments/{id} for tracking |
auth | POST /customers/token to sign in, POST /customers to register, POST /customers/reset-password and PATCH /customers/reset-password/{token} for a reset |
address | GET, POST, PUT and DELETE on /api/v2/shop/addresses |
payment-method | GET /api/v2/shop/payment-methods/{code} |
Sylius rules the connector follows
- Collections come back as
hydra:memberwith the total inhydra:totalItems, since Sylius sends no pagination headers, and the connector reads both the prefixed and the unprefixed keys. - Every
PATCHis sent asapplication/merge-patch+json, which is the only type Sylius accepts on that verb, and line quantity, shipping method, payment method and checkout completion are allPATCHcalls. - Sorting uses bracketed
order[field]parameters, and the connector drops any field that is not on its list (code,createdAt,priceandtranslation.namefor products) because Sylius ignores an unknown sort without an error. - The shop API is stateless, so the cart’s only handle is the
tokenValuein the body ofPOST /orders, which the connector stores and then replays as a path segment. - The connector leaves the
Authorizationheader off the token route, because a stale bearer token there is checked first and the credentials never reach the sign-in.
Read from the source of misiki-in/sylius-connector at commit 65a33bb of . Where the code has changed since, the code is right.
Quick start
From nothing to a Svelte Commerce storefront reading Sylius. You need Node.js and a Sylius to point it at; the storefront holds no data of its own.
Clone it, choose the connector, point it at Sylius
# 1 — get the storefront
git clone https://github.com/itswadesh/svelte-commerce
cd svelte-commerce
# 2 — one connector at a time: remove the two the storefront ships with, add this one
npm uninstall @misiki/litekart-connector @misiki/vendure-connector
npm i @misiki/sylius-connector
# 3 — point it at your Sylius channel
echo PUBLIC_SYLIUS_API_URL=https://your-store.example.com >> .env
# 4 — run it
npm run devSwitching works the same way on every backend: what all 26 share, from one connector at a time to store identity.
Environment variables
| Variable | Required | What it does |
|---|---|---|
PUBLIC_SYLIUS_API_URL | Yes | Your Sylius URL. Sylius picks the channel from this URL’s host — there is no channel header or parameter. Boot fails, naming this variable, if it is missing. |
PUBLIC_SYLIUS_LOCALE_CODE | No | Such as de_DE, sent as Accept-Language. Sylius falls back to the channel’s default locale. |
PUBLIC_SYLIUS_STORE_ID | No | Treated as the channel code, and used only to read that channel’s details. |
PUBLIC_SYLIUS_ACCESS_TOKEN | No | Sent as a bearer token when set. |
PUBLIC_CONNECTOR | No | Only when more than one connector is installed: @misiki/sylius-connector names the one this build runs on. |
init.ts hands the connector every PUBLIC_SYLIUS_* variable that is set, camel-cased. The guide also lists PUBLIC_SYLIUS_CHANNEL_ID, which cannot work against a stock install — the channel comes from the host — and PUBLIC_SYLIUS_API_KEY, PUBLIC_SYLIUS_API_SECRET and PUBLIC_SYLIUS_ACCESS_KEY, which the connector’s source does not read.
Every variable here begins PUBLIC_, and SvelteKit sends PUBLIC_ variables to the browser: treat each value you set as published.
What to set up on Sylius
- Point
PUBLIC_SYLIUS_API_URLat the hostname of the channel you want to sell from: Sylius resolves the channel from the request’s host.
How the integration works
The connector speaks Sylius’s shop API. The channel is whichever one Sylius matches to the host of PUBLIC_SYLIUS_API_URL; the locale travels as Accept-Language. The API documentation URL its authors were given was dead, so it was written from Sylius’s own source instead.
Before you rely on it
No connector has been exercised against a live production instance of its platform; each was written from the platform’s published source. The limits every backend shares and the errors every switch can meet are on the backends page.
Offer a sandbox or a correctionFAQ
Questions about Svelte Commerce on Sylius
Can I run a Sylius store on Svelte Commerce today?
Cart, checkout and sign-in are wired; wishlist, vendors and CMS pages are not. Like every connector, it has not been run against a live production Sylius store.
How do I switch Svelte Commerce to Sylius?
Remove the connectors the storefront ships with, install @misiki/sylius-connector, set PUBLIC_SYLIUS_API_URL in .env and start the dev server. vite.config.ts resolves whichever connector is installed, so no file in the storefront changes.
How does Svelte Commerce pick a Sylius channel?
By host. Sylius resolves the channel from the host of the request, so point PUBLIC_SYLIUS_API_URL at the channel’s hostname. There is no channel header or parameter to set instead.
Sources
SYLIUS.md, read on ; CONNECTORS.md, read on ; the connector’s source at 65a33bb. Where they disagree with this page, they are right. Sylius is a trademark of its owner, named only to describe compatibility; see trademarks.