1

How would I sort blog entries displayed using AJAX?

What I want to achieve is initially show all posts from a channel (All) but then let my users sort through these posts with a sub navigation using the categories I've applied to the channel entries.

I can doing basic templating in CraftCMS but there seems to be very little clear documentation on how to this.

Thank you

  • What do you mean by "using AJAX"? Are these entries provided by element API endpoint? – piotrpog Jun 13 at 10:54
  • Hello, what I mean is filter these category entries without the page reloading. Unsure if "these entries provided by element API endpoint", they are simply entries I've added in Craft. Thank you for asking. – Spheriri Jun 14 at 19:40
  • "AJAX" implies you are querying some kind of external page. So you are only using javascript to filter entries, yes? And no additional request to any external source. Do these entries need to be filtered without reloading page or can it be with reloading it - no javascript? – piotrpog Jun 14 at 20:13
  • Ah ok. Yes I'd be making no additional request to any external source, just filtering the entries by the categories that are applied to the entries. I could just load another page with the appropriate entries but I'd prefer to avoid loading another page (believe it's a better UX). – Spheriri Jun 14 at 20:41
  • Ok, i believe i have enough info. – piotrpog Jun 15 at 6:02
1

For filtering entries using JS, you could use Isotope JS

First, in your markup give each entry class attribute representing id of category that entry has:

{% for entry in entries %}
<a href="{{entry.url}}" class="category-{{entry.categoryField.one().id ?? null}}">{{entry.title}}</a>
{% endfor %}

Then, you will be able to show entries related only to a specific category using JS code like this:

$grid.isotope({ filter: '.category-5' });

..assuming you defined your isotope grid earlier as $grid. In this example, Isotope will show all entries related to the category with id 5.

  • List.js is also a good option for this kind of front-end filtering and sorting: listjs.com – Dalton Jun 18 at 20:04
1

Yes, you can do this if you use the Craft Ajaxinate plugin. Here's how: Filtering Entries in Craft CMS.

If you want to do it by your self, you have to use the Ajax to toggle the data on user input.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.