From ddeeca32932303ec3fd6573099011dc86b5b551a Mon Sep 17 00:00:00 2001
From: bigcode <ibigcode@gmail.com>
Date: Mon, 2 Nov 2026 12:32:18 +0800
Subject: [PATCH] =?UTF-8?q?v0.10.21:=20=E4=BA=A7=E5=93=81=E5=BD=92?=
 =?UTF-8?q?=E6=A1=A3=E9=A1=B5=20C1-C4=EF=BC=88=E5=8E=9F=E7=AB=99=20/shop/?=
 =?UTF-8?q?=20=E6=A8=A1=E6=9D=BF=201398=20+=20WPC=20=E7=AD=9B=E9=80=89=20+?=
 =?UTF-8?q?=20WooCommerce=20=E7=BD=91=E6=A0=BC=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 导入 archive 模板 post 1398（slug=shop-archive），/collection/ 用 ElementorRenderer
  直出 hero/两列外壳，按 widget id 注入 ShopFilters/ShopProducts；新增 server function
  解决客户端导航时 loader 打不开 db 的问题
- C1 hero：面包屑 Home / Shop（BreadcrumbWidget + vars.breadcrumb 上下文）
- C2 筛选：12 组属性（term taxonomy 顺序，scripts/import-attribute-term-order.ts）；
  长期列表 5 项 + See more，Battery/Operating/Install 默认折叠；URL query 驱动，
  SoM 筛选实测 22 条；顶部 Filters 标题/已选 chips/Clear all
- C3 网格：WooCommerce 归档 DOM（结果计数、orderby、24 卡 4 列、卡片 1:1 图/标题/
  Read more）；默认排序导入 products.meta.menu_order（scripts/import-product-menu-order.ts），
  前三个商品与原站一致（DSOM-040R/110R/130N）
- C4 分页：页码/箭头、当前页样式、page2 25–48 条验证
- 修复 Tailwind .columns-4 与 WooCommerce 网格类冲突；app.css 新增 shop 归档 scoped 样式
- 1436 实测：hero 52.8、shop 节 2906.7、筛选区 2798.7、网格 2523.3、卡 257.7×409、
  分页 y2855，与原站逐项一致（±6px 内）；bun test 11 pass；版本 0.10.21
---
 docs/sections-inventory.md                  |  25 ++-
 package.json                                |   2 +-
 scripts/import-attribute-term-order.ts      | 112 +++++++++++
 scripts/import-product-menu-order.ts        |  77 ++++++++
 scripts/import-shop-template.ts             |  42 ++++
 src/components/elementor/Renderer.tsx       |  58 +++++-
 src/components/website/ShopFilters.tsx      | 201 ++++++++++++++++++++
 src/components/website/ShopProducts.tsx     | 172 +++++++++++++++++
 src/components/website/collection-shared.ts |  16 +-
 src/routes/collection.index.tsx             | 103 +++++++---
 src/server/data.ts                          |  18 +-
 src/styles/app.css                          |  86 +++++++++
 12 files changed, 866 insertions(+), 46 deletions(-)
 create mode 100644 scripts/import-attribute-term-order.ts
 create mode 100644 scripts/import-product-menu-order.ts
 create mode 100644 scripts/import-shop-template.ts
 create mode 100644 src/components/website/ShopFilters.tsx
 create mode 100644 src/components/website/ShopProducts.tsx

diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md
index 9029f0812..34bf6a1e4 100644
--- a/docs/sections-inventory.md
+++ b/docs/sections-inventory.md
@@ -57,11 +57,15 @@
 
 ## 四、其他核心页型版块(自上而下,概览)
 
