Skip to content

Getting Started

Jump to bottom
Mehrdad Pajuhaan edited this page Oct 23, 2026 · 1 revision

Getting Started

This page takes you from an empty project to a page that lists the products of a Selldone shop. You will install the SDK (or load it from a CDN), add the meta tags that tell it which shop to talk to, call StorefrontSDK.Setup(), and fetch your first products.

Prerequisites

  • A shop on Selldone. You need its shop name (the handle in selldone.com/@your-shop). For experiments you can use the demo shop toysworld used throughout this wiki.
  • A browser environment. The SDK reads <meta> tags from document.head and stores preferences in localStorage, so it runs in the browser, not in Node.js server code.
  • For the npm route: Node.js and a bundler that can compile TypeScript dependencies, such as Vite. The SDK depends on @selldone/core-js, whose package entry is its TypeScript source.

Option A: npm and a bundler (Vue, React, …)

1. Install

npm install @selldone/sdk-storefront
# or
yarn add @selldone/sdk-storefront

@selldone/core-js, axios and lodash-es are installed as dependencies.

2. Add the meta tags

Put these tags in the <head> of your index.html. Replace toysworld with your shop name.

<!-- 🏬 Shop Name -->
<meta name="shop-name" content="toysworld">

<!-- 🎗 Prefix address of app Ex./my-shop-path -->
<meta name="shop-prefix-address" content="">

<!-- 📰 Shop custom page -->
<meta name="custom-home" content="shop">

<!-- 🪁 Service Origin -->
<meta content="https://selldone.com" name="service-url">

<!-- 🎯 APIs -->
<meta content="https://gapi.selldone.com" name="selldone-gapi">
<meta content="https://xapi.selldone.com" name="selldone-xapi">
<meta content="https://iframe.selldone.com" name="selldone-iframe">
<meta content="https://capi.selldone.com" name="selldone-capi">

<!-- 🌍 CDNs -->
<meta content="https://selldone.com/cdn-shop-images-1" name="selldone-cdn-images">
<meta content="https://selldone.com/cdn-shop-jsons-1" name="selldone-cdn-jsons">
<meta content="https://selldone.com/cdn-videos" name="selldone-cdn-videos">
<meta content="https://selldone.com/cdn-shop-temp-files" name="selldone-cdn-temp-files">
<meta content="https://selldone.com/cdn-ar" name="selldone-cdn-ar">
<meta content="https://selldone.com/cdn-id" name="selldone-cdn-id">
<meta content="true" name="storage-redirect">
<meta content="https://cdn.selldone.com" name="storage-redirect-host">
<meta content="true" name="storage-redirect-thumbnails">

When your storefront is deployed on Selldone as a Layout, the platform injects these tags for you. See Setup and Meta Tags for details.

3. Initialize the SDK

Call Setup() once, at app start-up, before any component uses window.$storefront. In a Vue app this is main.ts:

import { createApp } from "vue";
import App from "./App.vue";

// ━━━ Selldone Core (gapi,...) ━━━
import { SelldoneCore } from "@selldone/core-js";
SelldoneCore.Setup();

// ━━━ Storefront SDK (xapi) ━━━
import { StorefrontSDK } from "@selldone/sdk-storefront";
StorefrontSDK.Setup(); // Set up the Shop SDK.

createApp(App).mount("#app");

This is exactly how the Storefront Playground starts. If you skip SelldoneCore.Setup(), StorefrontSDK.Setup() runs it for you.

4. Fetch products

const { products, folders, total } = await window.$storefront.products.list(
  null, // category (null = home / all)
  0,    // offset
  12,   // limit
  { sort: "newest", with_total: true },
);

products.forEach((p) => console.log(p.id, p.title, p.price, p.currency));

Product images are file names on the Selldone CDN. Turn them into URLs with the CDN helper that Selldone Core puts on window:

const imageUrl = window.CDN.GET_SHOP_IMAGE_PATH(product.icon, 256); // second argument: size

Option B: one <script> tag

No build step needed. Add the meta tags from step 2, then:

<script src="https://cdn.jsdelivr.net/npm/@selldone/sdk-storefront@1/dist/bundle.min.js"></script>
<script>
  // Use the global variable StorefrontSDK
  const sdk = storefront.StorefrontSDK;
  sdk.Setup();

  window.$storefront.products
    .list(null, 0, 10, { sort: "most_popular" })
    .then(({ products }) => {
      document.body.insertAdjacentHTML(
        "beforeend",
        products.map((p) => `<p>${p.title}: ${p.price} ${p.currency}</p>`).join(""),
      );
    });
</script>

The browser bundle exposes everything under the global name storefront. Pin a major version (@1) or an exact version instead of @latest to avoid unexpected breaking changes.

Check that it works

Open the browser console. After Setup() you should see a banner like Selldone® Storefront SDK | V… followed by ✅ Selldone® Storefront SDK [@toysworld] initialized successfully. If you see ❌ The shop name is not specified in the meta tag with the name 'shop-name'., the meta tag is missing or Setup() ran before the <head> was parsed. More fixes are in the FAQ.

Next steps

Selldone® Business OS · Open-source ecosystem · storefront-sdk repository · Report an issue · Security

Storefront SDK

Guides

Ecosystem

Links

Clone this wiki locally