From 4fb639861f76dff8ca3da3be11afba56c6f72779 Mon Sep 17 00:00:00 2001 From: cea2aj <42848445+cea2aj@users.noreply.github.com> Date: Mon, 24 May 2021 16:00:59 -0400 Subject: [PATCH 1/3] Fix locator bundle race condition (#786) Fix the race condition which occurs when the search query loads before the locator bundle This fix ensures that the locator bundle executes after Answers loads, but before Answers initializes. The race condition issue was first found on Theme 1.20.1, and it caused the cards to break when the page loaded. I put a fix up in #739, which stopped the page from breaking, but it did not fix the underlying cause of the race condition. This PR fixes the root problem by making the execution order of the javascript consistent. The race condition lead to an issue where two queries were ran on page load. This became a problem in a techops (Zendesk 405748) because the page would load and return no results while being zoomed into Kansas. This PR prevents the double queries from being sent if the locator bundle takes a while to load. There still may be some situations where two queries are sent on page load, but those issues are out of scope of this particular issue. I also zoomed out the map by default so that if no default initial search is supplied, the map will show the entire US rather than be zoomed into Kansas. J=SLAP-1329 TEST=manual Test both Google Maps and Mapbox. Use fiddler to artificially delay the locator bundle. Test iframe and non-iframe experiences. --- layouts/html.hbs | 1 + script/partials/sdk-js-script-tags.hbs | 2 -- .../VerticalFullPageMapOrchestrator.js | 2 +- .../vertical-full-page-map/page-setup.js | 30 ++++--------------- .../vertical-full-page-map/page.html.hbs | 3 +- ..._full_page_map_with_filters.html.hbs.patch | 4 +-- tests/script/partials/sdk-js-script-tags.js | 4 --- 7 files changed, 10 insertions(+), 36 deletions(-) diff --git a/layouts/html.hbs b/layouts/html.hbs index d41854428..2563ebd2c 100644 --- a/layouts/html.hbs +++ b/layouts/html.hbs @@ -80,6 +80,7 @@ diff --git a/script/partials/sdk-js-script-tags.hbs b/script/partials/sdk-js-script-tags.hbs index 4f93801be..3f916e6cd 100644 --- a/script/partials/sdk-js-script-tags.hbs +++ b/script/partials/sdk-js-script-tags.hbs @@ -6,11 +6,9 @@ \ No newline at end of file diff --git a/static/js/theme-map/VerticalFullPageMapOrchestrator.js b/static/js/theme-map/VerticalFullPageMapOrchestrator.js index b5099e95a..e75bc1926 100644 --- a/static/js/theme-map/VerticalFullPageMapOrchestrator.js +++ b/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 diff --git a/templates/vertical-full-page-map/page-setup.js b/templates/vertical-full-page-map/page-setup.js index 9e01130d2..48540c3b8 100644 --- a/templates/vertical-full-page-map/page-setup.js +++ b/templates/vertical-full-page-map/page-setup.js @@ -1,31 +1,11 @@ -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(); - } -} +{{> theme-components/theme-map/script}} +{{> theme-components/vertical-full-page-map/script}} /** - * 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(); } \ No newline at end of file diff --git a/templates/vertical-full-page-map/page.html.hbs b/templates/vertical-full-page-map/page.html.hbs index 7302b1077..ea861d123 100644 --- a/templates/vertical-full-page-map/page.html.hbs +++ b/templates/vertical-full-page-map/page.html.hbs @@ -17,8 +17,7 @@ {{> templates/vertical-full-page-map/script/locationbias modifier="main" }} {{> templates/vertical-full-page-map/script/locationbias modifier="mobileMap" }} {{/script/core }} - +