feat(widgets): shared tab JS + main posts ajax load_mode

Move category/forum/product tab lazy load into widget-set.js with
skeletons; MainPosts gains load_mode=ajax first-paint placeholders.
This commit is contained in:
kate522 committed 2026-07-21 12:42:58 +08:00
1 parent 6a78b553d6
commit aed056152c
5 files changed
+344 -154

No files matched your search

+6 -35
View File
@@ -105,47 +105,18 @@ class WidgetProductTab extends \WP_Widget {
echo '</div>';
} else {
echo '<div class="ajaxpager aksrt-product-widget__grid product-lists-row aksrt-product-widget--' . esc_attr($style) . ' is-lazy" data-aksrt-ajaxpager>';
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader></div>';
echo '<div class="post_ajax_loader" data-aksrt-ajax-loader>';
echo '<div class="aksrt-product-tab__skeleton">';
for ($si = 0; $si < min(4, $per_page); $si++) {
echo '<div class="placeholder-row product-card-placeholder"><div class="placeholder thumb"></div><div class="placeholder k1"></div><div class="placeholder s1"></div></div>';
}
echo '</div></div>';
echo '<div class="ajax-pag hide"><div class="next-page ajax-next"><a href="#"></a></div></div>';
echo '</div>';
}
echo '</div>';
}
// Lightweight tab switch + lazy REST load (no inline product HTML duplication).
echo '<script>(function(){';
echo 'var root=document.currentScript&&document.currentScript.parentElement;if(!root)return;';
echo 'var rest=root.getAttribute("data-rest")||"";';
echo 'var per=root.getAttribute("data-per-page")||"8";';
echo 'var style=root.getAttribute("data-style")||"default";';
echo 'var paginate=root.getAttribute("data-paginate")||"ajax";';
echo 'function loadPanel(panel,btn){if(!panel||panel.getAttribute("data-loaded")==="1")return;';
echo 'var grid=panel.querySelector("[data-aksrt-ajaxpager]");if(!grid||!rest)return;';
echo 'var qs=new URLSearchParams({page:"1",per_page:per,style:style,paginate:paginate,';
echo 'orderby:btn.getAttribute("data-orderby")||"date",order:"DESC",';
echo 'cat_ids:btn.getAttribute("data-cat-ids")||"",tag_ids:btn.getAttribute("data-tag-ids")||"",';
echo 'discount_ids:btn.getAttribute("data-discount-ids")||""});';
echo 'var url=rest+(rest.indexOf("?")>-1?"&":"?")+qs.toString();';
echo 'grid.classList.add("is-ajax-loading");';
echo 'fetch(url,{credentials:"same-origin",headers:{Accept:"application/json","X-WP-Nonce":(window.aksrtData&&aksrtData.restNonce)||""}})';
echo '.then(function(r){return r.json()}).then(function(j){';
echo 'var d=(j&&j.data&&(j.data.data||j.data))||j||{};';
echo 'var html=d.html||""; var pag=d.paginate_html||d.paginateHtml||"";';
echo 'var loader=grid.querySelector("[data-aksrt-ajax-loader]");';
echo 'grid.innerHTML=""; if(html)grid.insertAdjacentHTML("beforeend",html); if(pag)grid.insertAdjacentHTML("beforeend",pag);';
echo 'if(loader)grid.appendChild(loader); panel.setAttribute("data-loaded","1"); grid.classList.remove("is-ajax-loading");';
echo '}).catch(function(){grid.classList.remove("is-ajax-loading");});}';
echo 'root.querySelectorAll(".aksrt-product-tab__header").forEach(function(btn){';
echo 'btn.addEventListener("click",function(){';
echo 'root.querySelectorAll(".aksrt-product-tab__header").forEach(function(b){b.classList.remove("is-active")});';
echo 'root.querySelectorAll(".aksrt-product-tab__panel").forEach(function(p){p.style.display="none"});';
echo 'btn.classList.add("is-active");';
echo 'var idx=btn.getAttribute("data-tab-index");';
echo 'var panel=root.querySelector(\'.aksrt-product-tab__panel[data-tab-index="\'+idx+\'"]\');';
echo 'if(panel){panel.style.display="";loadPanel(panel,btn);}';
echo '});});';
echo '})();</script>';
echo '</div>';
echo $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
}