Home

Welcome to the Selldone Storefront SDK Home Wiki!

Thank you for visiting the official GitHub Wiki of Selldone Storefront SDK, your premier solution for creating intuitive, powerful, and seamless ecommerce storefronts. Our SDK is designed to empower developers, whether you are building a simple online shop for a small business or crafting a multifaceted ecommerce platform for large enterprises.

In this repository, you'll find comprehensive resources that guide you through the integration of the Selldone Storefront SDK into your application. We cover everything from basic setup and configuration to advanced customization, ensuring that you have all the tools necessary to create an engaging and functional shopping experience.

By leveraging the capabilities of the Selldone Storefront SDK, you're choosing an innovative, scalable, and secure approach to ecommerce development. Dive into our guides, explore code samples, share your insights, and join our community in redefining online commerce solutions.

Incorporate Meta Tags in Head

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

Setup

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

Fetsh products

Fetch the list of 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(() => {
    // ...
  });