我有一个安装了 FacetWP 插件的 wordpress/woocommerce 商店,用于在我的商店中对产品进行分类和过滤。该插件提供“加载更多”功能,可以在产品类别屏幕上延迟加载更多产品。
在那里,我想将无限加载功能添加到 FacetWPs 的“加载更多”按钮。因此,一旦用户从页面底部向下滚动到某个偏移量,应该会自动单击“加载更多”按钮。
不幸的是,他们没有为此提供开箱即用的功能。
所以我的问题是:如何实现facet-wps“加载更多”按钮的无限加载功能?
我尝试将此处的代码https://gist.github.com/hirejordansmith/cc2363a860a7ed8320307b46f1196407#gistcomment-3921811添加到我的 function.php 文件中,但它不适用于所有浏览器:
/* globals FWP */
/**
* JavaScript for FacetWP Infinite Scroll
*/
( function( $ ) {
'use-strict';
// TODO: update for your requirements
var bottomDistance = 1500; // the distance in px to the bottom of the page, when facetwp should trigger
var throttleFetchDelay = 5000; // the timeout for checking if to fetch new products again after a fetch if triggered
var isFetching = false; // if facetwp is already fetching new products
var isChecking = false; // if a timeout for checking if to fetch new products is already set
var throttleTimer = null; // the timer for checking if to fetch new products
var throttleDelay = 100; // the timeout for checking if to fetch new products
$( function() {
var $win = $( window );
var $doc = $( document );
function ScrollHandler() {
if (isChecking) {
return;
}
clearTimeout( throttleTimer );
console.log( 'start timer');
isChecking = true;
throttleTimer = setTimeout( function() {
isFetching = false;
throttleDelay = 100;
if ( ($( window ).scrollTop()
+ $( window ).height()
> $( document ).height() - bottomDistance)
&& !isFetching ) {
console.log( 'aaaaaaaaaaaaaa' );
} else {
console.log( 'bbbbbbbbbbbbb' );
isChecking = false;
return;
}
isFetching = true;
throttleDelay = throttleFetchDelay;
if ( FWP.settings.pager.page < FWP.settings.pager.total_pages ) {
FWP.paged = parseInt( FWP.settings.pager.page ) + 1;
FWP.is_load_more = true;
//alert("start");
if ( jQuery( '.mycurellsloadder' )
.length == 0 ) {
jQuery( ".woocommerce-pagination" )
.append( "<div class='mycurellsloadder'></div>" );
}
FWP.soft_refresh = false;
FWP.refresh();
isChecking = false;
}
}, throttleDelay );
}
wp.hooks.addFilter( 'facetwp/template_html', function( resp, params ) {
if ( FWP.is_load_more ) {
// alert("end");
jQuery( ".mycurellsloadder" )
.remove();
FWP.is_load_more = false;
$( '.facetwp-template' )
.append( params.html );
return true;
}
return resp;
} );
$doc.on( 'facetwp-loaded', function() {
if ( !FWP.loaded ) {
console.log( 'your message' );
$win.off( 'scroll', ScrollHandler )
.on( 'scroll', ScrollHandler );
}
} );
} );
} )( jQuery );