dynamic/SilverStripe-Locator-Module

View on GitHub
thirdparty/jquery-store-locator-plugin/namesearch-example.html

Summary

Maintainability
Test Coverage
<!DOCTYPE html>
<html>
<head>
    <title>NameSearch Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="assets/css/storelocator.css" />
</head>

<body>

<div class="bh-sl-container">
    <div id="page-header">
        <h1 class="bh-sl-title">Using Chipotle as an Example</h1>
        <p>I used locations around Minneapolis and the southwest suburbs. So, for example, Edina, Plymouth, Eden Prarie, etc. would be good for testing the functionality.
            You can use just the city as the address - ex: Edina, MN. For name search testing you can also use a city (Minneapolis, Eden Prarie, etc.) since that is how
            the location names are set up with this sample data set.</p>
    </div>

    <div class="bh-sl-form-container">
        <form id="bh-sl-user-location" method="post" action="#">
            <div class="form-input">
                <label for="bh-sl-search">Location name search:</label>
                <input type="text" id="bh-sl-search" name="bh-sl-search" />
                
                <label for="bh-sl-address">Enter Address or Zip Code:</label>
                <input type="text" id="bh-sl-address" name="bh-sl-address" />
            </div>

            <button id="bh-sl-submit" type="submit">Submit</button>
        </form>
    </div>

    <div id="bh-sl-map-container" class="bh-sl-map-container">
        <div id="bh-sl-map" class="bh-sl-map"></div>
        <div class="bh-sl-loc-list">
            <ul class="list"></ul>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="assets/js/libs/handlebars.min.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="assets/js/plugins/storeLocator/jquery.storelocator.js"></script>
<script>
    $(function() {
        $('#bh-sl-map-container').storeLocator({'nameSearch': true});
    });
</script>

</body>
</html>