2

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? – Bill Criswell Aug 25 '15 at 19:17
  • What do you mean by static sorting? – aran Aug 25 '15 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 Aug 25 '15 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... – Less and More Collective Aug 26 '15 at 6:13
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() %}
<select>
  {% for item in teachers %}
       <option value='{{ item.title }}'>{{ item.title }}</option>
  {% endfor %}
</select>
<select>
  {% for item in countries %}
       <option value='{{ item.title }}'>{{ item.title }}</option>
  {% endfor %}
</select>

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: [
        'and',
        { targetElement: craft.request.getParam('teacherId') },
        { targetElement: craft.request.getParam('countryId') }
    ]
}) %}

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.