-
-
Save piotrpog/6c8d76a882fef8c82ea8eda99317bf1d to your computer and use it in GitHub Desktop.
{# v2 #} | |
{% if pagination_list is defined %} | |
{% js %} | |
// AJAX REQUEST DATA | |
{% set current_url = craft.request.getRequestUri()|split(craft.request.getPath())[0]~craft.request.getPath() %} | |
{% set ajax_data = { | |
current_url: current_url, | |
pagination_list: pagination_list|hash, | |
pagination_parameters: pagination_parameters ?? null, | |
} %} | |
// JS SETTINGS | |
var loading_class = 'is-loading' | |
var pagination_list_class = 'js-pages-list' | |
var pagination_wrapper_class = 'js-pages-wrapper' | |
var animation_speed = 1000 | |
// TWIG TO JS | |
var endpoint_url = '{{url(pagination_endpoint ?? 'pagination_endpoint')}}' | |
var url_params = '{{craft.app.request.getQueryStringWithoutPath() is not empty ? '?' ~ craft.app.request.getQueryStringWithoutPath()}}'; | |
var current_url = '{{current_url}}' | |
var page_trigger = '{{craft.app.config.general.pageTrigger}}' | |
// AJAX REQUEST | |
var current_request = null; | |
function change_page(page_number, done){ | |
current_request = $.ajax({ | |
url: endpoint_url+'/'+page_trigger+page_number+url_params, | |
method: 'GET', | |
data: {{ajax_data|json_encode|raw}}, | |
beforeSend: function(){ | |
if(current_request != null) { | |
current_request.abort(); | |
} | |
$('.'+pagination_list_class).addClass(loading_class); | |
var page = $("html, body"); | |
page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){ | |
page.stop(); | |
}); | |
page.animate({ scrollTop: | |
$('.'+pagination_wrapper_class).position().top }, animation_speed, function(){ | |
page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove"); | |
}); | |
} | |
}).always(function(){ | |
$('.'+pagination_list_class).removeClass(loading_class); | |
}).done(function(data) { | |
$('.'+pagination_wrapper_class).html(data); | |
if(done){ | |
done(); | |
} | |
}); | |
} | |
// BACK/FORWARD BUTTON | |
var initial_page = '{{craft.request.getPageNum()}}' | |
window.addEventListener('popstate', function(e) { | |
if(e.state){ | |
change_page(e.state); | |
}else{ | |
change_page(initial_page); | |
} | |
}); | |
// PAGINATION CLICK EVENT | |
$('.'+pagination_wrapper_class).on('click', '[data-number]', function(e){ | |
e.preventDefault(); | |
var selected_page = $(this).attr('data-number'); | |
change_page(selected_page, function(){ | |
history.pushState(selected_page, null, current_url+'/'+page_trigger+selected_page+url_params); | |
}); | |
}); | |
{% endjs %} | |
<div class="js-pages-wrapper"> | |
{% include pagination_list with { | |
pagination_parameters: pagination_parameters ?? null, | |
} %} | |
</div> | |
{% endif %} |
{# v2 #} | |
{% if craft.app.request.segments|last == _self and craft.app.request.isAjax %} | |
{% set pages_list_path_hashed = craft.request.getParam('pagination_list') %} | |
{% if craft.app.security.validateData(pages_list_path_hashed) is not same as(false) %} | |
{% include craft.app.security.validateData(pages_list_path_hashed) with { | |
pagination_parameters: craft.request.getParam('pagination_parameters') | |
} %} | |
{% endif %} | |
{% else %} | |
{% redirect currentSite.baseUrl 301 %} | |
{% endif %} |
{# v1 #} | |
{# example element query - adjust it to your website #} | |
{% paginate craft.entries.section('articles').limit(3) as pageInfo, pageEntries %} | |
{% if craft.request.isAjax() %} | |
{% do pageInfo.setBasePath(craft.request.getParam('current_url')) %} | |
{% endif %} | |
{# replace code below with your entries list and pagination component #} | |
{% include '_components/pagination' %} | |
<br> | |
<div class="js-pages-list"> | |
{% for entry in pageEntries %} | |
<a href="{{entry.url}}">{{entry.title}}</a> | |
{% endfor %} | |
</div> | |
{% include '_components/pagination' %} |
Hi there -
I was wondering if I could ask for a bit of help.
I'm trying to get 3 different lists to paginate on the same page (which I have done using your method).
Each list has its own links for the next pagination page (as they are different lengths).The issue is that when I click on one the links it updates all the paginated content to be the same:
Before:
After:
Is it possible to have multiple links on the same page, each being controlled separately?
I have loaded these files like this:
is that correct? or should it just be one link?
Thanks -
W
I dont think that it would be possible to use multiple list on same page using my method - pagination changes url by adding number, so if number appears in URL, it would affect all lists.
If you ignore URL asoect, i think you would just need to create 3 copies of main pagination files, so each set of buttons have separete selectors for javascript, variable names etc so there are no conflicts.
Hi there -
I was wondering if I could ask for a bit of help.
I'm trying to get 3 different lists to paginate on the same page (which I have done using your method).
Each list has its own links for the next pagination page (as they are different lengths).
The issue is that when I click on one the links it updates all the paginated content to be the same:
Before:
After:
Is it possible to have multiple links on the same page, each being controlled separately?
I have loaded these files like this:
is that correct? or should it just be one link?
Thanks -
W