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.