Adding Homepage Search Icons


This tutorial will guide you through adding search icons to your homepage. The icons will link to a search, filtered by listing type as well as location. For instance, you may have Listing Type A, Listing Type B, and Listing Type C set up on your marketplace. These icons will allow your users to click through to a search for a specific listing type (A, B, or C), within a specific geographic location (whatever location was entered in the search-bar).

As an example, you can take a look at Stokeshare ( https://stokeshare.near-me.com/), who uses these icons on their homepage.


HTML 

We'll start by adding the icons that we want to use. To do this, navigate to you Home > Index liquid view in your admin dashboard, and paste the following under the div with a class of 'container-fluid' in the {% content_for 'hero' %} block.

<a href="#" data-searchtype="listing-type-1"><img src="image_url_here"/></a><a href="#" data-searchtype="listing-type-2"><img src="image_url_here"/></a>

The HTML for StokeShare looks like:

<div class="hero-icon-wrapper">
    <a href="#" data-searchtype="Surf" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1860/SurfSnowboard.png"/></a>
    <a href="#" data-searchtype="Climb" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1861/ClimbSnowboard.png"/></a>
    <a href="#" data-searchtype="Dive" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1862/DiveSnowboard.png"/></a>
    <a href="#" data-searchtype="Paddle" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1863/PaddleSnowboard.png"/></a>
    <a href="#" data-searchtype="Ski" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1864/PowderSnowboard.png"/></a>
    <a href="#" data-searchtype="Camp" class="hero-search-icon"><img src="https://d2rw3as29v290b.cloudfront.net/instances/53/uploads/ckeditor/picture/data/1865/CampSnowboard.png"/></a>
</div>

A few important things to note here:

On each line, where it says 'data-searchtype=', you will want to enter the names of your listing types. For instance, on Desks Near Me, the listing types are Office Space, Meeting Room, and Hot Desk. If we wanted a homepage search icon for each of those three listing types, we would want to create three lines of HTML like the ones above, and make sure that we enter each listing type in where it says 'data-searchtype='. 

For instance:

data-searchtype="office space"

In the HTML, where you see src="image_url_here", make sure to enter the URL to the icon that you want to appear. If you need help hosting assets online, take a look at our guide here: File Manager CSS


CSS

Now we'll add a little bit of CSS to style the icons that we just included under the search bar, this can be done using a content holder.

<style>   
   .hero-icon-wrapper {     
   text-align: center;     
   margin-top: 20px;   
   }      
   .hero-icon-wrapper img {     
   width: 110px;     
   margin-right: 30px   
   }      
   .hero-icon-wrapper .last {     
   margin: 0;   
   } 
</style> 

Javascript

And finally, we have a small JS function that will append the query parameters to each link (icon) when a user clicks on them. This can be added in the same content holder that we used above for the CSS:

{% content_for 'script' %}   
<script>
   $('.hero-search-icon').click(function(){
   var searchVal = $('#search').val();      
   var query = encodeURIComponent(searchVal);       
   var type = encodeURIComponent($(this).data('searchtype'));       
   
   $(this).attr("href","/search?lg_custom_attributes[listing_type]="+type);
   if ($('#search[name="loc"]').is(":visible")) {         $(this).attr("href","/search?lg_custom_attributes[listing_type]="+type+"&loc="+query);       
   };     
   });   
 </script> 
{% endcontent_for %}

Here is a quick rundown of what this function is doing:

  1. It fires when the user clicks on any icon with a class of .hero-search-icon
  2. It grabs the value of the search bar (the location entered) and assigns it to a variable named searchVal
  3. It encodes searchVal to format the string when it's used in the search URL, and assigns that to a variable namedquery
  4. It then gets the value that you entered for that icon in 'data-searchtype', and encodes that as well, assigning to a variable named type
  5. It then builds the query parameter for the URL and assigns that to the href for the icon that the user clicked. If the location search bar is visible, it includes the location parameters in the search, if not it just includes the listing type parameters. This way, you can use keyword search instead of geosearch, and the icons will still function properly

And that's it - you should now have a set of icons under the searchbar on your homepage, that when clicked, will take the user to a search for a specific listing type and in the location that was entered in the search bar.