Svelte Commerce × Virto Commerce
Svelte Commerce on Virto Commerce
Targeting Virto Commerce meant choosing which of its API generations to wire against; the connector speaks its GraphQL API. Cart, checkout and sign-in are wired, and CONNECTORS.md records no gaps.
- 28/43 services wired
- @misiki/virto-connector 0.4.0
- Cart wired
- Checkout wired
- Sign-in (auth) wired
What works on Virto Commerce today
Cart, checkout and sign-in are wired, and no gaps are recorded. Orders are placed through the payment methods the Virto store itself exposes; a gateway the store has not configured is refused with a message saying so.
Cart
Wired: issues a real request to Virto Commerce.
Checkout
Wired: issues a real request to Virto Commerce.
Sign-in (auth)
Wired: issues a real request to Virto Commerce.
Known gaps: none recorded.
28 of 43 services wired, read from CONNECTORS.md on ; npm may carry a newer patch. How coverage is measured.
What the connector calls on Virto Commerce
The connector calls Virto Commerce’s xAPI, a GraphQL schema served at POST <PUBLIC_VIRTO_COMMERCE_API_URL>/graphql, and leaves the /api/... REST controllers alone because they are the back-office API and need platform permissions a shopper token never holds.
A shopper signs in through OpenIddict at POST /connect/token, form-encoded, with grant_type=password, scope=offline_access and the storeId; the connector sends the access token back as Authorization: <token_type> <access_token> and, on a 401, tries the refresh_token grant once before giving up.
| Service | What it requests |
|---|---|
product | products with storeId, userId, cultureName, currencyCode, filter, query, sort, first and after; a product page runs slugInfo(permalink:) and then product(id:) |
category | categories with storeId, filter, query, sort, first and after, and products with the filter category.subtree:{catalogId}/{categoryId} for a category’s products |
search | products with Virto’s filter grammar (quoted property values, price.usd:[100 TO 200), category.subtree:) plus facet |
cart | the cart query, and the addItem, changeCartItemQuantity, removeCartItem, clearCart, addCoupon and removeCoupon mutations, each taking a command with a non-null userId |
checkout | cart { availablePaymentMethods }, then addOrUpdateCartPayment with the paymentGatewayCode, createOrderFromCart, initializePayment and, on return, authorizePayment |
order | orders with userId, cultureName, filter, sort (default createddate:desc), first and after |
auth | POST /connect/token, then me; registration through requestRegistration, resets through sendPasswordResetEmail and resetPasswordByToken |
address | currentCustomerAddresses, updateMemberAddresses and deleteMemberAddresses |
Virto Commerce rules the connector follows
- GraphQL answers HTTP 200 even when an operation fails, so the connector throws on a non-empty
errorsarray, and it checks thevalidationErrorsthat many mutations return insidedata. - The
afterargument looks like a cursor but is a numeric offset,(page - 1) * first, and page totals come fromtotalCountin the response body. - Products and categories cannot be fetched by slug, so a product page costs two queries:
slugInfo(permalink:)for the object id, thenproduct(id:). - A shopper who has not signed in is Virto’s anonymous user, carried by a cookie, so every request goes out with
credentials: 'include', and the platform’s CORS settings must allow credentials from the storefront’s origin or the anonymous cart is lost. - Sort arguments go out in Virto’s
field:directionform joined by;, withcreatedAtsent ascreateddateandpopularityaspriority.
Read from the source of misiki-in/virto-connector at commit 2d743bc of . Where the code has changed since, the code is right.
Quick start
From nothing to a Svelte Commerce storefront reading Virto Commerce. You need Node.js and a Virto Commerce to point it at; the storefront holds no data of its own.
Clone it, choose the connector, point it at Virto Commerce
# 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/virto-connector
# 3 — point it at your Virto Commerce platform
echo PUBLIC_VIRTO_COMMERCE_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_VIRTO_COMMERCE_API_URL | Yes | Base URL of your Virto Commerce platform. Boot fails, naming this variable, if it is missing. |
PUBLIC_VIRTO_COMMERCE_STORE_ID | No | The Virto store the storefront serves. |
PUBLIC_VIRTO_COMMERCE_CULTURE_NAME | No | Such as en-US. Passed on nearly every catalogue, cart and order query; read once from the store if unset. |
PUBLIC_VIRTO_COMMERCE_CURRENCY_CODE | No | Such as USD. Passed on every priced query; read once from the store if unset. |
PUBLIC_VIRTO_COMMERCE_CATALOG_ID | No | Needed to filter products by category; read once from the store if unset. |
PUBLIC_VIRTO_COMMERCE_ACCESS_TOKEN | No | An access token to start from, sent in the Authorization header. |
PUBLIC_CONNECTOR | No | Only when more than one connector is installed: @misiki/virto-connector names the one this build runs on. |
init.ts hands the connector every PUBLIC_VIRTO_COMMERCE_* variable that is set, camel-cased — the prefix follows the product, not the package, which is virto-connector. The guide also lists PUBLIC_VIRTO_COMMERCE_API_KEY, PUBLIC_VIRTO_COMMERCE_API_SECRET, PUBLIC_VIRTO_COMMERCE_ACCESS_KEY and PUBLIC_VIRTO_COMMERCE_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 Virto Commerce
- Configure the payment methods you want shoppers to use on the Virto store itself: the connector places orders through
cart.availablePaymentMethods, and refuses a gateway the store does not offer.
How the integration works
The connector speaks Virto Commerce’s GraphQL API, which wants culture, currency and catalogue as explicit arguments on most operations. Whatever you leave unset is read once from the store’s own record and remembered. Checkout places the order with a payment method the store exposes, matched by name — or, for cash on delivery, by a manual payment method.
Limitations on Virto Commerce
- No gaps are recorded for Virto Commerce in CONNECTORS.md.
Troubleshooting Virto Commerce
| When you see | What to do |
|---|---|
| Boot fails with “the virto connector is active but PUBLIC_VIRTO_COMMERCE_API_URL is not set” | Add PUBLIC_VIRTO_COMMERCE_API_URL to .env. A production Node build and Docker read PUBLIC_* from the process environment rather than .env, so set it on your deploy platform too. |
| The build stops with “Several commerce connectors are installed … Set PUBLIC_CONNECTOR to pick one” | More than one @misiki/*-connector is in package.json and none is Litekart’s. Uninstall the ones you do not run — a fresh clone also lists @misiki/vendure-connector — or set PUBLIC_CONNECTOR='@misiki/virto-connector'. |
[virto] no native implementation for get /api/... in the console | The connector’s REST guard caught a path inherited from Litekart and answered it empty instead of requesting it. Each path is reported once. Harmless if Virto Commerce has no such feature; if it has one, the fix belongs in the connector’s matching service. |
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 Virto Commerce
Can I run a Virto Commerce store on Svelte Commerce today?
Cart, checkout and sign-in are wired against Virto’s GraphQL API and no gaps are recorded. Orders go through the payment methods your Virto store exposes. Like every connector, it has not been run against a live production Virto store.
How do I switch Svelte Commerce to Virto Commerce?
Remove the connectors the storefront ships with, install @misiki/virto-connector, set PUBLIC_VIRTO_COMMERCE_API_URL in .env and start the dev server. vite.config.ts resolves whichever connector is installed, so no file in the storefront changes.
Which payment methods can shoppers use on Virto Commerce?
The ones your Virto store exposes through cart.availablePaymentMethods. Cash on delivery maps to a manual payment method; a gateway the store has not configured is refused with a message saying so, rather than faked.
Sources
VIRTO-COMMERCE.md, read on ; CONNECTORS.md, read on ; the connector’s source at 2d743bc. Where they disagree with this page, they are right. Virto Commerce is a trademark of its owner, named only to describe compatibility; see trademarks.