Property search form

Somewhere in your application layout file you’re likely to have a property search form. When the Ctesius.Actions.submitSearchForm() is called, the system will evaluate every form on the page looking for elements with specified IDs and use them to construct a search.

<form action='/search' id='search' method='get' />
 <input type='hidden' id ='place_id' name='place_id' value='' />
 <input placeholder='Town or Postcode' type="text" id='location' name="location" value=""/>
 <input type="radio" name="channel" value="sales" id="buy"> <label>For Sale</label>
 <input type="radio" name="channel" value="lettings" id="let"> <label>To Let</label>
 <input type="text" name="text_search" value="" id="text_search"> <label>Text Search</label>
 <select id="type" name='type'>
  <option value="" title="Property type">Property type</option>
  {{ agency | tag_dropdown_list }}
 </select>
 <select id="min_beds" name='min_beds'>
  <option value="" title="Min beds">Beds min</option>
  <option value="1" title="1 Bed">1 bed</option>
  <option value="2" title="2 Beds">2 beds</option>
 </select>
 <select id="max_beds" name='max_beds'>
  <option value="" title="Max beds">Beds max</option>
  <option value="1" title="1 Bed">1 bed</option>
  <option value="2" title="2 Beds">2 beds</option>
 </select>
 <select id="min_price" name='min_price'>
  <option value="" title="Min price">Price min</option>
 </select>
 <select id="max_price" name='max_price'>
  <option value="" title="Max price">Price max</option>
 </select>
 <button onclick="Ctesius.Actions.submitSearchForm(); return false;" type="submit">Search</button>
</form>

You will note a snippet of Liquid here. This code takes some pre-selected types in the Agency or Portal Admin and outputs them as options.

If it were a portal, you would use the portal tag instead:

{{ portal | tag_dropdown_list }}

Another option is to simply specify the types - the names here must match what we use as type references:

<option value="cottage" title="cottage">Cottage</option>
<option value="farmhouse" title="farmhouse">Farmhouse</option>
<option value="townhouse" title="townhouse">Townhouse</option>

Search disambiguation

If the user does not select a particular result from the auto suggest, Ctesius will send to the user to the page as if they selected the top result. Whilst this may be fine most of the time, you might want to ask your user to ‘fine tune’ their results by picking one of the alternative locations that were found.

To add this functionality, we first add a ‘disambiguation’ line to your theme’s YAML file:

  enabled:
    - "national_search"
    - "global_branch_search"
    - "branches_by_distance_on_locations"
    - "disambiguation"

This will cause a search with the query ‘Brighton’ to append #/disambiguate/brighton to the search result page. Ctesius will then perform a place search and render the provided view. The contents of this view can be added to an include or could be added to your theme’s source in an appropriate place.

Ctesius will automatically render the contents of template into the view but will replace the tags with the returned content. Note that in order for Ctesius to do this, the entire script and view must be wrapped in raw tags so that the serverside parser doesn’t try and render the tags.

{% raw %}
 <script id='disambiguation_template' type='text/liquid'>
   <p>Did you mean:</p>
   {% for place in places limit: 3 %}
     <p><a href='{{place.url}}'>{{place.name}}</a></p>
   {% endfor %}
 </script>
{% endraw %}

<div id='disambiguation_view'></div>