How to fix type="text/lazyload" on user store

Some speed and lazy-load apps rewrite third-party scripts on the page so they do not run at load: they change the script type to something the browser ignores, and move the source into a data attribute. Our embed code is caught by this like any other, and the symptom is a page where the locator container is present but empty.

How to recognise it

Inspect the page and look at our script tag. If its type reads text/lazyload rather than text/javascript, or the iframe inside the container carries loading="lazy" and a data-src instead of a src, this is the problem. The browser is doing exactly what it was told; it was told the wrong thing.

Step 1: Give the script an id

The snippet below needs to find our script, so add an id to the script tag in the embed code you pasted:

<script id="progus-map" type="text/javascript">

Step 2: Add the recovery snippet

Paste this into your theme, in theme.liquid or another file that loads on the page carrying the locator. It looks for the rewritten script and iframe, puts them back the way they should be, and gives up quietly after fifty tries so it cannot spin forever on a page that never had a locator on it.

(function check(retries = 50) {
  try {
    const lazyScript = document.querySelector('script#progus-map[type="text/lazyload"]');
    if (lazyScript) {
      lazyScript.removeAttribute('type');
      if (lazyScript.hasAttribute('data-src')) {
        lazyScript.removeAttribute('data-src');
      }
      if (!lazyScript.src) {
        const s = document.createElement('script');
        s.text = lazyScript.textContent;
        lazyScript.replaceWith(s);
      }
    }
    const container = document.getElementById('progus-store-locator');
    const lazyIframe = container && container.querySelector('iframe[loading="lazy"]');
    if (lazyIframe) {
      lazyIframe.removeAttribute('loading');
      if (lazyIframe.dataset.src) {
        lazyIframe.src = lazyIframe.dataset.src;
      }
    }
    if ((!lazyScript || !lazyIframe) && retries > 0) {
      return setTimeout(function () { check(retries - 1); }, 300);
    }
  } catch (err) {
    /* nothing to recover: the page simply has no lazy-loaded locator */
  }
})();

A word of warning

This works around another app rather than fixing it, so re-check it after you change themes or update the optimizer. If the optimizer has a setting to exclude a script by id, use that instead: an exclusion list is a supported feature, and this snippet is a repair.

Stuck on any of this? Open the chat in the bottom right corner of the app and we will help you set it up.