1

I have four select drop downs which let the user filter the results by county, development, price and development status.

However, I'm getting results showing in the wrong/multiple categories for some items once selected. For example there is a development called Lockeswood, but when Lockeswood is selected from development dropdown. The results show Lockeswood and and another development called Highfield.

Another example: The county dropdown lets the user filter the results by county. i.e. Berkshire, Buckinghamshire, Hampshire etc. So when the user selects Berkshire, I only want results from the Berkshire category. However, when selecting Berkshire I'm getting results for Berkshire and Buckinghamshire?

So the select drop downs all show the correct options, but the results are incorrect in some cases.

Can someone help fix the query below to only output the correct results?

Have attached a screenshot highlighting the issue in red.enter image description here

<section class="main secondary">
  <div class="container">
    <h1 class="">{{ entry.title }}</h1>
    <p class="intro">{{ entry.introduction }}</p>
    <div class="row">
      <div class="col-md-12">
      <div class="filter-heading clearfix">
        <div class="filter-block">
          <span>Refine your search</span>
        </div>
        <div class="ld_triangle t-right"></div>
      </div>
      <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</option>
            {% for category in craft.categories.group('counties').order('title asc') %}
            <option value="{{ category.slug }}">{{ category.title }}</option>
            {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="development1">Development</label>
      <div class="selectwrap">
        <select id="development1" class="form-control" name="development1" onchange="this.form.submit()">
          <option value="">All</option>
          {% for category in craft.categories.group('developments').order('title asc') %}
          <option value="{{ category.slug }}">{{ category.title }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="price1">Price</label>
        <div class="selectwrap">
            <select id="price1" class="form-control" name="price1" onchange="this.form.submit()">
            <option value="">All</option>
            {% for category in craft.categories.group('priceRange').order('title asc') %}
            <option value="{{ category.slug }}">{{ category.title }}</option>
            {% endfor %}
            </select>
        </div>
      </div>
    <div class="form-group">
    <label for="status1">Development Status</label>
    <div class="selectwrap">
    <select id="status1" class="form-control" name="status1" onchange="this.form.submit()">
        <option value="">All</option>
        {% for category in craft.categories.group('status').order('title asc') %}
        <option value="{{ category.slug }}">{{ category.title }}</option>
        {% endfor %}
        </select>
        </div>
        </div>
        </form>
      </div>
    </div>
  </div>
</section>

<section class="developments tab-content">
  <div class="container">

    {# Start For loop #}
    {% set query = "" %}
    {% if craft.request.getParam('county1') and
      craft.request.getParam('county1') is not empty %}
    {% set query = craft.request.getParam('county1') %}
    {% elseif craft.request.getParam('development1') and
      craft.request.getParam('development1') is not empty %}
    {% set query = craft.request.getParam('development1') %}
    {% elseif craft.request.getParam('price1') and
      craft.request.getParam('price1') is not empty %}
    {% set query = craft.request.getParam('price1') %}
    {% elseif craft.request.getParam('status1') and
      craft.request.getParam('status1') is not empty %}
    {% set query = craft.request.getParam('status1') %}
    {% endif %}

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

    {% if queryFilter|length %}
    {% for category in queryFilter %}
<div class="development-block">
  <a class="grid one" href="{{ category.url }}" role="button">
    {% set image = category.insetImage.first() %}
    {% for image in category.insetImage %}
    <div class="grid__item" style="background-image:url({{ image.url('devListMainLarge') }})"></div>
    {% endfor %}
    {% set imagesecondary = category.insetImageSecondary.first() %}
    {% for imagesecondary in category.insetImageSecondary %}
    <div class="grid__item" style="background-image:url({{ imagesecondary.url('devListSecondaryLarge') }})"></div>
    {% endfor %}
  </a>
  <div class="grid two">
    <div>
      <h2><a href="{{ category.url }}">{{ category.title }}</a></h2>
      <h4 class="">{{ category.town }}, {{ category.county }}</h4>
      <p class="standfirst">{{ category.developmentIntroduction}}</p>
      <p class="indicative">{{ category.fapCaption}}</p>
    </div>
    <div>
      <a class="btn development hidden-xs hidden-sm" href="{{ category.url }}" role="button">View development<i class="icon-caret-right btn-after"></i></a>
    </div>
  </div>
  <div class="divider"></div>
  <aside class="grid three">
    <div>
      <div class="price">{{ category.price }}</div>
      <div class="cta-info">{{ category.callToAction }}</div>
    </div>
    <div>
      <h5 class="agent">Selling agent:</h5>
      {% for option in category.agentName %}
      <div>{{ option }}</div>
      {% else %}
      <div>{{ category.agentNotListed }}</div>
      {% endfor %}
      <a class="register" data-toggle="modal" href="{{ category.url }}?message=register">REGISTER YOUR INTEREST</a>
      <a class="btn development hidden-md hidden-lg" href="{{ category.url }}" role="button">View development<i class="icon-caret-right btn-after"></i></a>
    </div>
  </aside>
</div>
    {% endfor %} {# End For loop #}
    {% else %}
    <p class="intro">
      There are currently no developments in {{ query|capitalize }}. <a data-toggle="modal" href="#priorityModal"><strong>Register you interest</strong></a> to receive priority information when a development becomes available in the area.</p>
    {% endif %}

  • The problem is how you're constructing the "query". How are you storing these developments? It looks like you're using categories, rather than entries. – Stephen Lewis May 18 '17 at 16:36
  • Yes they are all created from categories – mention79 May 18 '17 at 16:37
  • And you only want to be able to filter by one of the drop downs at a time? So you can view all properties in a county OR all properties in a development, and so forth. – Stephen Lewis May 18 '17 at 16:40
  • Yes that's correct – mention79 May 18 '17 at 16:40
  • And how have you implemented the development, county, etc.? As select fields attached to the development categories group? – Stephen Lewis May 18 '17 at 16:44
2

Let's get the caveats dispensed with. I think the approach detailed in this answer should work, but I've never tried relating categories to categories in this way before.

Speaking of which, I have some misgivings regarding the way you've organised everything. However, let's assume for the time being that you have good reasons for doing it this way.

You're currently attempting to search for entries (note the lowercase "e") which contain a given string, such as the county name. That's a scattershot approach, so it's not surprising that you're getting some unwanted results.

In order to specify the relationships between you property types and the counties, developments, etc., you'll need to use the category ID as the drop down value, not the category slug.

Given that you only want to filter by one criterion at a time, the easiest solution is to do something like this:

{% set countyId = craft.request.getParam('countyId')|default('') %}
{# And so forth, for each filter #}

{% if countyId %}
    {% set relatedCriteria = {
        targetElement: countyId,
        field: 'countyFieldHandle'
    } %}
{% endif %}

{# And so forth, for each filter, in order of preference #}

{% set propertyTypes = relatedCriteria|default(false)
? craft.categories.group('developments').relatedTo(relatedCriteria)
: craft.categories.group('developments') %}

{% for propertyType in propertyTypes %}
    {# Do your thing #}
{% endfor %}
| improve this answer | |
  • Thanks for looking at this Stephen. I will give this a try. – mention79 May 18 '17 at 18:20
  • Just use category.id instead of category.slug – Stephen Lewis May 18 '17 at 21:18
  • I've tried that, but I'm not understanding how to change the current query with what you've posted above. As I get relatedCriteria variable doesn't exist. – mention79 May 18 '17 at 21:20
  • I've updated the example to handle situations where no filters are set. – Stephen Lewis May 18 '17 at 21:36
  • Thank you Stephen it appears to be working now, so that's amazing. It's my first Craft site so queries are a bit beyond me, and I still don't understand why what you posted works. But happy it does as the site is due to go live next week and doing final amends and bug fixes. – mention79 May 18 '17 at 21:49

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.