Fetching Products

Fetching Products

This page walks through the three source files that matter in the playground: src/main.ts (SDK setup), src/App.vue (root component) and src/components/FetchProducts.vue (the API call and rendering). Together they are a complete example of reading catalog data with the Storefront SDK.

1. Setup — src/main.ts

import { createApp } from 'vue'
import './style.css'
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')

• SelldoneCore.Setup() initializes shared services (global API, helpers). If you skip it, StorefrontSDK.Setup() calls it for you and logs a notice.
• StorefrontSDK.Setup() reads the shop from the shop-name meta tag, configures Axios and creates the globals window.$storefront, window.CDN, window.XAPI and window.URLS.

2. Root component — src/App.vue

<script setup lang="ts">
import FetchProducts from "./components/FetchProducts.vue";
</script>

<template>
  <div>
   Selldone Storefront - SDK
  </div>
  <FetchProducts />
</template>

3. The API call — src/components/FetchProducts.vue

State

import {ref} from 'vue'
import {Product} from "@selldone/core-js/models/shop/product/product.model.ts";
import {Category} from "@selldone/core-js/models/shop/category/category.model.ts";

const products_count = ref(0)
const i_products = ref<Product.IProduct[]>([])
const i_folders = ref<Category.ICategory[]>([])

The types come from @selldone/core-js. The response type xapi.products.get.IResponse is a global type declared by the Storefront SDK.

Request

const handleSuccessResponse = ({products, total, folders, parent}: xapi.products.get.IResponse) => {
  products_count.value = total;
  i_products.value = products;
  i_folders.value = folders;
  console.log(products, total, folders, parent)
};

window.$storefront.products
    .optimize(600) // Cache products for 600 seconds
    .fetchProducts(null, 0, 10, {
      categories_count: 10,
      with_parent: true,
      with_page: true,
      with_total: true,
    })
    .cache(handleSuccessResponse)
    .then(handleSuccessResponse)
    .catch(() => {
      // log error
    })
    .finally(() => {
      // ...
    });

Part	Meaning
optimize(600)	If the same request was cached less than 600 seconds ago, return the cached data without calling the server.
fetchProducts(null, 0, 10, {...})	Arguments are dir (category to list, null for the root), offset (0), limit (10) and options: up to 10 categories, the parent, page data and the total count.
.cache(handler)	When a request is sent, call the handler immediately with previously cached data, so the UI is not empty while loading. Must be called before .then().
.then(handler)	Receive the response: products, total, folders (categories) and parent.

In recent Storefront SDK versions, fetchProducts is a deprecated alias of window.$storefront.products.list(...). Prefer list in new code; the arguments are the same because both point to the same function.

Images

const getShopImagePath = (path: string | null,
                          size: number | null = null,
                          random_fill: boolean | number = false) =>
  window.CDN.GET_SHOP_IMAGE_PATH(path, size, random_fill)

The template calls getShopImagePath(product.icon!, 128) and getShopImagePath(folder.icon, 128) to show 128 px icons from the shop CDN.

Template

The component renders:

• a Fetch Products Now button that calls the request,
• Total products is {{ products_count }},
• a Products list with icon, title, price, currency and discount,
• a Categories list with icon and title.

Ideas for your next experiment

All of these use the same window.$storefront instance; see the Storefront SDK documentation for exact signatures.

• Load a single product with window.$storefront.products.get(product_id).
• Paginate by changing the offset and limit.
• List a category by passing it as the dir argument instead of null.

Related

• Shop Configuration
• Project Structure
• Storefront SDK wiki