Store Finder Address Search

A store/stockist finder which allows the user to enter their postcode, choose a kilometre radius and search for stores/stockists that are closest to them.

Wireframe

Store Finder


Preparation Checklist

Before you start this tweak, it's a good idea to run through our Preparation Checklist below:

  • Read through the Introduction to Neto Document to get a better sense of how the Control Panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.

Coding Instructions

Step 1: Enable the store finder add-on

Follow these steps to enable the Store Finder add-on and setup stores through your control panel: https://www.netohq.com/support/s/article/Store-Finder

Step 2: Open the store finder template

The store finder template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/cms/store_finder.template.html.

Step 3: Add the code into the template

Paste the following code at the top of the template:

[%site_value id:'footer_javascript'%]
    <script src="//maps.google.com/maps/api/js?sensor=false&key=[@config:GOOGLE_GEO_API@]" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $.storeLocator_Init({
                'page': {
                    'result': '<div class="resultmsg p-1 mb-3 bg-light">##count## result(s) found</div>',
                    'header': '<div class="##list_class##">##msg##<div>',
                    'body': '<div class="##item_class##" ref="##count##">##IF:thumb##<div class="thumb"><img width="40px" src="##thumb##" border="0"></div>##END IF:thumb##' + '<strong><a href="javascript:##script##">##name##</a></strong><br>' + '<span class="address">##street##, ##city##, ##state## ##zip##</span><br>' + '<span class="distance text-muted small"><i>(##distance##km from your location)</i></span><br>' + '##IF:phone##<span class="contact"><b>PH:</b> ##phone##</span>##END IF:phone##' + '##IF:fax##<span class="contact"><b>Fax:</b> ##fax##</span>##END IF:fax##' + '##IF:email##<span class="contact"><b>Email:</b> ##email##</span>##END IF:email##' + '<hr></div>',
                    'footer': '</div></div>',
                    'info': '<div class="##info_class##">##IF:thumb##<div class="thumb"><img src="##thumb##" border="0"></div>##END IF:thumb##' + '<a href="#">##name##</a><br>' + '<span class="address">##street##, ##city##, ##state## ##zip##</span><br>' + '<span class="distance text-muted small"><i>(##distance##km from your location)</i></span><br>' + '##IF:phone##<span class="contact"><b>PH:</b> ##phone##</span>##END IF:phone##' + '##IF:fax##<span class="contact"><b>Fax:</b> ##fax##</span>##END IF:fax##' + '##IF:email##<span class="contact"><b>Email:</b> ##email##</span>##END IF:email##</div>'
                }
            });
            $('#store-finder').submit(function() {
                $('#geo_search').click();
                return false;
            });
        })
    </script>
[%/site_value%]

Step 4: Remove the sidebar

Replace [%load_template file:'cms/includes/sidebar.template.html'/%] with <div class="col-12">, to remove the default sidebar.

Step 5: Remove unnecessary elements and replace with the new address search

Remove the entire block of code below:

