0

I currently working on a small project which utilises Google Maps by Objective HTML. The scenario is a page with a search form. The search form contains a postcode field, a distance field, and a category dropdown select.

Search form layout

It seems 2/3 of the search work OK. If I was to type a postcode and set a distance from that postcode then the idea is that the user is then taken to a results page displaying a map with the necessary points marked on it.

Thats all fine, the problem is categories. The dropdown list on the search form is populated correctly, but I'm struggling to grasp how to pass the category through to the results page, filtering your results according the category you've selected.

I maybe totally wrong but it was my understanding that categories are very reliant on the URL being used. That doesn't seem to come into the equation with this as you'll see below. The return= parameter needs to direct you to the results template, with no mention of category. My markup is below

{exp:gmap:search
    channel="property_sales"
latitude_field="fs_latitude"
longitude_field="fs_longitude"
geocode_field="location"
distance_field="distance_max"
cache_post="false"
return="/property/results/"}

<label for="location">Enter Postcode</label><br>

<input name="location" id="location" class="form-control" value="{if post:location}{post:location}{/if}" type="text">
{if error:location}<p class="error">{error:location}</p>{/if}

<label for="location">Distance from Postcode</label><br>

<select name="distance_max" class="form-control">
    <option value="" &#123;if="" !distance_max="" ||="" distance_max="=" ""}selected="selected" &#123;="" if}="">National</option>
    <option value="5" &#123;if="" distance_max="=" 5}selected="selected" &#123;="" if}="">5 miles</option>
    <option value="10" &#123;if="" distance_max="=" 10}selected="selected" &#123;="" if}="">10 miles</option>
    <option value="20" &#123;if="" distance_max="=" 20}selected="selected" &#123;="" if}="">20 miles</option>
    <option value="50" &#123;if="" distance_max="=" 50}selected="selected" &#123;="" if}="">50 miles</option>
    <option value="100" &#123;if="" distance_max="=" 100}selected="selected" &#123;="" if}="">100 miles</option>
</select>


<label for="categories">Category of Property</label>
    <select class="form-control">

        {categories}<option>{category_name} - {category_url_title}</option>{/categories}
    </select>

<button class="btn btn-primary btn form-control" type="submit">Search</button>

{/exp:gmap:search}

That is the search form and this is the result template markup, where I assume the category information has to come into it

{exp:gmap:init id="map" class="gmap" style="width:100%;height:400px"}

{exp:gmap:results 
    order_by="distance" 
    sort="asc" 
    parse="inward"}

    {if has_searched}
<ul>
    {results}{total_results}
    <li>{title} - {distance}</li>
    {/results}   
</ul>

        {results}                   

         {exp:gmap:marker 
             id="map" 
             latitude="{fs_latitude}" 
             longitude="{fs_longitude}"}

            {/results}

    {if:else}

        {exp:channel:entries 
            channel="property_sales" 
            dynamic="no" 
            disable="member_data|pagination" 
            parse="inward"}

        {location_gmap id="map"}

        {/exp:channel:entries}

    {/if}

{if no_results}

<p>No results found</p>

{exp:channel:entries 
        channel="locations" 
        dynamic="no" 
        disable="member_data|pagination" 
        parse="inward"}

    {location_gmap id="map"}

{/exp:channel:entries}

    {/if}

{/exp:gmap:results}

I apologise for the long winded question, but has anyone managed to get a category filter working on this module

Thanks a lot, any advice is much appreciated

2

We're using checkboxes for the categories, but I'm assuming it's similar...

In the search form:

{categories show="1|2|3|4" limit="4"}
    <div class="checkbox">
        <label><input type="checkbox" name="categories[]" value="{category_id}" {checked}> {category_name} Products</label>
    </div>
{/categories}

Then in the results tag:

{exp:gmap:results 
    orderby="distance"
    category_search_type="OR"
    match_categories_exact="yes"
    limit="25"
    paginate="true"
    pars_vars="true"}
| improve this answer | |
  • 1
    This is almost identical to how we've set this up as well. Categories here are independent of the URL and passed through to the database in the query generated by the results tag - in a similar way to filtering by a category on the channel entries tag - it doesn't rely on the values in the URL. – Andrew Armitage May 11 '14 at 13:29
  • I also have something very similar. – Justin Long May 11 '14 at 20:37
0

As @christiaan and Andrew have mentioned you shouldn't have a problem passing the category , on your select element you will need to add name="categories[]" to pass the user selected categories to the results template.

Updated Search Template Below

{exp:gmap:search
    channel="property_sales"
latitude_field="fs_latitude"
longitude_field="fs_longitude"
geocode_field="location"
distance_field="distance_max"
cache_post="false"
return="/property/results/"}

<label for="location">Enter Postcode</label><br>

<input name="location" id="location" class="form-control" value="{if post:location}{post:location}{/if}" type="text">
{if error:location}<p class="error">{error:location}</p>{/if}

<label for="location">Distance from Postcode</label><br>

<select name="distance_max" class="form-control">
    <option value="" &#123;if="" !distance_max="" ||="" distance_max="=" ""}selected="selected" &#123;="" if}="">National</option>
    <option value="5" &#123;if="" distance_max="=" 5}selected="selected" &#123;="" if}="">5 miles</option>
    <option value="10" &#123;if="" distance_max="=" 10}selected="selected" &#123;="" if}="">10 miles</option>
    <option value="20" &#123;if="" distance_max="=" 20}selected="selected" &#123;="" if}="">20 miles</option>
    <option value="50" &#123;if="" distance_max="=" 50}selected="selected" &#123;="" if}="">50 miles</option>
    <option value="100" &#123;if="" distance_max="=" 100}selected="selected" &#123;="" if}="">100 miles</option>
</select>


<label for="categories">Category of Property</label>
  <select class="form-control" name="categories[]">
{categories}<option>{category_name} - {category_url_title}</option>{/categories}
  </select>

<button class="btn btn-primary btn form-control" type="submit">Search</button> 
{/exp:gmap:search}

Then on the results page you need to add the proper category parameters to your opening results tag. Results Documentation the tags you might need to add are:

  • category_search_type=""
  • match_categories=""
  • match_categories_exact=""
  • match_category_operator=""
  • match_no_categories=""
| improve this answer | |

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.