Customizing a Template

Now that we have seen the various elements of an IDX template, we will remove, edit, and add to this existing template. We want the exact same functionality as the normal IDX listing ID search, so we will leave the imports, the block, the spaceless elements, and all of the HTML and twig elements in the form tag.

We will just remove the navbar comment and include:  {# only include the search nav on the frontend #}
{% include 'navbar-1.000.twig' %}

Now let’s add some extras to this page.

The Search by Listing ID page has just one option and you have to know the listing ID of a property to use it. If you are not sure of the ID you can visit one of the other search pages via the navigation. Since we removed that earlier, let’s add another search option to the page.

First add a button tag with button onclick=”geolocation()”>Find Properties near my current location and then add the empty div div id=”location”.

Let’s add this button after the listing ID search form. We need to be sure not to add this html in an if statement as we want this to always show. Should we want to conditionally show this option we could wrap this in our own twig if statement.

Using the pull down to toggle between twig/html and JavaScript we now can add the custom script below to this page to get geolocation from the browser and create a link to the search.

Now we have a basic example of a customized template that we can preview on client accounts or save to apply to an account later.