zcode/dusuniot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.10.21: 产品归档页 C1-C4（原站 /shop/ 模板 1398 + WPC 筛选 + WooCommerce 网格）

Browse Source 
- 导入 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
2026-11-02 12:32:18 +08:00
parent 5ff5f9d477
commit ddeeca3293
12 changed files with 866 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/app.css
+86
View File
@@ -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; }