SitePack JavaScript SDK
The SitePack SDK is a browser-side JavaScript library that lets theme and app developers talk to the storefront safely — reading products, managing the cart, running searches, fetching content, generating leads, and more — without ever hand-writing fetch calls or worrying about CSRF, rate limiting, or endpoint URLs.
It is automatically injected on every storefront page, so there is nothing to install or bundle. A ready-to-use instance is available immediately, and you can create your own named instances for your theme or app.
Who is this for?
- Theme developers — add dynamic behaviour to Twig themes: add-to-cart buttons, live stock badges, instant search, cart drawers, address auto-fill.
- App developers — build storefront-facing app blocks that read and write commerce data through a single, governed interface.
Both audiences use the exact same SDK; the only difference is the type you pass when you create an instance ('theme' or 'app').
Why use the SDK instead of fetch?
- Authentication & CSRF — every request is automatically signed with the page's CSRF token and bound to the current site.
- Rate limiting — a client-side token bucket smooths out bursts; the server enforces its own per-IP limits on top.
- Request queueing — concurrent calls are queued (max 2 in flight) so you don't hammer the storefront.
- Cross-tab cart sync — cart changes broadcast to every open tab and instance via a
sitepack:cart:updatedevent. - One stable surface — endpoint URLs and payload shapes can evolve behind the SDK without breaking your theme or app.
The module map
The SDK groups functionality into modules, reachable as properties on an instance:
| Module | Access | What it does |
|---|---|---|
| Ecommerce | sdk.ecommerce | Products, cart, checkout info, categories, stock, address lookup |
| Account | sdk.account | Customer info, login, password reset |
| Content | sdk.content | Pages, sitemap, legal policies |
| Search | sdk.search | Storefront search |
| Leads | sdk.leads | Lead capture |
| Newsletter | sdk.newsletter | Subscribe / unsubscribe visitors |
| USPs | sdk.usps | The site's USPs (global — the same set everywhere) |
| Events | sdk.events | The agenda (upcoming / past / all) |
| Payments | sdk.payments | Order/payment status |
| UI | sdk.ui | Iframe height, host notifications |
| Cookies | sdk.cookies | First-party cookie helpers |
Plus two convenience methods directly on the instance: sdk.generateLead(...) and sdk.contactSiteOwner(...).
Next steps
- Getting Started — initialize the SDK and make your first call.
- Ecommerce — products, cart, and checkout.
- Security & Rate Limiting — how requests are protected and how to stay within the limits.
- API Reference — every method at a glance.