Prerequisites:

Introduction:


Advanced search allows you to use AND logic to filter WebApp items by specific fields which match exact values.

Using use_adv_search with Events or Blog Module

The  use_adv_search parameter should work with any Module or WebApp, but because this is most commonly used on the Blog and Events Modules, we have more detailed guides on using it specifically in these contexts:

These guides and their related articles will also explain which field names need to be used for these Modules and will include more detailed examples.

Might you be looking for something slightly different?

This is an advanced tutorial. If either of the following match your Use Case better, they will be easier to implement:

If you are looking to search for WebApp items which match any of your search terms in any of their fields using OR logic, try WebApp Search on the Front End

If you're looking to search for WebApps items with Detail Pages, you may find the recently Upgraded Site Search suits your needs better. You would be able to specify which WebApps you want to include in the search too.

Steps:

In this tutorial, we will go through the following steps:

  1. Identify the real names of the fields you want to filter by.
  2. Add the liquid parameter
  3. Test the URL parameters
  4. Build front-end controls to change the URL parameters.
  5. Add JavaScript

Step 1 - Identify the real names of the fields you want to filter by

In the database, fields have a real name that is different from their user-friendly name. In order to use the advanced search, you will need to know the real name of the field. This helps to keep code working even when the user-friendly name is changed. 

One way to do this is using liquid: to temporarily output the raw result data on the page for reference.

In this example, my webapp's real name is "webapp_1" - but check the id number of your WebApp in the liquid tag and replace "1 "with that number. Use the liquid below beneath your {% include webapp %} tag:

<br><pre>{{context.exports.webapp_1 | json }}</pre>


In the output, your custom WebApp fields will have names in the format webapp_field_1_1 where the number changes depending on the value. Once you have identified the real names of the fields you wish to search by, jot them down, delete the liquid above and move on to the next step.

Step 2 - Add the liquid parameter use_adv_search

{%- include 'webapp', id: '1', layout: 'portfolio_2', per_page: '9', sort_type: 'created_at', sort_order: 'asc', use_adv_search: 'true' -%}


Here, 'true' is a string, not a boolean value, so make sure it is wrapped in single quotes.

Step 3 - Test the URL parameters


Now use_adv_search has been added, Siteglide is watching the query parameters for any parameters with a key including "field_". It will use these to carry out the search when the page is loaded, so it can display the WebApp items which match.

To get the hang of how the search works, start by manually adding parameters to the URL in your browser. Later, users will use custom front-end controls.

E.g. On my page with the relative URL "/about", I want to find all WebApp items with a favourite_colour field which exactly matches "blue". The real name of the field is "webapp_field_1_3" because it was the third custom field I created for the WebApp in my Admin. My URL should be changed to:


 /about?webapp_field_1_3=blue


I should see now only the WebApp items with a favourite colour of blue. Note: this is an EXACT search, so WebApps with a favourite colour of "blue and green" will not be found.

Step 4 - Build front-end controls to change the URL parameters


There are many ways a Developer could approach this and too many use-cases to list here. Here is an example to get you started:

<form id="advanced_search">
  <label for="advanced_search">Advanced WebApp Search</label>
  <select name="webapp_field_1_3" >
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
  <button onclick="search()">Search</button>
</form>


You can add more than one field to the form, but remember that all fields must match exactly; Advanced Search uses AND and EXACT logic.

Step 5- Add JavaScript 

Here is an example of how you can turn user-input in the form into the URL parameters Siteglide needs. You may choose to write your own and expand upon this.

<script>
  function search() {
    // Stops the form's default behaviour
    event.preventDefault();
    // Assign variables
    var searchElements = document.querySelectorAll("#advanced_search select, #advanced_search input");
    var path = window.location.pathname + "?";
    //Loop through each element in the form and extract the key-value pairs.
    var i = 0;
    searchElements.forEach(function(element){
      //On the first iteration, don't add an & symbol
      if (i>0) {
        var separator = "&";
      } else {
        var separator = "";
      }
      path = path + separator + element.getAttribute("name") + "=" + encodeURI(element.value);
      i++;
    });
    // Reload the page with the old URL + a new parameter
    location.assign(path);
  }
</script>


Did this answer your question?