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:
1 parent
6a78b553d6
commit
aed056152c
5 files changed
+344
-154
No files matched your search
@@ -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
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user