-### 1. 产品分类列表/落地页(4 版块)
-- C1 落地主题区(同 slug 文章 Elementor 直出,每类内容不同)
-- C2 侧栏:分类树 + 属性复选筛选(URL search 驱动)
-- C3 产品网格(ProductCard ×24)
-- C4 分页
+### 1. 产品归档/列表页（原站 /shop/，4 版块）
+- C1 归档 hero：Elementor 模板 post 1398 的 a2ab15c（面包屑 Home / Shop，bg #F4F5F8）✅ v0.10.21
+- C2 侧栏筛选：WPC Filter Everything（12 组属性复选、计数、See more、末三组折叠）✅ v0.10.21
+- C3 商品网格：WooCommerce 归档 24 卡 4 列（图/标题/Read more，Elementor skin）✅ v0.10.21
+- C4 排序 + 分页：orderby 下拉（默认 menu_order）、结果计数、页码/箭头分页 ✅ v0.10.21
+- 说明：分类 URL（/product-category/*）在原站多数 301 到 landing-pages/*（Elementor 落地页，
+  归方案/落地页页型）；/shop/ 才是 WooCommerce 归档版块，已按模板 1398 直出 +
+  ShopFilters/ShopProducts 注入。筛选 URL 用查询参数（原站 WPC 为 /shop/type-som/ 美化链接），
+  术语顺序/计数来自导入数据（term taxonomy 顺序 + product_attribute_map 计数）。
 
 ### 2. 方案页
 - S1 `/solution/` 列表入口页
@@ -141,6 +145,17 @@ cookie-policy:19 段纯文本。
 > (form_key=contact-form-1),成功显示 CF7 原文提示;弹窗内社交图标 5 个(20px/间距 14/品牌色)。
 > 实测 1436:白卡 700×737 居中、两列 289.9/三列 189、消息框 604×153;390:宽 390、p5/p6 两列、
 > p7 全宽,与 popup 自定义 CSS 一致;提交入库验证后已清理测试数据。
+>
+> **C1-C4 产品归档取证(v0.10.21)**:原站 /shop/ 使用 archive 模板 post 1398
+> （scripts/import-shop-template.ts 导入 contents slug=shop-archive），/collection/ 路由直出
+> 模板外壳并注入 ShopFilters（widget 98d2008）/ShopProducts（d761846）。1436 实测:
+> hero 52.8、shop 节 2906.7（左列 275.2/右列 1100.8、列高一致）、筛选区 2798.7（12 组，
+> 标题 44/灰底、行高 20.8、组距 32；CPU/OS/Interface/RAM/Flash 默认 5 项 + See more，
+> Battery/Operating/Install 默认折叠）、H1 24/600、结果计数“Showing 1–24 of 138 results”、
+> 商品网格 2523.3（24 卡 4 列 gap 10，卡 257.7×409）、分页 y2855 margin-top 40；
+> 筛选 SoM → 22 条、排序 date、See more 5→17、分页 page2 均通过。默认排序改为
+> products.meta.menu_order（scripts/import-product-menu-order.ts），术语顺序改为
+> taxonomy 顺序（scripts/import-attribute-term-order.ts）。
 
 ## 七、已知遗留(非当前版块范围,后续版块收口)
 
diff --git a/package.json b/package.json
index e0f93ff67..89a8b0ef0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dusuniot-rebuild",
-  "version": "0.10.20",
+  "version": "0.10.21",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/scripts/import-attribute-term-order.ts b/scripts/import-attribute-term-order.ts
new file mode 100644
index 000000000..1687a294d
--- /dev/null
+++ b/scripts/import-attribute-term-order.ts
@@ -0,0 +1,112 @@
+/**
+ * # 脚本 导入产品属性术语顺序（对齐原站 /shop/ 筛选列表顺序）
+ * 原站 WPC 筛选按 wp_term_taxonomy 中的术语顺序展示（取证：pa_product-type 顺序
+ * SoM → IoT Gateway → Wi-Fi Repeater → Router → Beacon，对应 term_id 756/764/845/846/862；
+ * pa_cpu 顺序 PX30 → RK3328 → RK3588 → PX30K …）。本项目导入时按字母序写入，需要修复。
+ * 做法：解析 dump 的 wp_terms（term_id→name）与 wp_term_taxonomy（插入顺序），
+ * 对每个 pa_<属性 slug>，按顺序把 product_attribute_values.sort 设为序号。
+ * 运行：bun scripts/import-attribute-term-order.ts
+ */
+import { SQL } from "bun";
+
+const DUMP = "/home/bigcode/data/dev/sites/dusuniot/legacy/dusuniot-db-20261029.sql";
+const db = new SQL("postgres://dusuniot:dusuniot@127.0.0.1:25432/dusuniot");
+
+/** # 函数 提取某张表的 INSERT 段文本（支持多段 INSERT） */
+function tableInserts(lines: string[], table: string): string[] {
+  const out: string[] = [];
+  let buf = "";
+  let on = false;
+  for (const l of lines) {
+    if (l.startsWith(`INSERT INTO \`${table}\` VALUES`)) {
+      on = true;
+      buf = l;
+    } else if (on) {
+      buf += l;
+    }
+    if (on && l.trimEnd().endsWith(";")) {
+      out.push(buf);
+      buf = "";
+      on = false;
+    }
+  }
+  return out;
+}
+
+/** # 函数 解析 SQL 值元组 */
+function parseTuples(s: string): string[][] {
+  const out: string[][] = [];
+  let p = s.indexOf("(");
+  while (p >= 0 && p < s.length) {
+    const values: string[] = [];
+    let cur = "";
+    let inQ = false;
+    let esc = false;
+    let depth = 0;
+    p++;
+    for (; p < s.length; p++) {
+      const ch = s[p]!;
+      if (esc) { cur += ch; esc = false; continue; }
+      if (inQ) {
+        if (ch === "\\") { esc = true; continue; }
+        if (ch === "'") { inQ = false; continue; }
+        cur += ch;
+        continue;
+      }
+      if (ch === "'") { inQ = true; continue; }
+      if (ch === "(") { depth++; cur += ch; continue; }
+      if (ch === ")") {
+        if (depth === 0) { values.push(cur); cur = ""; p++; break; }
+        depth--;
+        cur += ch;
+        continue;
+      }
+      if (ch === "," && depth === 0) { values.push(cur); cur = ""; continue; }
+      cur += ch;
+    }
+    out.push(values);
+    p = s.indexOf("(", p);
+  }
+  return out;
+}
+
+const lines = (await Bun.file(DUMP).text()).split("\n");
+
+// term_id → name
+const nameById = new Map<number, string>();
+for (const seg of tableInserts(lines, "wp_terms")) {
+  for (const v of parseTuples(seg)) {
+    if (v[0]) nameById.set(Number(v[0]), v[1] ?? "");
+  }
+}
+console.log("terms:", nameById.size);
+
+// taxonomy → [term names]（按 dump 插入顺序）
+const byTax = new Map<string, string[]>();
+for (const seg of tableInserts(lines, "wp_term_taxonomy")) {
+  for (const v of parseTuples(seg)) {
+    const taxonomy = v[2] ?? "";
+    const termId = Number(v[1]);
+    if (!taxonomy.startsWith("pa_")) continue;
+    const name = nameById.get(termId);
+    if (!name) continue;
+    const list = byTax.get(taxonomy) ?? [];
+    list.push(name);
+    byTax.set(taxonomy, list);
+  }
+}
+
+let updated = 0;
+for (const [taxonomy, names] of byTax) {
+  const attrSlug = taxonomy.slice(3);
+  for (let i = 0; i < names.length; i++) {
+    const res = await db`
+      UPDATE product_attribute_values v SET sort = ${i}
+      FROM product_attributes a
+      WHERE v.attribute_id = a.id AND a.slug = ${attrSlug} AND lower(trim(v.value)) = lower(trim(${names[i]!}))`;
+    updated += res.count;
+  }
+  console.log(taxonomy, "→", names.length, "terms");
+}
+console.log("updated rows:", updated);
+await db.end();
diff --git a/scripts/import-product-menu-order.ts b/scripts/import-product-menu-order.ts
new file mode 100644
index 000000000..10e244850
--- /dev/null
+++ b/scripts/import-product-menu-order.ts
@@ -0,0 +1,77 @@
+/**
+ * # 脚本 导入产品 menu_order（WooCommerce 默认排序依据）
+ * 原站 /shop/ 默认排序 = wp_posts.menu_order ASC（取证：DSOM-040R=1、DSOM-110R=3、
+ * DSOM-130N=4，与线上商品顺序一致）。本项目 products 表无 menu_order 列，
+ * 故写入 products.meta.menu_order，listProducts 默认排序读取该字段。
+ * 数据源：legacy dump 的 wp_posts 全部 INSERT 段（每段 23 字段，menu_order 为第 20 列）。
+ * 运行：bun scripts/import-product-menu-order.ts
+ */
+import { SQL } from "bun";
+
+const DUMP = "/home/bigcode/data/dev/sites/dusuniot/legacy/dusuniot-db-20261029.sql";
+const db = new SQL("postgres://dusuniot:dusuniot@127.0.0.1:25432/dusuniot");
+
+/** # 函数 解析 SQL 值元组（仅支持字符串/数字，处理反斜杠转义与括号深度） */
+function parseTuples(s: string, from: number): string[][] {
+  const out: string[][] = [];
+  let p = from;
+  while (p < s.length) {
+    if (s[p] === ";") break;
+    if (s[p] !== "(") { p++; continue; }
+    const values: string[] = [];
+    let cur = "";
+    let inQ = false;
+    let esc = false;
+    let depth = 0;
+    p++;
+    for (; p < s.length; p++) {
+      const ch = s[p]!;
+      if (esc) { cur += ch; esc = false; continue; }
+      if (inQ) {
+        if (ch === "\\") { esc = true; continue; }
+        if (ch === "'") { inQ = false; continue; }
+        cur += ch;
+        continue;
+      }
+      if (ch === "'") { inQ = true; continue; }
+      if (ch === "(") { depth++; cur += ch; continue; }
+      if (ch === ")") {
+        if (depth === 0) { values.push(cur); cur = ""; p++; break; }
+        depth--;
+        cur += ch;
+        continue;
+      }
+      if (ch === "," && depth === 0) { values.push(cur); cur = ""; continue; }
+      cur += ch;
+    }
+    out.push(values);
+  }
+  return out;
+}
+
+const text = await Bun.file(DUMP).text();
+const rows: string[][] = [];
+let idx = 0;
+while (true) {
+  const i = text.indexOf("INSERT INTO `wp_posts`", idx);
+  if (i < 0) break;
+  const start = text.indexOf("(", i);
+  rows.push(...parseTuples(text, start));
+  idx = text.indexOf(";", start);
+  if (idx < 0) break;
+}
+const products = rows.filter((v) => v[20] === "product");
+console.log("dump product rows:", products.length);
+
+let updated = 0;
+for (const v of products) {
+  const legacyId = Number(v[0]);
+  const order = Number(v[19] || 0);
+  if (!legacyId) continue;
+  const res = await db`
+    UPDATE products SET meta = COALESCE(meta, '{}'::jsonb) || jsonb_build_object('menu_order', ${order})
+    WHERE legacy_id = ${legacyId}`;
+  if (res.count) updated += res.count;
+}
+console.log("updated products:", updated);
+await db.end();
diff --git a/scripts/import-shop-template.ts b/scripts/import-shop-template.ts
new file mode 100644
index 000000000..9d0a6010e
--- /dev/null
+++ b/scripts/import-shop-template.ts
@@ -0,0 +1,42 @@
+/**
+ * # 脚本 导入产品归档页 Elementor 模板（legacy elementor_library post 1398）
+ * 原站 /shop/ 与产品分类归档共用 archive 模板 post 1398（elementor_location=archive）：
+ *  - a2ab15c：面包屑 hero（bg #F4F5F8 / padding 0 30 / content 1400）
+ *  - 65176b9：两列（20% WPC 筛选 + 80% 标题 + WooCommerce 商品归档）
+ *  - 61b1990：移动端归档描述（hide_desktop）
+ * 写入 contents（type=template, slug=shop-archive, meta.elementor），供
+ * collection 路由以 ElementorRenderer 直出外壳，筛选/商品网格按 widget id 注入。
+ * 运行：bun scripts/import-shop-template.ts
+ */
+import { SQL } from "bun";
+
+const DUMP = "/home/bigcode/data/dev/sites/dusuniot/legacy/dusuniot-db-20261029.sql";
+const db = new SQL("postgres://dusuniot:dusuniot@127.0.0.1:25432/dusuniot");
+
+/** # 函数 从 dump 提取指定 post 的 _elementor_data */
+async function extractTemplate(postId: number): Promise<Record<string, unknown>[]> {
+  const text = await Bun.file(DUMP).text();
+  const re = new RegExp("\\(\\d+," + postId + ",'_elementor_data','((?:[^'\\\\]|\\\\.)*)'\\)");
+  const m = text.match(re);
+  if (!m) throw new Error(`dump 中未找到 post ${postId} 的 _elementor_data`);
+  const json = m[1]!.replace(/\\'/g, "'").replace(/\\"/g, '"').replace(/\\\\/g, "\\");
+  const data = JSON.parse(json);
+  if (!Array.isArray(data)) throw new Error("_elementor_data 不是数组");
+  return data as Record<string, unknown>[];
+}
+
+const elements = await extractTemplate(1398);
+const meta = JSON.stringify({ elementor: elements });
+const existing = await db`SELECT id FROM contents WHERE slug='shop-archive' AND type='template'`;
+if (existing.length) {
+  await db`UPDATE contents SET meta=${meta}::jsonb, status='published', updated_at=now() WHERE id=${existing[0]!.id}`;
+  console.log("已更新 shop-archive 模板，contents.id =", existing[0]!.id);
+} else {
+  const inserted = await db`
+    INSERT INTO contents (type, slug, title, status, meta, legacy_id, published_at)
+    VALUES ('template', 'shop-archive', 'Shop Archive', 'published', ${meta}::jsonb, 1398, now())
+    RETURNING id`;
+  console.log("已插入 shop-archive 模板，contents.id =", inserted[0]!.id);
+}
+console.log("顶层节:", elements.map((el) => el.id).join(", "));
+await db.end();
diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx
index 160c26e27..ba419c7b9 100644
--- a/src/components/elementor/Renderer.tsx
+++ b/src/components/elementor/Renderer.tsx
@@ -273,24 +273,46 @@ const PostsDataContext = createContext<Record<string, PostCardItem[]>>({});
 /** # 成员变量 WordPress 短代码渲染上下文（widget id → 预渲染节点；页脚 menu-2/gtranslate） **/
 const ShortcodesContext = createContext<Record<string, ReactNode>>({});
 
