Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

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.

Industries

  • Fashion
  • Fitness & Supplements
  • Furniture & Homewares
  • Alcohol
  • Toys & Games
  • Jewellery & Accessories

Wireframe

Multi-Item Add

Coding Instructions

Step 1. Add the javascript

Open cms/store_finder.template.html, and paste the below code at the top of the page:

[%SITE_VALUE id:'footer_javascript'%]
<script src="//maps.google.com/maps/api/js?sensor=false[%if [@config:GOOGLE_GEO_API@] %]&key=[@config:GOOGLE_GEO_API@][%/if%]" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
    $.storeLocator_Init({
        'page': {
            'result': '<div class="resultmsg">##count## result(s) found</div>',
            'header': '<div class="##list_class##">##msg##<br clear="all"><ul>',
            'body': '<li class="##item_class##" ref="##count##">##IF:thumb##<div class="thumb"><img width="40px" src="##thumb##" border="0"></div>##END IF:thumb##' + '<a href="javascript:##script##">##name##</a><br>' + '<span class="address">##street##, ##city##, ##state## ##zip##</span><br>' + '<span class="distance">(##distance##km from your location)</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##' + '</li>',
            'footer': '</ul></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">(##distance##km from your location)</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>'
        }
    });
});
</script>
[%END SITE_VALUE%]

Step 2. Remove the sidebar

Replace [%load_template file:'cms/includes/sidebar.template.html'/%] with <div class="col-xs-12">, to provide more room for the Google Map.

Remove the entire block of code below:

[%thumb_list type:'storelocation' limit:'50' filter_asc:'1'%]
    [%param *body%]
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12 col-sm-8">
                        <h2><a href="[@url@]">[@stloc_name@]</a></h2>
                        <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-o"></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-xs-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">
                                <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-responsive" 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%]
        <ul class="pagination">
            [%paging limit:'3'%]
                [%param *previous_page%]<li><a href="[@URL@]"><i class="fa fa-chevron-left"></i></a></li>[%/param%]
                [%param *goback_pages%]<li><a href="[@URL@]">[@PAGE@]</a></li>[%/param%]
                [%param *current_page%]<li class="active"><a href="[@URL@]">[@PAGE@]</a></li>[%/param%]
                [%param *gonext_pages%]<li><a href="[@URL@]">[@PAGE@]</a></li>[%/param%]
                [%param *next_page%]<li><a href="[@URL@]"><i class="fa fa-chevron-right"></i></a></li>[%/param%]
            [%/paging%]
        </ul>
    [%/param%]
[%/thumb_list%]

Replace the removed code with the below:

<form>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-4">
            <label>Your Post Code or City</label>
            <input type="text" id="geo_zip" class="form-control" placeholder="Postcode"/>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-4 hidden">
            <label>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-xs-12 col-sm-12 col-md-4">
            <label>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-xs-12 col-sm-12 col-md-4">
            <button id="geo_search" class="btn btn-primary btn-block" type="button">Find Stores </button>
        </div>
    </div>
</form>
<div style="width:100%; overflow:hidden;">
    <table width="100%" cellpadding="0" cellspacing="0" border="0" id="map-table">
        <tr>
            <td id="geo_map_pl" valign="top" width="250px">
                <div id="geo_list"></div>
            </td>
            <td valign="top">
                <div id="geo_map"></div>
            </td>
        </tr>
    </table>
</div>

Final Result

Multi-Item Add

Download Files

Download Files


1 related articles found: