Skip to main content

​
Svelte Themes

You can build a Shoppex theme with Svelte (for example, @sveltejs/vite-plugin-svelte). The platform contract stays the same:
  • bun install
  • bun run build
  • build output in dist/index.html

​
Minimal SDK Wiring (Framework-Agnostic)

// @validate
import shoppex from '@shoppex/sdk';

shoppex.init('my-shop', { apiBaseUrl: 'https://api.shoppex.io' });

const res = await shoppex.getStorefront();
if (!res.success || !res.data) {
  throw new Error(res.message ?? 'Failed to load storefront');
}

console.log(res.data.products.length);
In Svelte you would typically store the result in a store (or component state) and render it.

​
Optional: Initial Data Injection

If your index.html contains: 
<!--initial-data-->
Shoppex can inject initial data at build time.

​
Svelte Store Pattern

Use Svelte’s writable stores to manage storefront data: 
// stores/store.ts
// In a real Svelte app:
// import { writable } from 'svelte/store'

declare function writable<T>(initial: T): {
  subscribe: (run: (value: T) => void) => () => void;
  set: (value: T) => void;
};

// assumes shoppex is available (via SDK import in your app entry)
declare const shoppex: any

export const storeData = writable(null)
export const products = writable([])
export const isLoading = writable(true)

export async function loadStorefront() {
  const res = await shoppex.getStorefront()
  if (res.success && res.data) {
    storeData.set(res.data.shop)
    products.set(res.data.products)
  }
  isLoading.set(false)
}

​
Cart Store with Event Listener

A reactive cart store that stays in sync across components: 
// stores/cart.ts
// In a real Svelte app:
// import { writable } from 'svelte/store'

declare function writable<T>(initial: T): {
  subscribe: (run: (value: T) => void) => () => void;
  set: (value: T) => void;
};

// assumes shoppex is available (via SDK import in your app entry)
declare const shoppex: any

export const cart = writable([])

// Call this after `shoppex.init()` (for example in your root component's onMount)
export function startCartSync() {
  const refresh = () => cart.set(shoppex.getCart())
  refresh()

  window.addEventListener('shoppex:cart-changed', refresh)
  window.addEventListener('storage', refresh)

  return () => {
    window.removeEventListener('shoppex:cart-changed', refresh)
    window.removeEventListener('storage', refresh)
  }
}

export function addItem(productId, variantId) {
  shoppex.addToCart(productId, variantId)
  window.dispatchEvent(new CustomEvent('shoppex:cart-changed'))
}