1

I have a page that lists all of the property developments of my client, and am able to show the lists of the categories in the dropdown fields, but I can't work out how to get them to actually change the results below.

Attached is a screenshot

So how do I get the results below the filters to change to only show the selected item in the dropdown? Am completely stuck on this.

What would be really helpful is a simple walkthrough of what I need to do to make the selected filter output results on the page, as is a complicated subject. And need it explaining in detail if possible, as am a beginner at this.

dropdown filter

And here's my code:

    <form class="form-inline" action="{{ url('developments') }}" method="get">
      <div class="form-group">
        <label for="county1">Location</label>
        <div class="selectwrap">
          <select id="county1" class="form-control" name="county1" onchange="this.form.submit()">
            <option>All</option>
            {% for category in craft.categories.group('counties').order('title asc') %}
            <option value="{{ category.slug }}">{{ category.title }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      ........more dropdown code...
    </form>

  <section class="developments">
    <div class="container">
      {% for category in craft.categories.group('developments').order('title asc') %}
      ......code for block...
      {% endfor %}
4
  • 2
    How are you updating the page? AJAX? Complete reload? If you're sending this back to Craft, you need to update your query and get the selected drop down param using craft.request.getParam(). Jan 14 '17 at 18:03
  • I don't know how to do it with AJAX and can't find any decent examples of how it should be setup anywhere. So am assuming it's a complete reload of the page. So I need to know how to get the selected drop down param using craft.request.getParam() then if possible?
    – mention79
    Jan 14 '17 at 18:32
  • 2
    So when you change a drop down, does the page reload? You would have set some JS to make that happen. You'll want to give your dropdowns name attributes so they get sent over when the form submits (eg name="county1". That submitted data you can then check in you template. {% if craft.request.getParam('country1') is not empty %} {% set countyFilter = craft.request.getParam('country1') %} etc. Jan 14 '17 at 19:16
  • Only if add a small piece of JavaScript to the select tag. But i can't get it to relate to the drop down field etc. I really need to find a detailed example that I can deconstruct, as the craft docs aren't helping on this.
    – mention79
    Jan 14 '17 at 19:46
1

I managed to solve it finally, by starting from what was suggested in the comments. Basically to get the filter to work in Craft I've added action="{{ url('developments') }}" to the form class, which keeps the url on the same page, and then on the tag I added a name="county1" and some javascript to get it to reload when it's selected using onchange="this.form.submit()"

Then in the results below I set a query variable using {% set query = craft.request.getParam('county1') %} and then created a second variable called queryFilter to search the correct category, based on the selected field {% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %} which to print out the results is then referenced via a for loop {% for category in queryFilter %}

So there's quite a few steps to get it to work, so it's not something that's obvious from the Craft documentation, which doesn't have hardly anything on this subject that I've found.

Here's the code as whole so that it help makes sense to someone trying to do the same type of thing:

<form class="form-inline" action="{{ url('developments') }}" method="get">
  <div class="form-group">
    <label for="county1">Location</label>
    <div class="selectwrap">
      <select id="county1" class="form-control" name="county1" onchange="this.form.submit()">
        <option value="all">All</option>
        {% for category in craft.categories.group('counties').order('title asc') %}
        <option value="{{ category.slug }}">{{ category.title }}</option>
        {% endfor %}
        </select>
      </div>
   </div>
</form>

<section class="developments">
    <div class="container">

        {% set query = craft.request.getParam('county1') %}
        {% set queryFilter = craft.categories.group('developments').search(query).order('title asc') %}

        {% if queryFilter %}
        {% for category in queryFilter %}
        <div class="development-block">

        ....markup...

        </div>
        {% endfor %}
        {% endif %}
    </div>
</section>

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.