How to load jQuery Store Locator Plugin inside a section

Solved
DeNunes
Excursionist
19 3 2

Hi, I'm trying to load the following jQuery Store Locator Plugin inside a section.
Using the Venture theme, I created a new template page.shops.liquid and called a new section store-locator.liquid where I place the plugin. It keeps throwing the error: 

Uncaught TypeError: $(...).storeLocator is not a function

My Store
pwd: kreomu
menu - Store Locator

 

store-locator.liquid

 

<div class="bh-sl-container">
      <div id="page-header">
        <h1 class="bh-sl-title">Store Locator</h1>
      </div>

      <div class="bh-sl-form-container">
        <form id="bh-sl-user-location" method="post" action="#">
            <div class="form-input">
              <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>
  (function ($) {
      console.log($('#bh-sl-map-container').attr('id'));
      $('#bh-sl-map-container').storeLocator({autoGeocode: true});
  })(jQuery);
</script>

added on theme.liquid before the closing body tag:

  <script src="{{ 'handlebars.min.js' | asset_url }}"></script>
  <script src="{{ 'jquery.storelocator.js' | asset_url }}"></script>

also on theme.liquid I removed the defer from: (the Venture theme vendor.js file already includes jQuery and handlebars)

<script src="{{ 'vendor.js' | asset_url }}"></script>

if not throws the error:

Uncaught ReferenceError: jQuery is not defined

 

 

 

0 Likes
You need to add locator script file in head tag.
&lt;script src="assets/js/plugins/storeLocator/jquery.storelocator.js">&lt;/script&gt;

Remove this locator script from added last from above body tag.
If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact us regarding any help, below our contact listed:
Shopify Expert Page: https://experts.shopify.com/brisk-developers
Email: support@briskdevelopers.com
Contact us: https://www.briskdevelopers.com/contact-us
Skype: briskdevelopers
0 Likes
DeNunes
Excursionist
19 3 2

This is an accepted solution.

The problem was that I wasn't including the Google Maps API script.