EverShop 的产品列表工具
A 类 编辑.js 块工具,让编辑器构建 命令产品列表:搜索并添加,去除,并拖动重排. 每个 卡片显示产品 缩略图、名称、SKU、价格、股票和状况。 。 。 .
这是一个兄弟 @evershop/editorjs-image
并遵循同样的惯例(Vite library Building,JS注入CSS,
@codexteam/icons) (中文(简体) ).
如何运作
工具是自己装的 搜索模式。它保持图QL不可知性:你给它一个
searchProducts(keyword, { page, limit }) 函数并处理搜索框,
解析、页化、多选择和选定的状态UI。 在EverShop那个
函数运行管理员 products(filters: [...]) 查询。 在商店前门
保存的快照随EverShop的 <ProductList/> 组件.
使用量
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[]
},
},
},
},
});
配置
| 选项 | 类型 | 说明 |
|---|---|---|
searchProducts | (keyword: string, opts: { page: number; limit: number }) => Promise<{ items, total }> | 内建搜索模式的数据源 . |
defaultColumns | number | 新块的存储前网格列( 默认) 4) (中文(简体) ). |
pageSize | number | 搜索模式的页面大小( 默认) 20) (中文(简体) ). |
onSelectProducts | (current: ProductItem[], onSelect: (products: ProductItem[]) => void) => void | 可选覆盖 ——自供取取取器而不用内置取取取. 优先进行. |
placeholder | string | 空态文本 . |
保存的数据
{
"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 是稳定的标识符(匹配 EverShop 的 ProductSelector 编辑
products(filters: [{ key: "sku", operation: in, value: "…" }]) 查询).
开发
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
依据 编辑器.js 的图像块。 。 。 .