Fix locator bundle race condition

layouts/html.hbs

@@ -80,6 +80,7 @@
     <script>
       document.addEventListener('DOMContentLoaded', function () {
         {{> script/on-document-load}}
+        initAnswers();
       });
     </script>
     <script src="{{relativePath}}/bundle.js" data-webpack-inline></script>

script/core.hbs

@@ -86,3 +86,7 @@
   locale=(findFirst params.sdkLocaleOverride global_config.locale 'en')
   sdkVersion=global_config.sdkVersion
 }}
+
+{{#ifeq pageTemplate 'vertical-full-page-map'}}
+  <script id="js-answersLocatorBundleScript" src="{{relativePath}}/locator-bundle.js" defer></script>
+{{/ifeq}}

script/partials/sdk-js-script-tags.hbs

@@ -6,11 +6,9 @@
 <script
   src="{{> script/partials/sdk-url sdkAsset="answers-modern.min.js" locale=locale sdkVersion=sdkVersion}}"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="{{> script/partials/sdk-url sdkAsset="answers.min.js" locale=locale sdkVersion=sdkVersion}}"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>

static/js/theme-map/VerticalFullPageMapOrchestrator.js

@@ -67,7 +67,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
      * The default zoom level for the map
      * @type {number}
      */
-    this.defaultZoom = this.providerOptions.zoom || 14;
+    this.defaultZoom = this.providerOptions.zoom || 4;
 
     /**
      * The current zoom level of the map

templates/vertical-full-page-map/page-setup.js

@@ -1,31 +1,8 @@
-function addFullPageMap() {
-  {{> theme-components/theme-map/script}}
-  {{> theme-components/vertical-full-page-map/script}}
-}
-
-if (window.locatorBundleLoaded) {
-  addFullPageMap();
-} else {
-  const locatorBundleScript = document.querySelector('script#js-answersLocatorBundleScript');
-  locatorBundleScript.onload = () => {
-    window.locatorBundleLoaded = true;
-    locatorBundleScript.dispatchEvent(new Event('vertical-full-page-map-bundle-loaded'));
-    addFullPageMap();
-  }
-}
-
 /**
- * Registers listeners on the card once the locator bundle is loaded
+ * Registers listeners on the card
  *
  * @param {ANSWERS.Component} card A location card
  */
-function registerVerticalFullPageMapCardListeners(card) {
-  if (window.locatorBundleLoaded) {
-    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
-    return;
-  }
-  const verticalFullPageMapScript = document.querySelector('script#js-verticalFullPageMapScript');
-  verticalFullPageMapScript.addEventListener('vertical-full-page-map-bundle-loaded', () => {
-    new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
-  });
+ function registerVerticalFullPageMapCardListeners(card) {
+  new VerticalFullPageMap.CardListenerAssigner({card: card}).addListenersToCard();
 }

templates/vertical-full-page-map/page.html.hbs

@@ -1,6 +1,8 @@
 {{#> layouts/html pageWrapperCss="YxtPage-wrapper--mobileListView" }}
-  {{#> script/core }}
+  {{#> script/core pageTemplate="vertical-full-page-map"}}
     {{> cards/all }}
+    {{> theme-components/theme-map/script}}
+    {{> theme-components/vertical-full-page-map/script}}
     {{!-- {{> templates/vertical-full-page-map/collapsible-filters/page-setup }} --}}
     {{> templates/vertical-full-page-map/page-setup }}
     {{> templates/vertical-full-page-map/script/searchbar }}
@@ -17,66 +19,64 @@
     {{> templates/vertical-full-page-map/script/locationbias modifier="main" }}
     {{> templates/vertical-full-page-map/script/locationbias modifier="mobileMap" }}
   {{/script/core }}
-  <script id="js-answersLocatorBundleScript" src="{{relativePath}}/locator-bundle.js"
-    onload="window.locatorBundleLoaded = true;" defer></script>
-    <div class="Answers AnswersVerticalMap CollapsibleFilters VerticalFullPageMap VerticalFullPageMap--mobileListView js-answersVerticalFullPageMap">
-      <div class="Answers-content">
-        <div class="Answers-contentWrap js-locator-contentWrap" role="region" aria-label="{{ translate phrase="Main location search" }}">
-          <div class="Answers-resultsHeader">
-            <div class="Answers-searchWrapper js-sticky">
-              <div class="Answers-form">
-                {{> templates/vertical-full-page-map/markup/searchbar }}
-                {{> templates/vertical-full-page-map/markup/navigation }}
-              </div>
-            </div>
-            {{> templates/vertical-full-page-map/markup/spellcheck }}
-            <div class="Answers-resultsHeaderTop">
-              {{> templates/vertical-full-page-map/markup/verticalresultscount }}
-              {{> templates/vertical-full-page-map/markup/appliedfilters }}
-              {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} --}}
-              {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }} --}}
-            </div>
-            <div class="Answers-resultsHeaderBottom">
-              {{> templates/vertical-full-page-map/markup/alternativeresults }}
+  <div class="Answers AnswersVerticalMap CollapsibleFilters VerticalFullPageMap VerticalFullPageMap--mobileListView js-answersVerticalFullPageMap">
+    <div class="Answers-content">
+      <div class="Answers-contentWrap js-locator-contentWrap" role="region" aria-label="{{ translate phrase="Main location search" }}">
+        <div class="Answers-resultsHeader">
+          <div class="Answers-searchWrapper js-sticky">
+            <div class="Answers-form">
+              {{> templates/vertical-full-page-map/markup/searchbar }}
+              {{> templates/vertical-full-page-map/markup/navigation }}
             </div>
           </div>
-          <!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
-          {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
-            {{!-- {{> templates/vertical-full-page-map/markup/sortoptions }} --}}
-            {{!-- {{> templates/vertical-full-page-map/markup/facets }} --}}
-            {{!-- {{> templates/vertical-full-page-map/markup/filterbox }} --}}
-          {{!-- </div> --}}
-          <div class="Answers-resultsWrapper js-locator-resultsWrapper">
-            <div class="Answers-resultsContainer js-locator-resultsContainer js-answersResultsWrapper">
-              <div class="js-answersResultsColumn">
-                <div class="Answers-results js-answersResults">
-                  {{> templates/vertical-full-page-map/markup/verticalresults }}
-                  {{> templates/vertical-full-page-map/markup/pagination }}
-                  {{!-- {{> templates/vertical-full-page-map/markup/qasubmission }} --}}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="Answers-centerTop">
-            {{> templates/vertical-full-page-map/markup/searchthisareabutton }}
+          {{> templates/vertical-full-page-map/markup/spellcheck }}
+          <div class="Answers-resultsHeaderTop">
+            {{> templates/vertical-full-page-map/markup/verticalresultscount }}
+            {{> templates/vertical-full-page-map/markup/appliedfilters }}
+            {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} --}}
+            {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }} --}}
           </div>
