Storefront vs Backoffice

Storefront vs Backoffice

Storefront (S*) and backoffice (B*) components look alike in code, but they run in different contexts and call different Selldone APIs. This page explains what each family expects from the host app so components work the first time.

At a glance

	Storefront (S*)	Backoffice (B*)
Audience	Shop customers	Merchants, staff, vendors
Typical host	A Selldone Layout such as the Storefront	The Selldone dashboard or your own admin tool
SDK	Storefront SDK: StorefrontSDK.Setup()	Backoffice SDK: BackofficeSDK.Setup()
Globals used	window.$storefront, window.XAPI	window.$backoffice, window.API
Authentication	Customer token (cookie access_token by default)	Merchant access token
Injected	$shop (current shop), sometimes $product	$shop (the admin shop) in many components
Store getters (examples)	getUser, getProductsComparison, getCoupons	getCurrentAdminShop, getCountries, getOrderSendingQue

Generic U* components work in both contexts. C* community components need the Community SDK (window.$community).

Using storefront components

1. Set up the Storefront SDK once at startup:

   import { StorefrontSDK } from "@selldone/sdk-storefront";
   StorefrontSDK.Setup(); // reads the shop name and API URLs from meta tags

2. Provide the current shop from your root component:

   provide() {
     return { $shop: computed(() => this.shop) };
   }

3. Use a Vuex store with the getters your components read (for example getUser). The Storefront store is the reference implementation.

4. Import and render components:

   <s-shop-basket-items-list v-if="basket" :basket="basket" :items="basket.items" />

The Storefront already does all of this. If you start a new Layout, fork it or follow the Storefront wiki.

Using backoffice components

1. Set up the Backoffice SDK. Calls need a valid access token from the developer panel; see Access Token for the options:

   import { BackofficeSDK } from "@selldone/sdk-backoffice";
   BackofficeSDK.Setup(); // creates window.API and window.$backoffice

2. Provide $shop with the shop you manage, and a Vuex store if the component reads one.

3. Import components by path, for example:

   import BInventoryList from "@selldone/components-vue/backoffice/inventory/list/BInventoryList.vue";

Backoffice components call dashboard endpoints through window.API (more than 200 files do), so they only work against a Selldone account with the right permissions. The dashboard API is rate limited; see the Backoffice SDK README and wiki.

Which family should I pick?

• Building a shop experience for customers? Use S* and U* components with the Storefront SDK.
• Building a custom dashboard, an integration screen or an internal tool? Use B* and U* components with the Backoffice SDK.
• Need only generic widgets (prices, date pickers, maps, charts)? Use U* components; they have the fewest dependencies.

Next steps

• Component Families
• Installation and Registration
• Storefront SDK wiki
• Backoffice SDK wiki