+/** # 类型 渲染器动态数据（面包屑等 WP 动态 widget 的 SSR 上下文） */
+export type RendererVars = {
+  /** # 成员变量 面包屑路径（末项无 url 表示当前页） **/
+  breadcrumb?: { label: string; url?: string }[];
+};
+
+/** # 成员变量 动态数据上下文（woocommerce-breadcrumb 等 widget 读取） **/
+const VarsContext = createContext<RendererVars>({});
+
 /** # 组件 Elementor 渲染器入口
  * 参数 shortcodes 短代码 widget 的预渲染内容（键为 widget id；缺省渲染为空）
+ * 参数 vars 动态数据（面包屑路径等）
  */
-export function ElementorRenderer({ doc, postsData, shortcodes }: { doc: ElDocument; postsData?: Record<string, PostCardItem[]>; shortcodes?: Record<string, ReactNode> }) {
+export function ElementorRenderer({
+  doc,
+  postsData,
+  shortcodes,
+  vars,
+}: {
+  doc: ElDocument;
+  postsData?: Record<string, PostCardItem[]>;
+  shortcodes?: Record<string, ReactNode>;
+  vars?: RendererVars;
+}) {
   const elements = normalizeDoc(doc);
   if (!elements.length) return null;
   const css = collectCustomCss(elements) + collectResponsiveCss(elements);
   return (
-    <PostsDataContext.Provider value={postsData || {}}>
-      <ShortcodesContext.Provider value={shortcodes || {}}>
-        <div className="content-html">
-          {css ? <style dangerouslySetInnerHTML={{ __html: css }} /> : null}
+    <VarsContext.Provider value={vars || {}}>
+      <PostsDataContext.Provider value={postsData || {}}>
+        <ShortcodesContext.Provider value={shortcodes || {}}>
+          <div className="content-html">
+            {css ? <style dangerouslySetInnerHTML={{ __html: css }} /> : null}
           {elements.map((el, i) => (
             <ElementNode key={el.id || i} el={el} />
           ))}
         </div>
-      </ShortcodesContext.Provider>
-    </PostsDataContext.Provider>
+        </ShortcodesContext.Provider>
+      </PostsDataContext.Provider>
+    </VarsContext.Provider>
   );
 }
 
@@ -644,6 +666,9 @@ function WidgetNodeInner({ el }: { el: ElElement }) {
   const w = s(el.widgetType);
   const settings = resolveGlobals(el.settings || {});
   const shortcodes = useContext(ShortcodesContext);
+  // 任意 widget 可由调用方按 id 注入实现（WooCommerce 归档/WPC 筛选等动态插件 widget）
+  const injected = el.id ? shortcodes[el.id] : undefined;
+  if (injected !== undefined) return <>{injected}</>;
   const unknownFallback = () => {
     const title = s(settings.heading_title) || s(settings.title);
     const text = s(settings.editor) || s(settings.html) || s(settings.text);
@@ -658,6 +683,8 @@ function WidgetNodeInner({ el }: { el: ElElement }) {
   switch (w) {
     case "heading":
       return <HeadingWidget settings={settings} />;
+    case "woocommerce-breadcrumb":
+      return <BreadcrumbWidget />;
     case "text-editor":
       return <TextEditorWidget settings={settings} />;
     case "image":
@@ -746,6 +773,23 @@ function WidgetNodeInner({ el }: { el: ElElement }) {
   }
 }
 
+/** # 组件 woocommerce-breadcrumb widget：面包屑（路径由 vars.breadcrumb 注入；
+ * 原站归档页模板 1398 的 hero 即此 widget，末项为当前页、前面项带链接） */
+function BreadcrumbWidget() {
+  const vars = useContext(VarsContext);
+  const trail = vars.breadcrumb?.length ? vars.breadcrumb : [{ label: "Home", url: "/" }, { label: "Shop" }];
+  return (
+    <nav className="woocommerce-breadcrumb" aria-label="Breadcrumb">
+      {trail.map((n, i) => (
+        <Fragment key={`${n.label}-${i}`}>
+          {i > 0 ? <span className="ds-crumb-sep" dangerouslySetInnerHTML={{ __html: "&nbsp;/&nbsp;" }} /> : null}
+          {n.url && i < trail.length - 1 ? <a href={n.url}>{n.label}</a> : <span>{n.label}</span>}
+        </Fragment>
+      ))}
+    </nav>
+  );
+}
+
 /** # 组件 heading widget：标题（可带 link，is_external → target=_blank；title 支持 HTML） */
 function HeadingWidget({ settings }: { settings: Record<string, unknown> }) {
   // 标签合法域同原站 Utils::validate_html_tag（h1..h6 / div / span / p）；默认 h2
diff --git a/src/components/website/ShopFilters.tsx b/src/components/website/ShopFilters.tsx
new file mode 100644
index 000000000..20de0505e
--- /dev/null
+++ b/src/components/website/ShopFilters.tsx
@@ -0,0 +1,201 @@
+/**
+ * # 组件 商店筛选侧栏 ShopFilters（对齐原站 /shop/ 的 WPC Filter Everything 组件）
+ * 原站结构（filter-everything 插件，filter set 25674）：
+ *  .wpc-filters-main-wrap > .wpc-filters-widget-content > .wpc-filters-widget-wrapper
+ *   > .wpc-filters-section ×12（.wpc-filter-title 灰底标题 + .wpc-filters-ul-list 复选框列表）
+ *  - 顺序固定：Product Type / Chip Platform / CPU Name / System support / Downlink / Uplink /
+ *    Interface / RAM / Flash / Back-up Battery / Operating Temperature / Install
+ *  - 后三组默认折叠（标题为按钮，带展开箭头）；
+ *  - 术语行 = 复选框 + 名称 + (计数)；长列表（>8）显示 “Show more/less”；
+ *  - 勾选切换写入 URL query（属性 slug=值1,值2），页面按筛选重查（本站等价实现）。
+ */
+import { useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import type { CollectionSearch } from "~/components/website/collection-shared";
+
+/** # 类型 单个筛选器定义（来自 getFilterConfig） */
+export type ShopFilterConfig = {
+  name: string;
+  slug: string;
+  values: { value: string; slug: string; count: number }[];
+};
+
+/** # 常量 筛选器展示顺序（原站 WPC filter set 25674 的 section 顺序） **/
+const FILTER_ORDER = [
+  "product-type",
+  "chip-platform",
+  "cpu",
+  "os",
+  "downlink",
+  "uplink",
+  "interface",
+  "ram",
+  "flash",
+  "battery",
+  "operating-temperature",
+  "install",
+];
+
+/** # 常量 默认折叠的筛选组（原站实测末三组标题为按钮且内容 display:none） **/
+const COLLAPSED_BY_DEFAULT = new Set(["battery", "operating-temperature", "install"]);
+
+/** # 函数 从 search 组装 URL query（保留 orderby 等键） */
+function searchToQuery(search: CollectionSearch): string {
+  const p = new URLSearchParams();
+  for (const [k, v] of Object.entries(search)) {
+    if (k !== "page" && v) p.set(k, String(v));
+  }
+  // 任何筛选变化都回到第 1 页（原站 WPC 行为）
+  const qs = p.toString();
+  return qs ? `?${qs}` : "";
+}
+
+/** # 常量 长列表筛选组（WPC wpc-show-more：默认只显示 5 项 + See more） **/
+const SHOW_MORE_SLUGS = new Set(["cpu", "os", "interface", "ram", "flash"]);
+
+/** # 组件 商店筛选侧栏 */
+export function ShopFilters(props: {
+  config: ShopFilterConfig[];
+  selected: Record<string, string[]>;
+  total: number;
+  search: CollectionSearch;
+}) {
+  const navigate = useNavigate();
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+  const [showAll, setShowAll] = useState<Record<string, boolean>>({});
+
+  // 按固定顺序排列，并剔除原站未展示的 network-device
+  const sections = useMemo(() => {
+    const map = new Map(props.config.map((c) => [c.slug, c]));
+    return FILTER_ORDER.map((slug) => map.get(slug)).filter((x): x is ShopFilterConfig => !!x);
+  }, [props.config]);
+
+  /** # 函数 勾选/取消某个术语（写 URL query 并回到第 1 页） */
+  function toggle(attrSlug: string, valueSlug: string) {
+    const current = new Set(props.selected[attrSlug] || []);
+    if (current.has(valueSlug)) current.delete(valueSlug);
+    else current.add(valueSlug);
+    const next: CollectionSearch = { ...props.search };
+    delete next.page;
+    if (current.size) next[attrSlug] = [...current].join(",");
+    else delete next[attrSlug];
+    navigate({ to: "/collection/", search: next });
+  }
+
+  /** # 函数 清空全部筛选 */
+  function clearAll() {
+    const next: CollectionSearch = {};
+    if (props.search.orderby) next.orderby = props.search.orderby;
+    navigate({ to: "/collection/", search: next });
+  }
+
+  const selectedChips = sections.flatMap((s) =>
+    (props.selected[s.slug] || []).map((v) => ({ attr: s.slug, value: v, label: s.values.find((x) => x.slug === v)?.value || v })),
+  );
+
+  return (
+    <div className="wpc-filters-main-wrap wpc-filter-set-25674" data-wpc-hide-empty="yes" data-set="25674">
+      <div className="wpc-filters-widget-content wpc-show-counts-yes">
+        <div className="wpc-filters-widget-containers-wrapper">
+          {/* 已选条件 chips（原站顶部区域内联展示） */}
+          <div className="wpc-filters-widget-top-container">
+            <div className="wpc-widget-top-inside">
+              <div className="wpc-inner-widget-chips-wrapper">
+                <ul className={"wpc-filter-chips-list" + (selectedChips.length ? "" : " wpc-empty-chips-container")}>
+                  {selectedChips.map((c) => (
+                    <li key={`${c.attr}-${c.value}`} className="wpc-filter-chip">
+                      <span>{c.label}</span>
+                      <button type="button" aria-label={`Remove ${c.label}`} onClick={() => toggle(c.attr, c.value)}>
+                        ×
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                {selectedChips.length ? (
+                  <button type="button" className="wpc-clear-all" onClick={clearAll}>
+                    Clear all
+                  </button>
+                ) : null}
+              </div>
+            </div>
+          </div>
+
+          <div className="wpc-filter-set-widget-title">Filters</div>
+          <div className="wpc-filters-scroll-container">
+            <div className="wpc-filters-widget-wrapper">
+              {/* 原站 .wpc-posts-found 因 hide-empty 配置无文字，仅保留 24px 占位 */}
+              <div className="wpc-posts-found" data-found={props.total} aria-hidden="true" />
+              {sections.map((sec, idx) => {
+                const collapsed = COLLAPSED_BY_DEFAULT.has(sec.slug) && !expanded[sec.slug];
+                const all = showAll[sec.slug];
+                const limited = SHOW_MORE_SLUGS.has(sec.slug);
+                const values = all || !limited ? sec.values : sec.values.slice(0, 5);
+                return (
+                  <div
+                    key={sec.slug}
+                    className={"wpc-filters-section wpc-filter-" + sec.slug + " wpc-filter-taxonomy wpc-filter-layout-checkboxes" + (collapsed ? " wpc-filter-collapsed" : "")}
+                    data-fid={idx}
+                  >
+                    <div className="wpc-filter-header">
+                      {COLLAPSED_BY_DEFAULT.has(sec.slug) ? (
+                        <button
+                          type="button"
+                          className="widget-title wpc-filter-title"
+                          aria-expanded={!collapsed}
+                          onClick={() => setExpanded((e) => ({ ...e, [sec.slug]: !e[sec.slug] }))}
+                        >
+                          <span className="wpc-wrap-icons">{sec.name}</span>
+                          <span className="wpc-open-icon" aria-hidden="true" />
+                        </button>
+                      ) : (
+                        <div className="widget-title wpc-filter-title">{sec.name}</div>
+                      )}
+                    </div>
+                    {collapsed ? null : (
+                      <div className="wpc-filter-content">
+                        <ul className="wpc-filters-ul-list wpc-filters-checkboxes">
+                          {values.map((v) => {
+                            const checked = (props.selected[sec.slug] || []).includes(v.slug);
+                            return (
+                              <li key={v.slug} className={"wpc-checkbox-item wpc-term-item" + (checked ? " wpc-term-selected" : "")}>
+                                <div className="wpc-term-item-content-wrapper">
+                                  <input
+                                    type="checkbox"
+                                    checked={checked}
+                                    readOnly
+                                    aria-label={v.value}
+                                    id={`wpc-checkbox-${sec.slug}-${v.slug}`}
+                                    onClick={() => toggle(sec.slug, v.slug)}
+                                  />
+                                  <label htmlFor={`wpc-checkbox-${sec.slug}-${v.slug}`}>
+                                    <span className="wpc-filter-link">{v.value}</span>
+                                    <span className="wpc-term-count">
+                                      <span>(</span>
+                                      <span className="wpc-term-count-value">{v.count}</span>
+                                      <span>)</span>
+                                    </span>
+                                  </label>
+                                </div>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                        {limited && sec.values.length > 5 ? (
+                          <div className="wpc-filter-more-less">
+                            <button type="button" className="wpc-toggle-a" onClick={() => setShowAll((s) => ({ ...s, [sec.slug]: !s[sec.slug] }))}>
+                              {all ? "See less" : "See more"}
+                            </button>
+                          </div>
+                        ) : null}
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/website/ShopProducts.tsx b/src/components/website/ShopProducts.tsx
new file mode 100644
index 000000000..e570ead44
--- /dev/null
+++ b/src/components/website/ShopProducts.tsx
@@ -0,0 +1,172 @@
+/**
+ * # 组件 商店商品区 ShopProducts（对齐原站 /shop/ WooCommerce 归档 + Elementor skin）
+ * 原站结构（elementor 模板 1398 的 wc-archive-products widget d761846）：
+ *  .woocommerce > .woocommerce-result-count + form.woocommerce-ordering + ul.products(4 列)
+ *  > li.product ×24（图/标题/Read more）+ nav.woocommerce-pagination。
+ * 卡片样式由 Elementor skin 生成（白底 1px #C9CEE8 边框、图 1:1、标题 16/600/#444、
+ * 按钮白底橙字描边圆角 8），见 app.css「Shop archive」块。
+ */
+import { Link, useNavigate } from "@tanstack/react-router";
+import type { CollectionSearch } from "~/components/website/collection-shared";
+
+/** # 类型 商品卡数据（listProducts.items 子集） */
+export type ShopProduct = {
+  id: number;
+  slug: string;
+  title: string;
+  sku: string | null;
+  imageUrl: string | null;
+  imageAlt?: string | null;
+};
+
+/** # 常量 WooCommerce 排序项（原站 orderby 下拉） **/
+const ORDER_OPTIONS = [
+  { value: "menu_order", label: "Default sorting" },
+  { value: "popularity", label: "Sort by popularity" },
+  { value: "date", label: "Sort by latest" },
+  { value: "price", label: "Sort by price: low to high" },
+  { value: "price-desc", label: "Sort by price: high to low" },
+];
+
+/** # 函数 原站 orderby → listProducts sort */
+export function orderByToSort(orderby: string | undefined): "default" | "views" | "latest" | "price" | "price-desc" {
+  switch (orderby) {
+    case "popularity": return "views";
+    case "date": return "latest";
+    case "price": return "price";
+    case "price-desc": return "price-desc";
+    default: return "default";
+  }
+}
+
+/** # 函数 组装带筛选与排序的 URL（保留全部 search 键） */
+function hrefFor(search: CollectionSearch, page: number): string {
+  const p = new URLSearchParams();
+  for (const [k, v] of Object.entries(search)) {
+    if (k !== "page" && v) p.set(k, String(v));
+  }
+  if (page > 1) p.set("page", String(page));
+  const qs = p.toString();
+  return `/collection/${qs ? `?${qs}` : ""}`;
+}
+
+/** # 组件 商店商品区 */
+export function ShopProducts(props: {
+  items: ShopProduct[];
+  total: number;
+  page: number;
+  pageSize: number;
+  search: CollectionSearch;
+}) {
+  const navigate = useNavigate();
+  const totalPages = Math.max(1, Math.ceil(props.total / props.pageSize));
+  const start = (props.page - 1) * props.pageSize + 1;
+  const end = Math.min(props.total, props.page * props.pageSize);
+  const orderby = props.search.orderby || "menu_order";
+
+  // 页码窗口：原站 6 页全展示；页数多时用省略号（WooCommerce 默认行为）
+  const pages: (number | "…")[] = [];
+  if (totalPages <= 7) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i);
+  } else {
+    pages.push(1);
+    const from = Math.max(2, props.page - 1);
+    const to = Math.min(totalPages - 1, props.page + 1);
+    if (from > 2) pages.push("…");
+    for (let i = from; i <= to; i++) pages.push(i);
+    if (to < totalPages - 1) pages.push("…");
+    pages.push(totalPages);
+  }
+
+  return (
+    <div className="woocommerce ds-cols-4">
+      <div className="woocommerce-notices-wrapper" />
+      {props.total > 0 ? (
+        <p className="woocommerce-result-count" role="status">
+          Showing {start}–{end} of {props.total} results
+        </p>
+      ) : (
+        <p className="woocommerce-result-count">It seems we can&apos;t find what you&apos;re looking for.</p>
+      )}
+      <form className="woocommerce-ordering" method="get" onSubmit={(e) => e.preventDefault()}>
+        <select
+          name="orderby"
+          className="orderby"
+          aria-label="Shop order"
+          value={orderby}
+          onChange={(e) => {
+            const next: CollectionSearch = { ...props.search };
+            delete next.page;
+            if (e.target.value === "menu_order") delete next.orderby;
+            else next.orderby = e.target.value;
+            navigate({ to: "/collection/", search: next });
+          }}
+        >
+          {ORDER_OPTIONS.map((o) => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </select>
+        <input type="hidden" name="paged" value={String(props.page)} />
+      </form>
+
+      <ul className="products elementor-grid ds-cols-4">
+        {props.items.map((p, i) => (
+          <li key={p.id} className={"product type-product status-publish has-post-thumbnail product-type-simple" + (i === 0 ? " first" : "")}>
+            <Link to="/product/$slug/" params={{ slug: p.slug }} className="woocommerce-LoopProduct-link woocommerce-loop-product__link">
+              {p.imageUrl ? (
+                <img
+                  loading="lazy"
+                  width={261}
+                  height={261}
+                  src={p.imageUrl}
+                  className="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"
+                  alt={p.imageAlt || p.title}
+                />
+              ) : null}
+              <h2 className="woocommerce-loop-product__title">{p.title}</h2>
+            </Link>
+            <div className="woocommerce-loop-product__buttons">
+              <Link to="/product/$slug/" params={{ slug: p.slug }} className="button product_type_simple">
+                Read more
+              </Link>
+            </div>
+          </li>
+        ))}
+      </ul>
+
+      {totalPages > 1 ? (
+        <nav className="woocommerce-pagination" aria-label="Product Pagination">
+          <ul className="page-numbers">
+            {props.page > 1 ? (
+              <li>
+                <a className="prev page-numbers" aria-label={`Page ${props.page - 1}`} href={hrefFor(props.search, props.page - 1)}>
+                  ←
+                </a>
+              </li>
+            ) : null}
+            {pages.map((pg, i) =>
+              pg === "…" ? (
+                <li key={`e${i}`}><span className="page-numbers dots">…</span></li>
+              ) : (
+                <li key={pg}>
+                  {pg === props.page ? (
+                    <span aria-label={`Page ${pg}`} aria-current="page" className="page-numbers current">{pg}</span>
+                  ) : (
+                    <a aria-label={`Page ${pg}`} className="page-numbers" href={hrefFor(props.search, pg)}>{pg}</a>
+                  )}
+                </li>
+              ),
+            )}
+            {props.page < totalPages ? (
+              <li>
+                <a className="next page-numbers" aria-label={`Page ${props.page + 1}`} href={hrefFor(props.search, props.page + 1)}>
+                  →
+                </a>
+              </li>
+            ) : null}
+          </ul>
+        </nav>
+      ) : null}
+    </div>
+  );
+}
diff --git a/src/components/website/collection-shared.ts b/src/components/website/collection-shared.ts
index 1842d053b..18284f3cb 100644
--- a/src/components/website/collection-shared.ts
+++ b/src/components/website/collection-shared.ts
@@ -10,13 +10,13 @@
 import type { FilterState } from "~/server/data";
 
 /** # 类型 /collection 的扁平 search 参数：page 数字 + 其余属性筛选键（逗号分隔值） */
-export type CollectionSearch = { page?: number } & Record<string, string | undefined>;
+export type CollectionSearch = { page?: number; orderby?: string } & Record<string, string | number | undefined>;
 
 /** # 函数 解析 collection search 参数（保持扁平原样，仅规范化 page） */
 export function parseCollectionSearch(search: Record<string, unknown>): CollectionSearch {
-  const out: Record<string, string | undefined> = {};
+  const out: Record<string, string | number | undefined> = {};
   const page = Number(search.page);
-  if (Number.isFinite(page) && page > 1) out.page = String(Math.floor(page));
+  if (Number.isFinite(page) && page > 1) out.page = Math.floor(page);
   for (const [k, v] of Object.entries(search)) {
     if (k === "page" || v == null) continue;
     if (Array.isArray(v)) {
@@ -29,11 +29,13 @@ export function parseCollectionSearch(search: Record<string, unknown>): Collecti
   return out as CollectionSearch;
 }
 
-/** # 函数 扁平 search → 结构化筛选状态（每个属性键按逗号拆分为值数组） */
+/** # 函数 扁平 search → 结构化筛选状态（每个属性键按逗号拆分为值数组）
+ * orderby（WooCommerce 排序）不是筛选字段，跳过
+ */
 export function searchToFilters(search: CollectionSearch): FilterState {
   const filters: FilterState = {};
   for (const [k, v] of Object.entries(search)) {
-    if (k === "page" || v == null) continue;
+    if (k === "page" || k === "orderby" || v == null) continue;
     const values = String(v)
       .split(",")
       .map((x) => x.trim())
@@ -45,13 +47,13 @@ export function searchToFilters(search: CollectionSearch): FilterState {
 
 /** # 函数 结构化筛选状态 → 扁平 search（navigate 用，page > 1 时附带） */
 export function filtersToSearch(filters: FilterState | undefined, page: number): CollectionSearch {
-  const out: Record<string, string | undefined> = {};
+  const out: Record<string, string | number | undefined> = {};
   if (filters) {
     for (const [k, vals] of Object.entries(filters)) {
       if (vals.length) out[k] = vals.join(",");
     }
   }
-  if (page > 1) out.page = String(page);
+  if (page > 1) out.page = page;
   return out as CollectionSearch;
 }
 
diff --git a/src/routes/collection.index.tsx b/src/routes/collection.index.tsx
index f6a14d601..752d86937 100644
--- a/src/routes/collection.index.tsx
+++ b/src/routes/collection.index.tsx
@@ -1,29 +1,30 @@
 /**
- * # 路由 产品列表 /collection/
- * 列出全部产品（无分类限定）+ 顶部分类卡片；带分页。
+ * # 路由 产品列表 /collection/（原站 /shop/ 的等价页）
+ * 原站 /shop/ 使用 WooCommerce 归档模板（elementor_library post 1398）：
+ *  - a2ab15c：面包屑 hero（bg #F4F5F8）
+ *  - 65176b9：左侧 WPC 筛选（20% 列）+ 右侧 “IoT Products” 标题、排序、24 商品 4 列网格、分页
+ * 本路由以 ElementorRenderer 直出该模板外壳，按 widget id 注入：
+ *  - 98d2008 → ShopFilters（属性复选筛选，URL query 驱动）
+ *  - d761846 → ShopProducts（WooCommerce 归档网格 + 排序 + 分页）
+ * 模板缺失时降级为内置分类卡片 + 简单网格。
  */
 import { createFileRoute, Link } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
 import { getLayoutData, Layout } from "~/components/website/Layout";
+import { ElementorRenderer, extractElementor } from "~/components/elementor/Renderer";
 import { ProductCard } from "~/components/website/ProductCard";
 import { Pagination } from "~/components/website/Pagination";
 import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } from "~/components/ui/breadcrumb";
 import { parseCollectionSearch, searchToFilters, type CollectionSearch } from "~/components/website/collection-shared";
-import { getProductCategoryTree, listProducts, type ProductListResult } from "~/server/data";
+import { ShopFilters } from "~/components/website/ShopFilters";
+import { ShopProducts, orderByToSort } from "~/components/website/ShopProducts";
+import { getFilterConfig, getProductCategoryTree, getShopTemplate, listProducts, type ProductListResult } from "~/server/data";
 import { useT } from "~/i18n";
 
 export const Route = createFileRoute("/collection/")({
   validateSearch: parseCollectionSearch as (search: Record<string, unknown>) => CollectionSearch,
   loaderDeps: ({ search }) => ({ search }),
-  loader: async ({ deps }) => {
-    const [layout, cats, list] = await Promise.all([
-      getLayoutData(),
-      getProductCategoryTree().catch(() => []),
-      listProducts({ page: deps.search.page, filters: searchToFilters(deps.search), pageSize: 24 }).catch(
-        () => ({ items: [], total: 0, page: 1, pageSize: 24 }) as ProductListResult,
-      ),
-    ]);
-    return { layout, cats, list };
-  },
+  loader: async ({ deps }) => loadCollection({ data: deps.search }),
   head: () => ({
     meta: [
       { title: "All Products | IoT Gateways & Devices | Dusun IoT" },
@@ -33,12 +34,72 @@ export const Route = createFileRoute("/collection/")({
   component: CollectionIndexPage,
 });
 
+/** # 函数 产品归档页数据加载（Server Function：客户端导航时由服务端执行，
+ * 避免把 db/查询层打进浏览器包；返回纯 JSON） */
+const loadCollection = createServerFn({ method: "GET" })
+  .validator((d: CollectionSearch) => d)
+  .handler(async ({ data: search }) => {
+    const filters = searchToFilters(search);
+    const [layout, cats, list, shop, filterConfig] = await Promise.all([
+      getLayoutData(),
+      getProductCategoryTree().catch(() => []),
+      listProducts({ page: search.page, filters, pageSize: 24, sort: orderByToSort(search.orderby) }).catch(
+        () => ({ items: [], total: 0, page: 1, pageSize: 24 }) as ProductListResult,
+      ),
+      getShopTemplate().catch(() => null),
+      getFilterConfig().catch(() => []),
+    ]);
+    // Elementor 文档是递归 JSON，TanStack 序列化校验无法展开；运行时为纯 JSON
+    return { layout, cats, list, shop, filters, filterConfig, search } as any;
+  });
+
+/** # 类型 归档页 loader 数据 */
+type CollectionData = {
+  layout: any;
+  cats: { id: number; name: string; slug: string; parentId: number | null; count: number }[];
+  list: ProductListResult;
+  shop: { meta?: unknown } | null;
+  filters: Record<string, string[]>;
+  filterConfig: { name: string; slug: string; values: { value: string; slug: string; count: number }[] }[];
+  search: CollectionSearch;
+};
+
 /** # 组件 全部产品列表页 */
 function CollectionIndexPage() {
-  const t = useT();
   const data = Route.useLoaderData();
+  const shopDoc = extractElementor(data.shop?.meta);
+  if (shopDoc) {
+    return (
+      <Layout layout={data.layout}>
+        <ElementorRenderer
+          doc={shopDoc}
+          vars={{ breadcrumb: [{ label: "Home", url: "/" }, { label: "Shop" }] }}
+          shortcodes={{
+            "98d2008": (
+              <ShopFilters config={data.filterConfig} selected={data.filters} total={data.list.total} search={data.search} />
+            ),
+            "d761846": (
+              <ShopProducts
+                items={data.list.items}
+                total={data.list.total}
+                page={data.list.page}
+                pageSize={data.list.pageSize}
+                search={data.search}
+              />
+            ),
+          }}
+        />
+      </Layout>
+    );
+  }
+  return <FallbackCollectionPage data={data} />;
+}
+
+/** # 组件 降级列表页（归档模板缺失时） */
+function FallbackCollectionPage(props: { data: CollectionData }) {
+  const t = useT();
+  const data = props.data;
   const topCats = data.cats.filter((c) => !c.parentId && c.slug !== "uncategorized");
-  const page = data.list.page;
   return (
     <Layout layout={data.layout}>
       <div className="site-container">
@@ -55,14 +116,13 @@ function CollectionIndexPage() {
         <section className="mt-5 mb-8">
           <div className="grid grid-cols-2 gap-[18px] min-[960px]:grid-cols-4">
             {topCats.map((c) => (
-              <Link key={c.id} to="/collection/$slug/" params={{ slug: c.slug }} className="block overflow-hidden rounded-lg border border-line bg-white text-brand transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(16,42,76,0.1)]">
+              <Link key={c.id} to="/collection/$slug/" params={{ slug: c.slug }} className="block overflow-hidden rounded-lg border border-line bg-white text-brand transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5">
                 <div className="px-4 pt-3.5 pb-[18px]">
                   <div className="mb-1.5 text-[15px] leading-[1.45] font-semibold">{c.name}</div>
                   <div className="text-[13px] text-muted-foreground">{t("collection_products_count", { total: Number(c.count) })}</div>
                 </div>
               </Link>
             ))}
-            {topCats.length === 0 ? <p className="py-[60px] text-center text-muted-foreground">Product categories are being updated.</p> : null}
           </div>
         </section>
 
@@ -70,14 +130,9 @@ function CollectionIndexPage() {
           {data.list.items.map((p) => (
             <ProductCard key={p.id} p={p} />
           ))}
-          {data.list.items.length === 0 ? <p className="py-[60px] text-center text-muted-foreground">No products found. They may still be syncing — please check back soon.</p> : null}
+          {data.list.items.length === 0 ? <p className="py-[60px] text-center text-muted-foreground">No products found.</p> : null}
         </div>
-        <Pagination
-          page={page}
-          total={data.list.total}
-          pageSize={data.list.pageSize}
-          makeHref={(p) => `/collection/?page=${p}`}
-        />
+        <Pagination page={data.list.page} total={data.list.total} pageSize={data.list.pageSize} makeHref={(p) => `/collection/?page=${p}`} />
       </div>
     </Layout>
   );
diff --git a/src/server/data.ts b/src/server/data.ts
index 40535526d..c7a29fdde 100644
--- a/src/server/data.ts
+++ b/src/server/data.ts
@@ -114,6 +114,11 @@ export async function getFooterTemplate() {
   return getPublishedContent("footer", "template");
 }
 
+/** # 函数 产品归档页 Elementor 模板（legacy elementor_library post 1398） */
+export async function getShopTemplate() {
+  return getPublishedContent("shop-archive", "template");
+}
+
 /** # 类型 产品筛选状态：每个筛选字段已选值列表 */
 export type FilterState = Record<string, string[]>;
 
@@ -146,7 +151,7 @@ export async function listProducts(opts: {
   q?: string;
   page?: number;
   pageSize?: number;
-  sort?: "latest" | "title" | "views";
+  sort?: "default" | "latest" | "title" | "views" | "price" | "price-desc";
 }): Promise<ProductListResult> {
   const page = Math.max(1, opts.page || 1);
   const pageSize = Math.min(48, Math.max(8, opts.pageSize || 24));
@@ -181,7 +186,16 @@ export async function listProducts(opts: {
 async function runProductQuery(conds: unknown[], page: number, pageSize: number, sort?: string): Promise<ProductListResult> {
   const where = and(...(conds as never[]));
   const [{ total }] = await db.select({ total: count() }).from(products).where(where);
-  const order = sort === "title" ? asc(products.title) : sort === "views" ? desc(products.views) : desc(products.createdAt);
+  // 排序（对齐原站 /shop/ 的 orderby：默认=WooCommerce menu_order、
+  // popularity=浏览量、date/最新=发布时间、price/price-desc=价格升降；
+  // menu_order 由 scripts/import-product-menu-order.ts 写入 products.meta.menu_order）
+  const order =
+    sort === "title" ? asc(products.title)
+    : sort === "views" ? desc(products.views)
+    : sort === "price" ? asc(products.price)
+    : sort === "price-desc" ? desc(products.price)
+    : sort === "latest" ? desc(products.createdAt)
+    : sql`NULLIF(${products.meta}->>'menu_order', '')::int ASC NULLS LAST, ${products.id} ASC`;
   const items = await db
     .select({
       id: products.id,
diff --git a/src/styles/app.css b/src/styles/app.css
index dd3f6ef29..0e2534cce 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -893,3 +893,89 @@ body.dialog-prevent-scroll { overflow: hidden; }
   .ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(6) { width: 48%; margin: 0 0 2% 2%; }
   .ds-inquiry-popup .ele-new-form4-dif .wpcf7-form p:nth-of-type(7) { width: 100%; margin: 0 0 2%; }
 }
+
+/* ===== # 页面类型 产品归档 /shop/（原站 elementor_library post 1398 + WooCommerce + WPC 筛选）
+ * hero a2ab15c：bg #F4F5F8 / padding 0 30 / content 1400，面包屑 14.72px #767676（下距 1em）；
+ * 主体 65176b9：bg #F4F5F8 / padding 0 30 30，两列 20%/80%（各白底 + 20px 内边距）；
+ * 左列 WPC 筛选：section 1px #C9CEE8、标题 #F4F5F8 padding 10、行高 20.8、组间距 32；
+ * 右列：h1 1.5rem/600、结果计数 + 排序（42px 高 #C9CEE8 圆角 4）、24 卡 4 列 gap 10、
+ * 卡片 1px 边框/圆角 4/底部 1.5em、图 1:1、标题 16/600/#444、按钮白底橙字描边圆角 8、
+ * 分页 margin-top 40（数字 25×32 padding 8、当前页 #E9E6ED/#816F98）。 */
+[data-el="a2ab15c"] > div { align-items: center; }
+[data-el="a2ab15c"] .woocommerce-breadcrumb { margin: 0 0 1em; font-size: 0.92em; color: #767676; line-height: 1.5; }
+[data-el="a2ab15c"] .woocommerce-breadcrumb a { color: #767676; text-decoration: none; }
+[data-el="a2ab15c"] .woocommerce-breadcrumb a:hover { text-decoration: underline; }
+
+/* WPC 筛选侧栏 */
+[data-el="98d2008"] .wpc-filters-main-wrap { width: auto; }
+[data-el="98d2008"] .wpc-posts-found { height: 24px; margin: 0; }
+[data-el="98d2008"] .wpc-filter-set-widget-title { margin: 0 0 12px; font-size: 16px; line-height: 24px; color: #333; }
+[data-el="98d2008"] .wpc-filters-section { border: 1px solid #C9CEE8; margin: 0 0 32px; background: #fff; }
+[data-el="98d2008"] .wpc-filter-content { padding: 10px; }
+[data-el="98d2008"] .wpc-filter-title {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; margin: 0; padding: 10px; border: 0; background: #F4F5F8;
+  font-size: 16px; font-weight: 400; line-height: 24px; color: #333; text-align: left;
+}
+[data-el="98d2008"] button.wpc-filter-title { cursor: pointer; }
+[data-el="98d2008"] .wpc-open-icon::before {
+  content: ""; display: inline-block; width: 8px; height: 8px;
+  border-right: 1px solid #333; border-bottom: 1px solid #333; transform: rotate(45deg);
+}
+[data-el="98d2008"] .wpc-filter-title[aria-expanded="true"] .wpc-open-icon::before { transform: rotate(-135deg); }
+[data-el="98d2008"] .wpc-filters-ul-list { list-style: none; margin: 0; padding: 2px 0 0; }
+[data-el="98d2008"] .wpc-checkbox-item { display: list-item; margin: 0 0 12px; padding: 0; font-size: 16px; line-height: 1.3; }
+[data-el="98d2008"] .wpc-term-item-content-wrapper { display: flex; align-items: center; gap: 4px; }
+[data-el="98d2008"] .wpc-term-item-content-wrapper input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #ED6C00; }
+[data-el="98d2008"] .wpc-term-item-content-wrapper label { display: flex; align-items: baseline; gap: 2px; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.3; color: #333; cursor: pointer; }
+[data-el="98d2008"] .wpc-term-selected .wpc-filter-link { color: #ED6C00; }
+[data-el="98d2008"] .wpc-term-count { color: #333; }
+[data-el="98d2008"] .wpc-filter-more-less { padding: 0; }
+[data-el="98d2008"] .wpc-filter-more-less button { border: 0; background: none; padding: 0; color: #A4A8B7; font-size: 16px; line-height: 24px; cursor: pointer; }
+[data-el="98d2008"] .wpc-inner-widget-chips-wrapper { margin: 0 0 8px; }
+[data-el="98d2008"] .wpc-filter-chips-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+[data-el="98d2008"] .wpc-filter-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #C9CEE8; border-radius: 3px; padding: 2px 6px; font-size: 13px; }
+[data-el="98d2008"] .wpc-filter-chip button { border: 0; background: none; cursor: pointer; padding: 0; color: #767676; }
+[data-el="98d2008"] .wpc-clear-all { border: 0; background: none; padding: 0; margin-top: 6px; color: #ED6C00; font-size: 13px; cursor: pointer; }
+[data-el="98d2008"] .wpc-filter-collapsed .wpc-filter-content { display: none; }
+
+/* 右列商品区 */
+[data-el="d761846"] .woocommerce::after { content: ""; display: block; clear: both; }
+[data-el="d761846"] .woocommerce-result-count { float: left; margin: 6px 0 16px; font-size: 16px; line-height: 24px; color: #333; }
+[data-el="d761846"] .woocommerce-ordering { float: right; margin: 0 0 16px; }
+[data-el="d761846"] .woocommerce-ordering select {
+  height: 42px; padding: 8px 16px; border: 1px solid #C9CEE8; border-radius: 4px;
+  background: #efefef; color: #000; font-size: 16px; font-family: inherit;
+}
+[data-el="d761846"] ul.products {
+  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px; list-style: none; margin: 0; padding: 0; clear: both;
+}
+[data-el="d761846"] ul.products li.product {
+  display: flex; flex-direction: column; justify-content: space-between;
+  text-align: center; background: #fff; border: 1px solid #C9CEE8; border-radius: 4px;
+  padding: 0 0 1.5em; margin: 0; transition: box-shadow 0.3s, border-color 0.3s;
+}
+[data-el="d761846"] ul.products li.product:hover { box-shadow: 0 10px 20px 0 rgba(35, 37, 121, 0.15); border-color: rgba(35, 37, 121, 0.15); }
+[data-el="d761846"] .woocommerce-loop-product__link { display: block; text-decoration: none; color: inherit; }
+[data-el="d761846"] ul.products li.product img { display: block; width: 100%; height: auto; margin: 0; }
+[data-el="d761846"] ul.products li.product .woocommerce-loop-product__title {
+  margin: 0; padding: 8px 0; font-size: 16px; font-weight: 600; line-height: 1.2; color: #444;
+}
+[data-el="d761846"] .woocommerce-loop-product__buttons { margin-top: auto; display: flex; flex-direction: column; align-items: center; }
+[data-el="d761846"] ul.products li.product .button {
+  display: inline-block; margin: 1rem auto 0; padding: 0.618em 1em; line-height: 1;
+  font-size: 1em; font-weight: 400; color: #FFA11B; background: #fff;
+  border: 1px solid #FFA11B; border-radius: 8px; text-decoration: none; transition: all 0.3s;
+}
+[data-el="d761846"] ul.products li.product .button:hover { color: #fff; background: #ED6C00; border-color: #ED6C00; }
+[data-el="d761846"] .woocommerce-pagination { margin: 40px 0 0; clear: both; text-align: center; }
+[data-el="d761846"] .woocommerce-pagination ul.page-numbers { display: inline-flex; justify-content: center; align-items: center; list-style: none; margin: 1px; padding: 0; border: 1px solid #CFC8D8; }
+[data-el="d761846"] .woocommerce-pagination ul.page-numbers li { display: block; }
+[data-el="d761846"] .woocommerce-pagination ul.page-numbers .page-numbers {
+  display: block; min-width: 25px; padding: 8px; font-size: 16px; line-height: 1;
+  color: #ED6C00; text-decoration: none;
+}
+[data-el="d761846"] .woocommerce-pagination ul.page-numbers .current { background: #E9E6ED; color: #816F98; }
+[data-el="d761846"] .woocommerce-pagination ul.page-numbers .dots { color: #333; }
+