How to load jQuery Store Locator Plugin inside a section

Solved
Highlighted
Excursionist
19 3 1

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
Highlighted
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.
Want to modify or custom changes/help on your store hire me.
If helpful then please Like and Accept Solution.
Email: support@briskdevelopers.com
Contact us: https://www.briskdevelopers.com/contact-us
Skype: briskdevelopers

Shopify Expert Page: https://experts.shopify.com/brisk-developers
0 Likes

Success.

Excursionist
19 3 1

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

1 Like