kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(shop): category filter bar + sort/load-more 1:1 UX

Browse Source 
Port zibll hierarchical cat tabs, multi-metric sort with price toggle,
skeleton/empty states, and REST archive payload (header/html/paginate)
while reusing product-card template for AJAX HTML.
This commit is contained in:
kate522
2026-07-18 16:42:52 +08:00
parent e2587ca3a0
commit 433b7cb3a6
9 changed files with 828 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/product-archive.css
+20
View File
@@ -733,3 +733,23 @@
.aksrt-revenue-page__item .is-in{color:#27ae60;font-weight:700}
.aksrt-revenue-page__item .is-out{color:#e74c3c;font-weight:700}
.aksrt-product-editor__hint{font-size:13px;color:var(--color-ink-4,#8a909c);margin:0 0 10px}
/* ===== zibll-parity cat filter / skeleton ===== */
.aksrt-shop-cat-filter.shop-cat-filter{margin-top:14px}
.shop-cat-filter-tab{display:flex;gap:10px;overflow-x:auto;list-style:none;margin:0 0 10px;padding:0 0 4px;-webkit-overflow-scrolling:touch}
.shop-cat-filter-tab li{flex:0 0 auto}
.shop-cat-filter-tab a,
.shop-cat-filter-tab span,
.shop-cat-filter-child a,
.shop-cat-filter-child span{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;color:var(--color-ink-2,#5c6370);background:var(--surface-4,#f3f4f6)}
.shop-cat-filter-tab .active span,
.shop-cat-filter-child .focus-color,
.shop-cat-filter-orderby .focus-color{color:var(--color-primary,#f04494);background:color-mix(in srgb,var(--color-primary,#f04494) 12%, #fff)}
.shop-cat-filter-child{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.shop-cat-filter-orderby{gap:8px}
.shop-cat-filter-orderby .opacity5{opacity:.55;margin-right:4px;font-size:13px}
.aksrt-product-archive__skeleton{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:8px 0 16px}
.aksrt-product-card--placeholder{min-height:220px;border-radius:12px;background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 37%,#f3f4f6 63%);background-size:400% 100%;animation:aksrtShopSk 1.2s ease infinite}
@keyframes aksrtShopSk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (max-width:992px){.aksrt-product-archive__skeleton{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.aksrt-product-archive__skeleton{grid-template-columns:1fr}}