Skip to main content

SDK

A Webround site is code, and the store is reached with a few libraries. You will find them already installed in a site made from a Webround template, with the shop kit.

PackageWhat it is
@webround/commerceThe logic of a store: catalog, customers, cart and checkout. No interface and no framework.
@webround/commerce-reactWhat a React component needs to use it: hooks for the shop, the customer, the cart and the checkout. React 19 or later.
@webround/coreThe components and rules of a Webround site (WrText, WrImage, SEO, languages).

The store logic and the React part are separate on purpose: an adapter for another framework would be another package, and the logic would stay the same.

How it is built​

  • Layers. An HTTP client for each backend, the calls (catalog, customer, cart, checkout), a cache in memory that makes the same question one request, and above them the stores and the hooks. Each layer knows only the one below.
  • The store decides. The package never refuses a request that the store might accept: it does not validate. The store's answer comes back as it is, and an error is a CommerceError with a kind (http, network, timeout, aborted, parse), the server's code, for your interface to translate, and issues (the fields) for a validation. Types tell you at compile time when something is wrong; they never block a request.
  • Answers are not changed. What the API says is what you get, with no renaming or unwrapping.
  • Prices come from the server. The totals of a cart or of a checkout are always the store's: you show them, you do not calculate them.

In a Webround site​

A site already knows which store it belongs to. Import the store of the site and use it:

import { commerce } from '@webround/commerce-react/site';

commerce is made from the variables the draft's environment sets when it builds the site: VITE_WR_DRAFT_ID (the store's ID), VITE_WR_COMMERCE_API_URL, VITE_WR_CATALOG_API_URL and VITE_WR_CHECKOUT_API_URL. Nothing is made until you use it, and if one is missing the error says which.

For a front-end that is not a Webround site, build the store yourself with the three addresses: see createCommerce.