-          <div class="Answers-stickyBottom" role="region" aria-label="{{ translate phrase="Map controls" }}">
-            {{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="desktop"}}
-            {{> templates/vertical-full-page-map/markup/locationbias modifier="main"}}
+          <div class="Answers-resultsHeaderBottom">
+            {{> templates/vertical-full-page-map/markup/alternativeresults }}
           </div>
         </div>
-        <div class="Answers-mapWrapper" role="region" aria-label="{{ translate phrase="Map" }}">
-          {{> templates/vertical-full-page-map/markup/map }}
-          <div class="Answers-mapFooter">
-              {{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="mobileMap"}}
-            {{> templates/vertical-full-page-map/markup/locationbias modifier="mobileMap"}}
+        <!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
+        {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
+          {{!-- {{> templates/vertical-full-page-map/markup/sortoptions }} --}}
+          {{!-- {{> templates/vertical-full-page-map/markup/facets }} --}}
+          {{!-- {{> templates/vertical-full-page-map/markup/filterbox }} --}}
+        {{!-- </div> --}}
+        <div class="Answers-resultsWrapper js-locator-resultsWrapper">
+          <div class="Answers-resultsContainer js-locator-resultsContainer js-answersResultsWrapper">
+            <div class="js-answersResultsColumn">
+              <div class="Answers-results js-answersResults">
+                {{> templates/vertical-full-page-map/markup/verticalresults }}
+                {{> templates/vertical-full-page-map/markup/pagination }}
+                {{!-- {{> templates/vertical-full-page-map/markup/qasubmission }} --}}
+              </div>
+            </div>
           </div>
         </div>
-        {{> templates/vertical-full-page-map/markup/mobilelisttoggles }}
+        <div class="Answers-centerTop">
+          {{> templates/vertical-full-page-map/markup/searchthisareabutton }}
+        </div>
+        <div class="Answers-stickyBottom" role="region" aria-label="{{ translate phrase="Map controls" }}">
+          {{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="desktop"}}
+          {{> templates/vertical-full-page-map/markup/locationbias modifier="main"}}
+        </div>
       </div>
+      <div class="Answers-mapWrapper" role="region" aria-label="{{ translate phrase="Map" }}">
+        {{> templates/vertical-full-page-map/markup/map }}
+        <div class="Answers-mapFooter">
+            {{> templates/vertical-full-page-map/markup/searchthisareatoggle modifier="mobileMap"}}
+          {{> templates/vertical-full-page-map/markup/locationbias modifier="mobileMap"}}
+        </div>
+      </div>
+      {{> templates/vertical-full-page-map/markup/mobilelisttoggles }}
     </div>
-    <div class="Answers-footer js-answersFooter">
-      {{> layouts/yext-logo }}
-    </div>
+  </div>
+  <div class="Answers-footer js-answersFooter">
+    {{> layouts/yext-logo }}
+  </div>
 {{/layouts/html }}
 

test-site/pages-patches/locations_full_page_map_with_filters.html.hbs.patch

@@ -1,15 +1,15 @@
---- locations_full_page_map_with_filters.html.hbs
-+++ locations_full_page_map_with_filters.html.hbs
-@@ -1,7 +1,7 @@
- {{#> layouts/html pageWrapperCss="YxtPage-wrapper--mobileListView" }}
-   {{#> script/core }}
+--- templates/vertical-full-page-map/page.html.hbs	2021-05-19 22:15:49.000000000 -0400
++++ test-site/pages/locations_full_page_map_with_filters.html.hbs	2021-05-20 11:19:09.000000000 -0400
+@@ -3,7 +3,7 @@
      {{> cards/all }}
+     {{> theme-components/theme-map/script}}
+     {{> theme-components/vertical-full-page-map/script}}
 -    {{!-- {{> templates/vertical-full-page-map/collapsible-filters/page-setup }} --}}
 +    {{> templates/vertical-full-page-map/collapsible-filters/page-setup }}
      {{> templates/vertical-full-page-map/page-setup }}
      {{> templates/vertical-full-page-map/script/searchbar }}
      {{> templates/vertical-full-page-map/script/spellcheck }}
-@@ -9,7 +9,7 @@
+@@ -11,7 +11,7 @@
      {{> templates/vertical-full-page-map/script/verticalresultscount }}
      {{> templates/vertical-full-page-map/script/appliedfilters }}
      {{!-- {{> templates/vertical-full-page-map/script/sortoptions }} --}}
@@ -18,28 +18,28 @@
      {{!-- {{> templates/vertical-full-page-map/script/filterbox }} --}}
      {{> templates/vertical-full-page-map/script/verticalresults }}
      {{> templates/vertical-full-page-map/script/pagination }}
-@@ -32,19 +32,19 @@
-             <div class="Answers-resultsHeaderTop">
-               {{> templates/vertical-full-page-map/markup/verticalresultscount }}
-               {{> templates/vertical-full-page-map/markup/appliedfilters }}
--              {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} --}}
--              {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }} --}}
-+              {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }}
-+              {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}
-             </div>
-             <div class="Answers-resultsHeaderBottom">
-               {{> templates/vertical-full-page-map/markup/alternativeresults }}
-             </div>
+@@ -33,19 +33,19 @@
+           <div class="Answers-resultsHeaderTop">
+             {{> templates/vertical-full-page-map/markup/verticalresultscount }}
+             {{> templates/vertical-full-page-map/markup/appliedfilters }}
+-            {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }} --}}
+-            {{!-- {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }} --}}
++            {{> templates/vertical-full-page-map/collapsible-filters/markup/filterlink }}
++            {{> templates/vertical-full-page-map/collapsible-filters/markup/viewresultsbutton }}
            </div>
