1

I've got a working sort dropdown on my front end, but I'm after the dropdown keeping the chosen sort method option instead of resetting to the default top of the dropdown option.

e.g. User clicks sort by Name A - Z > Sorted by name > Dropdown option stays as 'Name A-Z' instead of 'default'.

    <select class="sort-web w-select" data-name="Sort" id="sortQuery" name="Sort">
        <option value="postDate asc">New - Old</option>
        <option value="title desc">Name Z - A</option>
        <option value="title asc">Name A - Z</option>
    </select>

Craft Code

{# Either get the order from the query or use a default #}
{% set order = craft.request.getParam('order', 'title asc')  %}

{% for category in craft.categories.group('university').order(order) %}
  {{ category.title }}
{% endfor %}

JS

{% set orderJs %}
  $(function(){

    $('#sortQuery').on("change", function(e){

     // Get the value from the select
     var filter = $(this).val();
     document.location.href = '{{ craft.request.getUrl() }}?order=' + filter;

   });

  });
{% endset %}
{% includeJs orderJs %}

Any help would be greatly appreciated!

3

In short, you need to set the selected attribute on the option element based on the sort order.

So, if the sort order is title asc, then that option would have the selected (selected="selected") attribute set on it.

I took the liberty to refactor your code to render sort options dynamically and make the selected sort order sticky by comparing the current option being iterated over, against the selected sort option.

{% set sortOptions = [
    {
        label: 'New - Old',
        value: 'postDate asc'
    },
    {
        label: 'Name Z - A',
        value: 'title desc'
    },
    {
        label: 'Name A - Z',
        value: 'title asc'
    },
] %}

{% set selectedSortOption = craft.request.getParam('order', 'title asc') %}

{% for category in craft.categories.group('university').order(selectedSortOption) %}
    {{ category.title }}
{% endfor %}

<select class="sort-web w-select" data-name="Sort" id="sortQuery" name="Sort">
    {% for sortOption in sortOptions %}
        <option value="{{ sortOption.value }}" {{ sortOption.value == selectedSortOption ? 'selected' }}>
            {{ sortOption.label }}
        </option>
    {% endfor %}
</select>

Feel free to follow up if you have any questions.

|improve this answer|||||
  • Hey Selvin, thanks for replying. I'm currently getting the following error in Craft 'Variable "selectedSortOption" does not exist' – JMKelley Apr 11 '17 at 14:04
  • Ok, let me throw this on a local dev site and test it out. – Selvin Ortiz Apr 11 '17 at 14:07
  • Selvin - no need. It was a case of my template structure. I needed to set the selected option above my current code. – JMKelley Apr 11 '17 at 14:09
  • 1
    Ok. Without looking at the pagination code, it would be hard to diagnose. It also goes beyond the scope of your initial question. Can you update your question, or better yet, create another question that includes the pagination code? This would allow this question to remain focused on making the value sticky while the other one can get more specific about retaining the value across paginated results. I'll be happy to help once you do one of the two things I've suggested. – Selvin Ortiz Apr 11 '17 at 14:23
  • 1
    Apologies - new question created craftcms.stackexchange.com/questions/19905/… – JMKelley Apr 11 '17 at 14:25

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.