Svelte Commerce on Spryker

What works on Spryker today

Known gaps: coupon — each is explained under Limitations below.

25 of 43 services wired, read from CONNECTORS.md on 21 September 2026, where the package version is recorded too; npm may carry a newer patch. Coverage is traced by a script in the Svelte Commerce repository: a service counts as wired only if it transitively issues an HTTP request, or delegates to one that does. It is not hand-asserted. Some services are Litekart-native concepts with no equivalent elsewhere (reels, deals, chat, gallery, popularity, demo-request, feedback, plugins, banner). They stay documented placeholders on every connector and are excluded from known gaps.

Quick start

From nothing to a Svelte Commerce storefront reading Spryker. You need Node.js and a Spryker to point it at; the storefront holds no data of its own.

# 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/spryker-connector

# 3 — point it at your Spryker Glue API
echo PUBLIC_SPRYKER_API_URL=https://your-store.example.com >> .env

# 4 — run it
npm run dev

Environment variables

init.ts hands the connector every PUBLIC_SPRYKER_* variable that is set, camel-cased: PUBLIC_SPRYKER_ANONYMOUS_CUSTOMER_ID arrives as anonymousCustomerId. The guide also lists PUBLIC_SPRYKER_API_KEY, PUBLIC_SPRYKER_API_SECRET, PUBLIC_SPRYKER_ACCESS_KEY and PUBLIC_SPRYKER_CHANNEL_ID; the connector’s source does not read them.

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 Spryker

• Name the store in PUBLIC_SPRYKER_STORE_ID if you run Dynamic Multistore: it travels as the Store header.
• Let the storefront’s origin make cross-origin requests to Spryker (CORS): in production the browser calls PUBLIC_SPRYKER_API_URL directly, not only the server.

How the integration works

Spryker’s Glue storefront API answers in JSON:API, and the connector ships a deserialiser that resolves included relationships (the jsonapi file in its source is that helper, not a service). The store travels as a Store header, the locale as Accept-Language, and a guest as X-Anonymous-Customer-Unique-Id.

Checkout in Spryker is two calls: POST /checkout-data, which says what is still missing and which payment and shipment methods this cart can use, and POST /checkout, which places the order. Payment is chosen by method and provider names configured per store. The connector wires both as getCheckoutData() and placeOrder(); the storefront’s per-gateway methods stay placeholders, because inventing them would mean guessing a store’s payment method names.

Installing the package is the whole switch. vite.config.ts resolves whichever @misiki/*-connector is installed, and src/lib/core/connectors/init.ts hands it every PUBLIC_SPRYKER_* variable that is set, camel-cased, at boot — in the server hook for server rendering and in the client hook for the browser, which must reach the same URL in production.

There is no Litekart API behind the storefront here, so store identity — name, logo, currency, menus, plugin toggles, theme colours — comes from src/lib/core/connectors/default-store.json merged under the default export of kitcommerce.config.ts. Until you override it, the store is called “Test”. Any Litekart REST path the connector still inherits is answered from that local data, or resolved empty, rather than requested.

Limitations

• The storefront cannot place an order. Checkout counts as wired because the connector reaches Spryker’s checkout endpoints, but the storefront’s payment step calls one method per gateway — cash on delivery, Razorpay, Stripe and the rest — and on Spryker each of those is a placeholder. The connector’s getCheckoutData() and placeOrder() are not called by the storefront yet.
• Coupons: not wired.
• Pages that depend on a service that is not wired render their empty state rather than failing.
• Homepage sections other than the live product list come from the active theme’s static content — the standing rule for themes.
• The Conversational Shopping assistant is Litekart-only; its widget stays hidden when another connector is active.

Troubleshooting

Before you rely on it