-           <!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
--          {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
-+          <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
-             {{!-- {{> templates/vertical-full-page-map/markup/sortoptions }} --}}
--            {{!-- {{> templates/vertical-full-page-map/markup/facets }} --}}
-+            {{> templates/vertical-full-page-map/markup/facets }}
-             {{!-- {{> templates/vertical-full-page-map/markup/filterbox }} --}}
--          {{!-- </div> --}}
-+          </div>
-           <div class="Answers-resultsWrapper js-locator-resultsWrapper">
-             <div class="Answers-resultsContainer js-locator-resultsContainer js-answersResultsWrapper">
-               <div class="js-answersResultsColumn">
+           <div class="Answers-resultsHeaderBottom">
+             {{> templates/vertical-full-page-map/markup/alternativeresults }}
+           </div>
+         </div>
+         <!-- Uncomment the following div if you want to include filters, facets, or sort options  -->
+-        {{!-- <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive"> --}}
++        <div class="Answers-filtersWrapper js-answersFiltersWrapper CollapsibleFilters-inactive">
+           {{!-- {{> templates/vertical-full-page-map/markup/sortoptions }} --}}
+-          {{!-- {{> templates/vertical-full-page-map/markup/facets }} --}}
++          {{> templates/vertical-full-page-map/markup/facets }}
+           {{!-- {{> templates/vertical-full-page-map/markup/filterbox }} --}}
+-        {{!-- </div> --}}
++        </div>
+         <div class="Answers-resultsWrapper js-locator-resultsWrapper">
+           <div class="Answers-resultsContainer js-locator-resultsContainer js-answersResultsWrapper">
+             <div class="js-answersResultsColumn">

tests/script/partials/sdk-js-script-tags.js

@@ -3,24 +3,20 @@ const hbs = require('../../test-utils/hbs');
 const defaultOutput = `<script
   src="https://assets.sitescdn.net/answers/v1.8/answers-modern.min.js"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="https://assets.sitescdn.net/answers/v1.8/answers.min.js"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>`;
 
 const jaOutput = `<script
   src="https://assets.sitescdn.net/answers/v1.8/ja-answers-modern.min.js"
   type="module"
-  onload="initAnswers()"
 ></script>
 <script
   src="https://assets.sitescdn.net/answers/v1.8/ja-answers.min.js"
   nomodule
-  onload="initAnswers()"
   defer
 ></script>`;