Build E-Commerce with Open-Source Selldone — Fetch List of Products + Vue3 Sample

3 min readMay 13, 2024

In this article, I’ll guide you through fetching products from a shop using Selldone. Selldone offers a beautifully designed workspace equipped to handle millions of orders while providing the flexibility to craft a fully customized website. With Selldone, you can efficiently manage products, payments, and orders, all within a user-friendly environment. Whether you’re looking to streamline your operations or enhance your online presence, Selldone has the tools you need to succeed.

SDK Source: https://github.com/selldone/storefront-sdk

Live Sample Code: https://codepen.io/pajuhaan/pen/pomvQWr

Add Package

npm install @selldone/sdk-storefront

# or

yarn add @selldone/sdk-storefront

Code

Incorporate Meta Tags for Selldone Integration

To integrate your web application with the Selldone ecosystem effectively, it’s essential to embed specific meta tags within the <head> section of your HTML. These tags enable the Selldone SDK to establish a connection with the Selldone API, facilitating the retrieval of your shop's data.

<!-- 🏬 Specify the shop's name -->
<meta name="shop-name" content="toysworld">

<!-- 🎗 Set the app's prefix address, for example: /my-shop-path -->
<meta name="shop-prefix-address" content="">

<!-- 📰 Define a custom homepage for the shop -->
<meta name="custom-home" content="shop">

    <!-- ―――――――――――――――― Start ❯ Business OS Configuration ―――――――――――――――― -->

    <!-- 🪁 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">

Storefront SDK — Global Initialize

// ━━━ 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.

Fetch Products

/**
 * Handles the success response from the storefront API fetch call.
 * Updates the internal state with the new data fetched.
 * 
 * @param {Object} response - The response object from the API.
 * @param {Array} response.products - Array of product objects.
 * @param {number} response.total - Total number of products.
 * @param {Array} response.folders - Array of folder objects.
 * @param {Object} response.parent - The parent category object.
 */
const handleSuccessResponse = ({ products, total, folders, parent }) => {
  this.products_count = total;
  this.products = products;
  this.folders = folders;
};

/**
 * Initiates a fetch operation for products with various filtering and sorting options.
 * 
 * @param {string} dir - Category ID from which to fetch products.
 * @param {boolean} offset - Flag to determine if more products should be loaded.
 * @param {number} limit - Maximum number of products to fetch.
 * @param {Object} options - Options for fetching products.
 * @param {number} options.categories_count - Number of categories to fetch.
 * @param {boolean} options.with_parent - Include the parent category in the response.
 * @param {boolean} options.with_page - Include linked custom page of the current category.
 * @param {string|null} options.sort - Sorting criteria for the products.
 * @param {boolean} options.available - Whether to only include available items.
 * @param {string|null} options.search - Search term to filter products.
 * @param {string|null} options.search_type - Type of search filtering.
 * @param {Array|null} options.dirs - Array of category IDs to filter the items.
 * @param {Object|null} options.filter - Additional filters.
 * @param {boolean} options.products_only - Return only products.
 * @param {boolean} options.categories_only - Return only categories.
 * @param {boolean} options.with_total - Include the total count of products.
 * @param {Object|null} options.bounds - Geographic constraints for product search.
 * @param {Array|null} options.tags - Filter by product tags.
 * @param {number|null} options.vendor_id - Filter products by vendor ID.
 * @param {boolean} options.surrounded - Determines the inclusion of selected categories.
 */
window.$storefront.products
  .optimize(600) // Cache products for 600 seconds
  .fetchProducts(null, 0, 10, {
    categories_count: 10,
    with_parent: true,
    with_page: true,
    sort: null,
    available: false,
    search: null,
    search_type: null,
    dirs: null,
    filter: null,
    products_only: false,
    categories_only: false,
    with_total: true,
    bounds: null,
    tags: null,
    vendor_id: null,
    surrounded: false,
  })
  .cache(handleSuccessResponse)
  .then(handleSuccessResponse)
  .catch((error) => {
    // log error
  })
  .finally(() => {
    // ...
  });

Storefront SDK + Vue 3 + TypeScript + Vite

Here’s a basic implementation of the SDK using the Vue3 framework.

GitHub - selldone/storefront-playground: A simple implementation of the storefront SDK with Vue3 +…

A simple implementation of the storefront SDK with Vue3 + Vite - selldone/storefront-playground

github.com