Svelte Commerce × Shuup
Svelte Commerce on Shuup
Solid core coverage for a smaller API: cart, checkout and sign-in are wired against Shuup’s REST API. Coupons, reviews, CMS pages, countries, states and wishlist are the recorded gaps.
- 19/43 services wired
- @misiki/shuup-connector 0.5.0
- Cart wired
- Checkout wired
- Sign-in (auth) wired
What works on Shuup today
Cart, checkout and sign-in are wired; coupons, reviews, CMS pages, countries, states and wishlist are not.
Cart
Wired: issues a real request to Shuup.
Checkout
Wired: issues a real request to Shuup.
Sign-in (auth)
Wired: issues a real request to Shuup.
Known gaps: coupon, review, page, country, state, wishlist
19 of 43 services wired, read from CONNECTORS.md on ; npm may carry a newer patch. How coverage is measured.
What the connector calls on Shuup
The connector calls Shuup’s Django REST Framework API under /api/shuup/, with the JWT views at /api/api-token-auth/ and /api/api-token-refresh/, an API that its source says exists only in Shuup 1.9.x and earlier.
A shopper signs in through POST /api/api-token-auth/, and the JWT that comes back in the body is sent as Authorization: JWT <token>, kept in localStorage and a cookie under access_token, and re-issued once through POST /api/api-token-refresh/ when a call answers 401; HTTP Basic from the key and secret is used only when no token is set.
| Service | What it requests |
|---|---|
product | GET /api/shuup/front/shop_products/ with shop, ordering, limit and offset, GET /api/shuup/front/shop_products/{id}/ for one product and GET /api/shuup/front/shop_products/best_selling/ for trending |
category | GET /api/shuup/category/ with identifier and status=1 to turn a handle into a numeric id, and GET /api/shuup/category/{id}/ |
search | GET /api/shuup/front/shop_products/ with categories, ordering and paging; a free-text query returns an empty result instead of a request |
cart | POST /api/shuup/basket/new/ (with shop when a store id is set), GET /api/shuup/basket/{uuid}/, and POST to add/, update_quantity/, remove/ and clear/ under that basket |
checkout | POST /api/shuup/basket/{uuid}/set_shipping_address/, set_billing_address/ and set_shipping_method/, then POST /api/shuup/basket/{uuid}/create_order/ |
payment-method | GET /api/shuup/basket/{uuid}/, reading its available_payment_methods |
order | GET /api/shuup/front/orders/ (filtered by identifier) and GET /api/shuup/front/orders/{id}/ |
address | GET and PATCH /api/shuup/front/user/me/, which carry the contact’s default billing and shipping addresses |
Shuup rules the connector follows
- Every route ends in a slash, and the connector adds one centrally, because a missing slash triggers a Django 301 redirect that drops the POST body.
- Lists page with
limitandoffset, notpage, and the connector always sendslimit, since without it Shuup returns a bare array with nocount. - The
categoriesfilter takes numeric ids only and a non-numeric value causes a 500, so a category handle is first looked up throughGET /api/shuup/category/?identifier=, and an unresolved handle gives an empty result rather than the whole catalogue. - Sorting accepts only
name,priceandnewestinordering, and there is no free-text search parameter, so a text search returns nothing. - Every API viewset is admin-only until a store admin raises its
api_permission_<ViewSetName>level, so the connector names that setting in the error whenever Shuup answers 403.
Read from the source of misiki-in/shuup-connector at commit a73ec80 of . Where the code has changed since, the code is right.
Quick start
From nothing to a Svelte Commerce storefront reading Shuup. You need Node.js and a Shuup to point it at; the storefront holds no data of its own.
Clone it, choose the connector, point it at Shuup
# 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/shuup-connector
# 3 — point it at your Shuup shop
echo PUBLIC_SHUUP_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_SHUUP_API_URL | Yes | Your Shuup shop’s URL. Boot fails, naming this variable, if it is missing. |
PUBLIC_SHUUP_ACCESS_TOKEN | No | A JWT, sent as Authorization: JWT <token> — Shuup accepts neither Token nor Bearer. |
PUBLIC_SHUUP_API_KEY | No | HTTP Basic username, used when no token is set; meant for server-to-server calls. See the limitations. |
PUBLIC_SHUUP_API_SECRET | No | HTTP Basic password, with the username above. |
PUBLIC_CONNECTOR | No | Only when more than one connector is installed: @misiki/shuup-connector names the one this build runs on. |
init.ts hands the connector every PUBLIC_SHUUP_* variable that is set, camel-cased. The guide also lists PUBLIC_SHUUP_ACCESS_KEY, PUBLIC_SHUUP_STORE_ID and PUBLIC_SHUUP_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.
How the integration works
Shuup’s REST API accepts HTTP Basic, session and JWT authentication. The connector sends a JWT as Authorization: JWT <token> — the header prefix Shuup’s JWT library expects — and falls back to HTTP Basic when it has a username and password instead.
Limitations on Shuup
- If you set
PUBLIC_SHUUP_API_KEYandPUBLIC_SHUUP_API_SECRETfor HTTP Basic, those credentials reach every visitor: SvelteKit sendsPUBLIC_variables to the browser.
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 Shuup
Can I run a Shuup shop on Svelte Commerce today?
Cart, checkout and sign-in are wired; coupons, reviews, CMS pages, countries, states and wishlist are not. Like every connector, it has not been run against a live production Shuup shop.
How do I switch Svelte Commerce to Shuup?
Remove the connectors the storefront ships with, install @misiki/shuup-connector, set PUBLIC_SHUUP_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 the connector authenticate with Shuup?
With a JWT, sent as Authorization: JWT <token>. Shuup does not install token authentication, so Token and Bearer headers are both refused. HTTP Basic is the fallback, meant for server-to-server calls.
Sources
SHUUP.md, read on ; CONNECTORS.md, read on ; the connector’s source at a73ec80. Where they disagree with this page, they are right. Shuup is a trademark of its owner, named only to describe compatibility; see trademarks.