#jquery #infinite-scroll
#jquery #бесконечная прокрутка
Вопрос:
У меня есть страница категории продукта с бесконечной прокруткой, загружающей следующую категорию. Это работает нормально, но есть некоторые категории, которые имеют несколько страниц, поэтому эти категории должны загружать следующие страницы перед загрузкой следующих категорий. Код нормально загружает следующие категории, но не загружает следующие страницы, когда появляется многостраничная категория. Код загружает следующие страницы, если вы находитесь в многостраничной категории, но тогда он перестанет работать.
Это код, который я сделал до сих пор: я сделал условное условие, если существует следующая страница, запустите бесконечную прокрутку для страниц и перезапустите функцию, когда последняя, если нет, запустите бесконечную прокрутку для категорий и перезапустите функцию, когда закончите.
$(document).ready(function(){
(function foo() {
if ($('.page-numbers').length){
var $container = $('#main').infiniteScroll({
path: ".page-numbers a.next",
hideNav: ".woocommerce-pagination",
append: "#main ul.products",
status: '.page-load-status',
prefill: true,
debug: true,
});
$container.on( 'history.infiniteScroll', function() {
ga( 'set', 'page', location.pathname );
ga( 'send', 'pageview' );
});
$container.on( 'last.infiniteScroll', function( event, response, path ) {
foo.call(this)
});
} else {
var nextURL;
function updateNextURL( doc ) {
nextURL = $( doc ).find('.tax-pages a.next').attr('href');
}
// get initial nextURL
updateNextURL( document );
var $container2 = $('#main').infiniteScroll({
// use function to set custom URLs
path: function() {
return nextURL;
},
hideNav: ".tax-pages",
append: ".products-wrap",
status: '.page-load-status',
debug: true,
prefill: true,
});
// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) {
updateNextURL( response );
});
$container2.on( 'history.infiniteScroll', function() {
ga( 'set', 'page', location.pathname );
ga( 'send', 'pageview' );
foo.call(this)
});
}
}());
});
Ответ №1:
На всякий случай, если кому-то это нужно, я решил это с помощью одного экземпляра infinitescroll и включил условие в ссылку следующей категории.
JS
var nextURL;
function updateNextURL( doc ) {
nextURL = $( doc ).find('.tax-pages a.next').attr('href');
}
// get initial nextURL
updateNextURL( document );
var $container2 = $('#main').infiniteScroll({
// use function to set custom URLs
path: function() {
return nextURL;
},
hideNav: ".tax-pages",
append: ".products-wrap",
status: '.page-load-status',
debug: true,
prefill: true,
});
// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) {
updateNextURL( response );
});
$container2.on( 'history.infiniteScroll', function() {
ga( 'set', 'page', location.pathname );
ga( 'send', 'pageview' );
});
PHP: я добавил этот код в эту функцию.
if ( $next_term )
$next_link = get_next_posts_link();
if ($next_link){
$link[] = '<div class="tax-pages"> <a class="next" href="' . get_next_posts_page_link() . '">Next</a></div>';
} else {
$link[] = '<div class="tax-pages"> <a class="next" href="' . esc_url( get_term_link( $next_term ) ) . '">' . $next_term->name . '</a></div>';
}