<p>Use Categories for Teacher &amp; Country.  Add inputs for those categories to your Section. </p>

<p>To create your select inputs:</p>

<pre><code>{% 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() %}
&lt;select&gt;
  {% for item in teachers %}
       &lt;option value='{{ item.title }}'&gt;{{ item.title }}&lt;/option&gt;
  {% endfor %}
&lt;/select&gt;
&lt;select&gt;
  {% for item in countries %}
       &lt;option value='{{ item.title }}'&gt;{{ item.title }}&lt;/option&gt;
  {% endfor %}
&lt;/select&gt;
</code></pre>

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

<pre><code>{% set filterId = craft.request.getParam('id') %}
{% set events = craft.entries.section('events').relatedTo({targetElement:filterId}).startDate('and', '&gt;= ' ~ now) %}
</code></pre>

<p>If you needed to filter for more than one category group:</p>

<pre><code>{% set entries = craft.entries({
    section: 'events',
    relatedTo: [
        'and',
        { targetElement: craft.request.getParam('teacherId') },
        { targetElement: craft.request.getParam('countryId') }
    ]
}) %}
</code></pre>

CC BY-SA 3.0
2015-08-31T23:56:31.373Z
2015-08-31T23:56:31.373Z
a-am
<p>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.</p>

<p>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.</p>

<p>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...</p>

CC BY-SA 3.0
2015-08-25T19:17:01.260Z
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
CC BY-SA 3.0
2015-08-25T19:31:48.830Z
What do you mean by static sorting?
a-am
CC BY-SA 3.0
2015-08-25T21:58:37.110Z
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
CC BY-SA 3.0
2015-08-26T06:13:59.067Z
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...
LessMore Creative Studio
<frontend><sorting>
Changing the frontend sorting according to different fields
# Changing the frontend sorting according to different fields

(Asked by: username_0 on 2015-08-25)

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

**Tags:** frontend, sorting

> **Comments:**
> **username_1**: 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?  
> **username_2**: What do you mean by static sorting?  
> **username_3**: 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.  
> **username_0**: 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...  

---

## 1 answers

### Answer by username_2 on 2015-08-31. Score: 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 %}
       {{ item.title }}
  {% endfor %}


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


---

