Product List Tool for EverShop

A Editor.js block tool that lets an editor build an ordered list of products: search & add, remove, and drag-reorder them. Each card shows the product thumbnail, name, SKU, price, stock and status.

It is a sibling of @evershop/editorjs-image and follows the same conventions (Vite library build, CSS injected by JS, @codexteam/icons).

How it works

The tool ships its own search modal. It stays GraphQL-agnostic: you give it a searchProducts(keyword, { page, limit }) function and it handles the search box, debouncing, pagination, multi-select and the selected-state UI. In EverShop that function runs the admin products(filters: [...]) query. On the storefront the saved snapshot is rendered with EverShop's <ProductList/> component.

Usage

import ProductListTool from "@evershop/editorjs-product-list";

const editor = new EditorJS({
  tools: {
    productList: {
      class: ProductListTool,
      config: {
        defaultColumns: 4,
        pageSize: 20,
        searchProducts: async (keyword, { page, limit }) => {
          const res = await fetch(`/api/products?q=${keyword}&page=${page}&limit=${limit}`);
          const { items, total } = await res.json();
          return { items, total }; // items: ProductItem[]
        },
      },
    },
  },
});

Config

| Option | Type | Description | | ------------------ | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | searchProducts | (keyword: string, opts: { page: number; limit: number }) => Promise<{ items, total }> | Data source for the built-in search modal. | | defaultColumns | number | Storefront grid columns for new blocks (default 4). | | pageSize | number | Page size for the search modal (default 20). | | onSelectProducts | (current: ProductItem[], onSelect: (products: ProductItem[]) => void) => void | Optional override — supply your own picker instead of the built-in modal. Takes precedence. | | placeholder | string | Empty-state text. |

Saved data

{
  "type": "productList",
  "data": {
    "columns": 4,
    "products": [
      {
        "productId": 1,
        "uuid": "…",
        "sku": "TSHIRT-RED-M",
        "name": "Cool T-Shirt",
        "url": "/cool-t-shirt",
        "image": { "url": "…", "alt": "…" },
        "price": { "regular": { "value": 29, "text": "$29.00" }, "special": { "value": 19, "text": "$19.00" } },
        "inStock": true,
        "status": 1
      }
    ]
  }
}

sku is the stable identifier (matching EverShop's ProductSelector and the products(filters: [{ key: "sku", operation: in, value: "…" }]) query).

Develop

npm install
npm run dev    # opens dev/index.html with a mocked host picker
npm run build  # emits dist/product-list.{mjs,umd.js} + index.d.ts

Based on the Image Block for Editor.js.