[Solution] How to add drop down sorting to list filters

[JTe]

Here is a way to have drop down sorting of the 'Above' filters. Many modern search forms have an easy-to-user way to filter the search results. Here we will add a drop down option list on the bottom of the filters filed.

You can freely add filters to the list as long as elements you are using are accessible for your list. To add a sorting element add the element ID as an orderby value and the sorting direction (asc or desc) as an orderdir value.

Make the filter to trigger with a submit button, configure the filters above the list and enable single ordering:

Set in list settings [Details] -> [Filters] -> [Filter trigger] to “Submit button”.
Set in list settings [Details] -> [Filters] -> [Filters] to “Above”.
Set in list settings [Details] -> [Advanced] -> [Enable single-ordering] to “Yes”.

Remember also to disable all element ordering, otherwise ordering can get totally unpredictable:

Set within your edit element -> [List view settings] -> [List settings] -> [Allow ordering] to "No".

Create an override of the bootstrap filter by copying the file:

components/com_fabrik/layouts/list/fabrik-filters-bootstrap.php

to:

components/com_fabrik/views/list/tmpl/{your template}/layouts/list/fabrik-filters-bootstrap.php

Starting after line 84:

<input type="button" class="pull-right  btn-info btn fabrik_filter_submit button"

Add the following (using your element IDs, directions, and titles:

<select name="sortelement" id="sortelement" class="fabrikinput form-control inputbox input input-xlarge">
   <option value='{"orderby":10,”orderdir":"asc”}’>Oldest date first</option>
   <option value='{"orderby":11,”orderdir”:”desc”}’>Newest date first</option>
   <option value='{"orderby":12,”orderdir”:”desc”}’>Latest changes first</option>
   <option value='{"orderby":13,”orderdir":"asc”}’>User ids in alphabetical order</option>
   <option value='{"orderby":14,”orderdir":"asc”}’>Towns in alphabetical order</option>
</select>

Create a list java script file for your list:

components/com_fabrik/js/list-{your list number}.js

Adding these lines:

Fabrik.addEvent('fabrik.list.loaded', function(list) {

    var src = document.getElementById("sortelement")
    src.addEventListener('input', function() {
      sorting = JSON.parse(src.value);
      list.form.orderby.value = sorting.orderby;
      list.form.orderdir.value = sorting.orderdir;
    });
});

That should do it! Hopefully this will be useful for somebody. I might also later on add it to the wiki.

 

[startpoint]

Another variant: load result after change option.
Add this code in filter template or in pagination template.

<select name="sorting" id="sorting" class="fabrikinput form-control inputbox input">
   <option value='{"orderby":element_id,"orderdir":"asc"}'>Price Asc</option>
   <option value='{"orderby":element_id,"orderdir":"desc"}'>Price Desc</option>
</select>

element_id - your sorting element.
Create a list javascript file for your list:

components/com_fabrik/js/list_{your list number}.js

Place this code on it:

requirejs(['fab/fabrik'], function() {
    Fabrik.addEvent('fabrik.list.loaded', function(list) {
        var src = document.getElementById("sorting");
        var orderby = list.form.orderby.value;
        var orderdir = list.form.orderdir.value;
        var sorting = '{"orderby":' + orderby + ',"orderdir":"' + orderdir + '"}';
        src.value = sorting;
        src.addEventListener('input', function() {
            sorting = JSON.parse(src.value);
            console.log(sorting);
            list.form.orderby.value = sorting.orderby;
            list.form.orderdir.value = sorting.orderdir;
            list.submit();
        });
    });
});