Build E-Commerce with Open-Source Selldone — Fetch List of Products + Vue3 Sample
Published in
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-storefrontCode
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.
