I am creating a site that has a list of events that I need to be able to sort by different fields. I know how to do it statically in my templates but I want to enable it in the front end.

For the example, each event will have three different sorting fields - 'Teacher', 'Country' and 'Event Date'. The initial order will be according to date but I want that the user will be able to choose from an option button a specific value (with all the available options of this field) and to see only events from a specific teacher or specific country.

I would appreciate any help on how to start such a thing. Again, I know how to create static sorting in the templates but not live one being done in the front-end...

  • I'm having a hard time following the question. Are you trying to do the sorting with Javascript instead of handling it on a request by request basis on the server? Commented Aug 25, 2015 at 19:17
  • What do you mean by static sorting?
    – a-am
    Commented Aug 25, 2015 at 19:31
  • 1
    This doesn't seem like a Craft question. You can use your craft loops to put in data-attributes/classes into your HTML elements that correspond to your filter values. You'd then want to use javascript to manipulate the dom to what is viewable based on the user selection.
    – Ian
    Commented Aug 25, 2015 at 21:58
  • Sorry people, I am quite a novice so I might have confused everyone... Yes, I am trying to change the front-end result and I was not sure if I should do it with Javascript or that there is a way to use craft functionality to manipulate the frontend by user request. What I meant by 'static sorting' is sorting entries via the template using the .order attribute... Commented Aug 26, 2015 at 6:13

1 Answer 1


Use Categories for Teacher & Country. Add inputs for those categories to your Section.

To create your select inputs:

{% set entryIds = craft.entries.section('events').ids() %}
{% set teachers = craft.categories.relatedTo({ sourceElement: entryIds }).group('teacher').find() %}
{% set countries = craft.categories.relatedTo({ sourceElement: entryIds }).group('country').find() %}
  {% for item in teachers %}
       <option value='{{ item.title }}'>{{ item.title }}</option>
  {% endfor %}
  {% for item in countries %}
       <option value='{{ item.title }}'>{{ item.title }}</option>
  {% endfor %}

Then when you submit these as a form or via javascript on your filtered page you would do something like this.

{% set filterId = craft.request.getParam('id') %}
{% set events = craft.entries.section('events').relatedTo({targetElement:filterId}).startDate('and', '>= ' ~ now) %}

If you needed to filter for more than one category group:

{% set entries = craft.entries({
    section: 'events',
    relatedTo: [
        { targetElement: craft.request.getParam('teacherId') },
        { targetElement: craft.request.getParam('countryId') }
}) %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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