Prerequisites:

Introduction

This is the easiest way to allow users to search for WebApp items on the Front End.

You can use a string of words to search all fields in the WebApp for matches. Using "OR" logic, Siteglide will return all results which match at least one of the words searched for in at least one of their fields. The number of results will still be limited by pagination.

 If you want to control which fields are searched, see "Advanced WebApp Search on the Front End".

Steps:

  1. Add the use_search: 'true' parameter to the {%- include 'webapp' -%} tag. 
  2. Test by adding a URL query parameter
  3. Build a form to allow Users to enter a search query
  4. Add JavaScript to reload the page with a modified URL
  5. Optional: Set a canonical URL for the page to help SEO
  6. Optional: Outputting search terms on the page

Step 1: Add the use_search: 'true' parameter to the {%- include 'webapp' -%} tag

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

Note- It is important that the value of the parameter is wrapped in quotes- it is a String, not a Boolean type.

Step 2: Test by adding a URL query parameter

Since you have added the use_search parameter to the Liquid, Siteglide is now checking the URL for the keyword parameter.

It will use this parameter's value to search all your WebApp's fields and return all items where at least one of keyword's words matches at least one word in the WebApp's fields.

With your site open in your browser, add the parameter to the URL to test this. Remember the example keyword is unlikely to be found in your unique WebApp, so choose something you know is there! You should see your WebApp's results adjust as only items which match are returned: 

?keyword=my%20search%20terms


Step 3: Build a form to allow Users to enter a search query

You can customise this with your own CSS and markup, but here is an example to start you off. We don't need to use the liquid {% form %} tag here as this form doesn't need to submit securely to pOS- it just collects user input.

<form id="search">
  <label for="keyword">Search WebApp</label>
  <input type="text" name="keyword" id="keyword">
  <button onclick="search()">Search</button>
</form>


Step 4: Add JavaScript to reload the page with a modified URL

<script>
  function search() {
    // Stops the form's default behaviour
    event.preventDefault();
    // Assign variables
    var searchElement = document.querySelector("input#keyword");
    var searchKeyword = encodeURI(searchElement.value);
    // Reload the page with the old URL + a new parameter
    location.assign(window.location.pathname + "?keyword=" + searchKeyword);
  }
</script>


Step 5: Optional / Best Practice

...and you're done! But there are a few more steps if you want to achieve best practice.

Related Articles

Did this answer your question?