[%thumb_list type:'storelocation' limit:'50' filter_asc:'1'%]
    [%param *body%]
        <div class="card mb-2">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-sm-8">
                        <h2><a href="[@url@]">[@stloc_name@]</a></h2>
                        [%if [@description@]%]<div class="lead">[@description@]</div>[%/if%]
                        <address>
                            <p>
                                [@stloc_street1@] [@stloc_street2@]<br>
                                [@stloc_city@][%if [@stloc_state@] or [@stloc_zip@]%], [@stloc_state@] [@stloc_zip@][%/if%][%if [@stloc_country@]%], [@stloc_country@][%/if%]
                            </p>
                            <p>
                                [%if [@stloc_phone@]%]<i class="fa fa-phone"></i> [@stloc_phone@]<br>[%/if%]
                                [%if [@stloc_fax@]%]<i class="fa fa-fax"></i> [@stloc_fax@]<br>[%/if%]
                                [%if [@stloc_email@]%]<i class="fa fa-envelope"></i> <a href="mailto:[@stloc_email@]">[@stloc_email@]</a><br>[%/if%]
                            </p>
                        </address>
                        [%thumbnails id:'[@stloc_id@]' type:'storeloc'%]
                            [%PARAM *body%]<img src="[@thumb_image@]" alt="[@stloc_name@]">[%/PARAM%]
                        [%/thumbnails%]
                    </div>
                    [%if [@stloc_lat@] and [@stloc_lng@]%]
                        <div class="col-12 col-sm-4">
                            <a href="https://www.google.com.au/maps/place/[%url_encode%][@stloc_street1@] [@stloc_street2@] [@stloc_city@] [@stloc_state@] [@stloc_zip@][%/url_encode%]/@[@stloc_lat@],[@stloc_lng@],15z" target="_blank" rel="noopener">
                                <img src="https://maps.googleapis.com/maps/api/staticmap?center=[@stloc_lat@],[@stloc_lng@]&zoom=20&size=400x400&markers=color:blue%7Clabel:%7C[@stloc_lat@],[@stloc_lng@][%if [@config:GOOGLE_GEO_API@]%]&key=[@config:GOOGLE_GEO_API@][%/if%]" class="img-fluid" alt="[%nohtml%][@stloc_name@] [@stloc_street1@] [@stloc_street2@], [@stloc_city@], [@stloc_state@] [@stloc_zip@], [@stloc_country@][%/nohtml%]">
                            </a>
                        </div>
                    [%/if%]
                </div>
            </div>
        </div>
    [%/param%]
    [%param *footer%]
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                [%paging limit:'3'%]
                    [%param *previous_page%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go back one page"><i class="fa fa-chevron-left" aria-hidden="true"></i></a></li>[%/param%]
                    [%param *goback_pages%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
                    [%param *current_page%]<li class="page-item active"><a class="page-link" href="[@url@]" aria-label="Current page">[@page@]</a></li>[%/param%]
                    [%param *gonext_pages%]<li><a href="[@url@]" class="page-link" aria-label="Go to page [@page@]">[@page@]</a></li>[%/param%]
                    [%param *next_page%]<li class="page-item"><a class="page-link" href="[@url@]" aria-label="Go forward one page"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>[%/param%]
                [%/paging%]
            </ul>
        </nav>
    [%/param%]
[%/thumb_list%]

Replace the removed code with the below:

<form id="store-finder">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-4">
            <label for="geo_zip">Your Postcode or City</label>
            <input type="text" id="geo_zip" class="form-control" placeholder="Postcode"/>
        </div>
        <div class="col-12 col-sm-12 col-md-4 hidden">
            <label for="geo_country">Your Country</label>
            <select id="geo_country" class="form-control">
                [%countries%]
                    [%param *body%]
                        <option value="[@country_code@]" [%session id:'ship_country' if:'eq' value:'[@ship_country@]'%]selected[%/session%]>[@country_name@]</option>
                    [%/param%]
                [%/countries%]
            </select>
        </div>
        <div class="col-12 col-sm-12 col-md-4">
            <label for="geo_radius">Show Stores Within</label>
            <select id="geo_radius" class="form-control">
                <option value="5">5 Kilometers</option>
                <option value="15">15 Kilometers</option>
                <option value="25" selected>25 Kilometers</option>
                <option value="50">50 Kilometers</option>
                <option value="75">75 Kilometers</option>
                <option value="100">100 Kilometers</option>
                <option value="200">200 Kilometers</option>
            </select>
        </div>
        <div class="col-12 col-sm-12 col-md-4">
            <label> </label>
            <button id="geo_search" class="btn btn-primary btn-block" type="button">Find Stores</button>
        </div>
    </div>
</form>
<div id="store-finder-results" class="row mt-3">
    <div class="col-12 col-md-4" id="geo_map_pl">
        <div id="geo_list" style="overflow-y: auto; font-size: 12px; height: 500px;"></div>
    </div>
    <div class="col-12 col-md-8">
        <div id="geo_map" style="height: 500px"></div>
    </div>
</div>

Final Result

Store Finder


Customising this Section

More information on how to customise this section can be found within the Thumb List Documentation.


Was this article useful?

Be notified when this page is updated. Optional.