Store/Stockist Finder

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 Maropost Commerce Cloud 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.
  • The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

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>'
                }
            });
            $('#geo_search').click(function() {
                let postcode = $('#geo_zip_visible').val();
                let country = $('#geo_country option:selected').text();
                $('#geo_zip').val(`${postcode} ${country}`);
            });
            $('#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_visible">Your Postcode or City</label>
            <input type="text" id="geo_zip_visible" class="form-control" placeholder="Postcode"/>
            <input hidden type="text" id="geo_zip"/>
        </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@]" [%if [@country_code@] eq [@config:DEFAULTCOUNTRY@] %]selected[%/if%]>[@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>&nbsp;</label>
            <button id="geo_search" class="btn btn-primary btn-block" type="submit">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

Need to show a Country selection dropdown? Locate the geo_country HTML element in the above code and remove the hidden class from the wrapping <div>. To realign the search fields to one line update bootstrap column class from col-md-4 to col-md-3 for each input. E.g:

<form id="store-finder">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-3">
            <label for="geo_zip_visible">Your Postcode or City</label>
            <input type="text" id="geo_zip_visible" class="form-control" placeholder="Postcode"/>
            <input hidden type="text" id="geo_zip"/>
        </div>
        <div class="col-12 col-sm-12 col-md-3">
            <label for="geo_country">Your Country</label>
            <select id="geo_country" class="form-control">
                [%countries%]
                    [%param *body%]
                        <option value="[@country_code@]" [%if [@country_code@] eq [@config:DEFAULTCOUNTRY@] %]selected[%/if%]>[@country_name@]</option>
                    [%/param%]
                [%/countries%]
            </select>
        </div>
        <div class="col-12 col-sm-12 col-md-3">
            <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-3">
            <label>&nbsp;</label>
            <button id="geo_search" class="btn btn-primary btn-block" type="submit">Find Stores</button>
        </div>
    </div>
</form>

Keep the Country selection dropdown hidden to use whatever Country your webstore is set to.

Was this article useful?

Be notified when this page is updated. Optional.