v0.10.21: 产品归档页 C1-C4（原站 /shop/ 模板 1398 + WPC 筛选 + WooCommerce 网格）
- 导入 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
This commit is contained in:
bigcode
@@ -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: " / " }} /> : 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
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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't find what you'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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
+16
-2
@@ -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,
|
||||
|
||||
@@ -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; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user