Filter entries with AJAX

Question

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

Answer 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.

Answer 2

The Sprig plugin makes this rather straightforward to achieve. Any time the category is changed, the component will re-render itself and display the resulting entries.

{{ sprig('_components/filteredEntries') }}

{{ sprig.script }}

{#--- _components/filteredEntries ---#}

{% set categoryId = categoryId ?? '' %}

<select sprig name="categoryId">
    <option value="">All categories</option>
    {% for category in craft.categories.all() %}
         <option value="{{ category.id }}" {{ category.id == categoryId ? 'selected' }}>{{ category.title }}</option>
    {% endfor %}
</select>


{% for entry in craft.entries.relatedTo(categoryId).all() %}
    {{ entry.title }}
{% endfor %}

See more code examples in the Sprig cookbook.

Answer 3

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 yourself, you have to use the Ajax to toggle the data on user input.

You have to create a small plugin or module and use the controller to handle the ajax call.

In Craft Cms there is no inbuilt method available for the frontend to fire the ajax.